Skip to content

Commit

Permalink
Add a Row control to grid layout in manual mode. (#60652)
Browse files Browse the repository at this point in the history 
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
  • Loading branch information
@tellthemachines @andrewserong @noisysocks
4 people authored Apr 15, 2024
1 parent 4634890 commit 741aaab
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 47 deletions.
6 changes: 6 additions & 0 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,12 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
);
if ( ! empty( $layout['rowCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
);
}
} else {
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';

Expand Down
153 changes: 106 additions & 47 deletions packages/block-editor/src/layouts/grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,20 @@ export default {
layout = {},
onChange,
clientId,
layoutBlockSupport = {},
} ) {
const { allowSizingOnChildren = false } = layoutBlockSupport;
return (
<>
<GridLayoutTypeControl
layout={ layout }
onChange={ onChange }
/>
{ layout?.columnCount ? (
<GridLayoutColumnsControl
<GridLayoutColumnsAndRowsControl
layout={ layout }
onChange={ onChange }
allowSizingOnChildren={ allowSizingOnChildren }
/>
) : (
<GridLayoutMinimumWidthControl
Expand All @@ -104,7 +107,11 @@ export default {
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS,
} ) {
const { minimumColumnWidth = '12rem', columnCount = null } = layout;
const {
minimumColumnWidth = '12rem',
columnCount = null,
rowCount = null,
} = layout;

// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
Expand All @@ -121,6 +128,11 @@ export default {
rules.push(
`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
);
if ( rowCount ) {
rules.push(
`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
);
}
} else if ( minimumColumnWidth ) {
rules.push(
`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
Expand Down Expand Up @@ -227,53 +239,100 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
}

// Enables setting number of grid columns
function GridLayoutColumnsControl( { layout, onChange } ) {
const { columnCount = 3 } = layout;
function GridLayoutColumnsAndRowsControl( {
layout,
onChange,
allowSizingOnChildren,
} ) {
const { columnCount = 3, rowCount } = layout;

return (
<fieldset>
<BaseControl.VisualLabel as="legend">
{ __( 'Columns' ) }
</BaseControl.VisualLabel>
<Flex gap={ 4 }>
<FlexItem isBlock>
<NumberControl
size={ '__unstable-large' }
onChange={ ( value ) => {
/**
* If the input is cleared, avoid switching
* back to "Auto" by setting a value of "1".
*/
const validValue = value !== '' ? value : '1';
onChange( {
...layout,
columnCount: validValue,
} );
} }
value={ columnCount }
min={ 1 }
label={ __( 'Columns' ) }
hideLabelFromVision
/>
</FlexItem>
<FlexItem isBlock>
<RangeControl
value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
onChange={ ( value ) =>
onChange( {
...layout,
columnCount: value,
} )
}
min={ 1 }
max={ 16 }
withInputField={ false }
label={ __( 'Columns' ) }
hideLabelFromVision
/>
</FlexItem>
</Flex>
</fieldset>
<>
<fieldset>
<BaseControl.VisualLabel as="legend">
{ __( 'Columns' ) }
</BaseControl.VisualLabel>
<Flex gap={ 4 }>
<FlexItem isBlock>
<NumberControl
size={ '__unstable-large' }
onChange={ ( value ) => {
/**
* If the input is cleared, avoid switching
* back to "Auto" by setting a value of "1".
*/
const validValue = value !== '' ? value : '1';
onChange( {
...layout,
columnCount: validValue,
} );
} }
value={ columnCount }
min={ 1 }
label={ __( 'Columns' ) }
hideLabelFromVision
/>
</FlexItem>
<FlexItem isBlock>
<RangeControl
value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
onChange={ ( value ) =>
onChange( {
...layout,
columnCount: value,
} )
}
min={ 1 }
max={ 16 }
withInputField={ false }
label={ __( 'Columns' ) }
hideLabelFromVision
/>
</FlexItem>
</Flex>
</fieldset>
{ allowSizingOnChildren &&
window.__experimentalEnableGridInteractivity && (
<fieldset>
<BaseControl.VisualLabel as="legend">
{ __( 'Rows' ) }
</BaseControl.VisualLabel>
<Flex gap={ 4 }>
<FlexItem isBlock>
<NumberControl
size={ '__unstable-large' }
onChange={ ( value ) => {
onChange( {
...layout,
rowCount: value,
} );
} }
value={ rowCount }
min={ 1 }
label={ __( 'Rows' ) }
hideLabelFromVision
/>
</FlexItem>
<FlexItem isBlock>
<RangeControl
value={ parseInt( rowCount, 10 ) } // RangeControl can't deal with strings.
onChange={ ( value ) =>
onChange( {
...layout,
rowCount: value,
} )
}
min={ 1 }
max={ 16 }
withInputField={ false }
label={ __( 'Rows' ) }
hideLabelFromVision
/>
</FlexItem>
</Flex>
</fieldset>
) }
</>
);
}

Expand Down

0 comments on commit 741aaab

Please sign in to comment.