Add support for column and row span in grid children. #58539
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,8 @@ import { | |
| __experimentalToggleGroupControl as ToggleGroupControl, | ||
| __experimentalToggleGroupControlOption as ToggleGroupControlOption, | ||
| __experimentalUnitControl as UnitControl, | ||
| __experimentalInputControl as InputControl, | ||
| __experimentalHStack as HStack, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useEffect } from '@wordpress/element'; | ||
|
|
@@ -38,7 +40,18 @@ export default function ChildLayoutControl( { | |
| onChange, | ||
| parentLayout, | ||
| } ) { | ||
| const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout; | ||
| const { | ||
| type: parentLayoutType, | ||
| minimumColumnWidth = '12rem', | ||
| columnCount, | ||
| } = parentLayout; | ||
|
|
||
| /** | ||
| * If columnCount is set, the parentColumnwidth isn't needed because | ||
| * the grid has a fixed number of columns with responsive widths. | ||
| */ | ||
| const parentColumnWidth = columnCount ? null : minimumColumnWidth; | ||
|
|
||
| useEffect( () => { | ||
| if ( selfStretch === 'fixed' && ! flexSize ) { | ||
|
|
@@ -51,49 +64,85 @@ export default function ChildLayoutControl( { | |
|
|
||
| return ( | ||
| <> | ||
| { parentLayoutType === 'flex' && ( | ||
| <> | ||
| <ToggleGroupControl | ||
| __nextHasNoMarginBottom | ||
| size={ '__unstable-large' } | ||
| label={ childLayoutOrientation( parentLayout ) } | ||
| value={ selfStretch || 'fit' } | ||
| help={ helpText( selfStretch, parentLayout ) } | ||
| onChange={ ( value ) => { | ||
| const newFlexSize = | ||
| value !== 'fixed' ? null : flexSize; | ||
| onChange( { | ||
| selfStretch: value, | ||
| flexSize: newFlexSize, | ||
| } ); | ||
| } } | ||
| isBlock={ true } | ||
| > | ||
| <ToggleGroupControlOption | ||
| key={ 'fit' } | ||
| value={ 'fit' } | ||
| label={ __( 'Fit' ) } | ||
| /> | ||
| <ToggleGroupControlOption | ||
| key={ 'fill' } | ||
| value={ 'fill' } | ||
| label={ __( 'Fill' ) } | ||
| /> | ||
| <ToggleGroupControlOption | ||
| key={ 'fixed' } | ||
| value={ 'fixed' } | ||
| label={ __( 'Fixed' ) } | ||
| /> | ||
| </ToggleGroupControl> | ||
| { selfStretch === 'fixed' && ( | ||
| <UnitControl | ||
| size={ '__unstable-large' } | ||
| onChange={ ( value ) => { | ||
| onChange( { | ||
| selfStretch, | ||
| flexSize: value, | ||
| } ); | ||
| } } | ||
| value={ flexSize } | ||
| /> | ||
| ) } | ||
| </> | ||
| ) } | ||
| { parentLayoutType === 'grid' && ( | ||
| <HStack> | ||
| <InputControl | ||
| size={ '__unstable-large' } | ||
| label={ __( 'Column Span' ) } | ||
| type="number" | ||
noisysocks marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Again, not a blocker for this PR, but it might be good to swap this out for 2024-02-14.15.12.18.mp4Alternately we could potentially add a There was a problem hiding this comment. Hmm I don't think hiding the spinners will remove the scrolling behaviour, at least playing with storybook it seems to persist. I'm not sure we'd want to remove it in any case? It's default input behaviour so folks will be expecting it to work. There was a problem hiding this comment.
Ah, fair enough! Might just be me who found it a bit confusing 🙂 |
||
| onChange={ ( value ) => { | ||
| onChange( { | ||
| rowSpan, | ||
| columnSpan: value, | ||
| parentColumnWidth, | ||
|
There was a problem hiding this comment. Is it necessary to store There was a problem hiding this comment.
There was a problem hiding this comment. If it's being cached here will that be a problem if someone goes to update the parent column width after they've set the row/column span, or if they drag and drop between two grids? There was a problem hiding this comment. I think it's being cached after drag. I'm testing some nested layouts and have dragged a child to another grid parent and it still has the value of the former parent's "layout":{"columnSpan":"3","parentColumnWidth":"300px"}}Is that what you mean? There was a problem hiding this comment. Yep, that's what I was getting at. The There was a problem hiding this comment. Oh sorry I didn't see this one. It seems pretty unlikely someone will just drag and drop a block with a column span from one grid to another differently sized grid and not make any further adjustments (and if both grids are the same size it won't be an issue) but I'm open to suggestions if anyone can find a better way to do it! Even if someone does drag and drop a multi-column block between differently sized grids the very worst that can happen is the container query gets a bit wonky and doesn't break at exactly the point it should 🤷 There was a problem hiding this comment.
Oh really? Bugger. That seems like a shortcoming of the add_filter( 'render_block_data', function( $parsed_block, $source_block, $parent_block ) {
$parsed_block['parent_block'] = $parent_block;
}, 10, 3 );
add_filter( 'render_block', function( $block_content, $block ) {
var_dump($block['parent_block']);
}, 10, 2 );There was a problem hiding this comment. To be clear, is that something you think should be addressed now, as part of this PR? There was a problem hiding this comment.
IMO, I don't think it'd be a blocker to landing, but would be good to look at in a follow-up before Grid is taken out of experimental. There was a problem hiding this comment. Ok I might do this as a follow-up because if we want to remove the |
||
| } ); | ||
| } } | ||
| value={ columnSpan } | ||
| min={ 1 } | ||
| /> | ||
| <InputControl | ||
| size={ '__unstable-large' } | ||
| label={ __( 'Row Span' ) } | ||
| type="number" | ||
| onChange={ ( value ) => { | ||
| onChange( { | ||
| columnSpan, | ||
| parentColumnWidth, | ||
| rowSpan: value, | ||
| } ); | ||
| } } | ||
| value={ rowSpan } | ||
| min={ 1 } | ||
| /> | ||
| </HStack> | ||
| ) } | ||
| </> | ||
| ); | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now whenever I see the nullish coalescing operator, all I think is "one day we'll be able to use this properly"! 😄
(This one seems fine to leave in to me since it was already there)