Skip to content

[WIP] Update Columns block to use CSS Grid, add option to adjust grid gap #32137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andrewserong wants to merge 12 commits into from
Closed

[WIP] Update Columns block to use CSS Grid, add option to adjust grid gap #32137

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
34f30f1
Try refactoring Columns block to use CSS Grid, add grid gap
andrewserong May 24, 2021
0e0a19b
Use the counterReset property as a way to force Safari to rerender wh…
andrewserong May 25, 2021
ba1a791
Add call to toWidthPrecision to provide better rounding of fr numbers
andrewserong May 26, 2021
6ef33f6
Add deprecation, fix existing deprecations, add additional fixtures, …
andrewserong May 26, 2021
6ca4fde
Ensure zero and empty width values are treated as though no custom wi…
andrewserong May 27, 2021
d5c0de7
Skip converting non-percentage column width values and use those valu…
andrewserong May 28, 2021
fef4d2d
Add in server rendering of grid styles
andrewserong May 28, 2021
f61dd82
Remove attributes from being saved to post content, remove no-longer …
andrewserong May 28, 2021
46039f0
Fix whitespace issue
andrewserong May 28, 2021
f0834ab
Remove gridTemplateColumns attribute from deprecations
andrewserong May 28, 2021
33333e0
remove gridTemplateColumns attribute from fixture
andrewserong May 28, 2021
18fd3d2
Add gridGap unit control to native mobile
andrewserong Jun 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Ensure zero and empty width values are treated as though no custom wi… 
…dth is specified
  • Loading branch information
@andrewserong
andrewserong committed May 27, 2021
commit 6ca4fdecaea0370f96c643cd16a43bf42d1f533d
11 changes: 11 additions & 0 deletions packages/block-library/src/columns/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,4 +324,15 @@ describe( 'getColumnWidthsAsFrUnits', () => {
const result = getColumnWidthsAsFrUnits( [] );
expect( result ).toBe( '' );
} );

it( 'treats 0 or empty widths as though no custom width is specified', () => {
const blocks = [
{ clientId: 'a', attributes: { width: 0 } },
{ clientId: 'b', attributes: { width: '' } },
{ clientId: 'c', attributes: { width: 33.33 } },
];

const result = getColumnWidthsAsFrUnits( blocks );
expect( result ).toBe( '1fr 1fr 1fr' );
} );
} );
2 changes: 1 addition & 1 deletion packages/block-library/src/columns/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export function getColumnWidthsAsFrUnits( blocks ) {
getEffectiveColumnWidth( block, blocks.length )
);
const fractions = percentageWidths.map( ( width ) =>
toWidthPrecision( ( width / 100 ) * blocks.length )
width ? toWidthPrecision( ( width / 100 ) * blocks.length ) : 1
);
let fractionsString = '';

Expand Down