From 0562e14a61acfc9360e64372f5c5e5fd1db7b29d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 1 Mar 2024 14:58:57 +1100 Subject: [PATCH 01/15] Separate flex child controls so each has its own reset. --- .../components/child-layout-control/index.js | 119 +++++++++++++----- .../global-styles/dimensions-panel.js | 41 ++---- 2 files changed, 95 insertions(+), 65 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 310d9cd2a3f155..30a310d9fb5d11 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -7,6 +7,8 @@ import { __experimentalUnitControl as UnitControl, __experimentalInputControl as InputControl, __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; @@ -28,25 +30,56 @@ function helpText( selfStretch, parentLayout ) { /** * Form to edit the child layout value. * - * @param {Object} props Props. - * @param {Object} props.value The child layout value. - * @param {Function} props.onChange Function to update the child layout value. - * @param {Object} props.parentLayout The parent layout value. + * @param {Object} props Props. + * @param {Object} props.value The child layout value. + * @param {Function} props.onChange Function to update the child layout value. + * @param {Object} props.parentLayout The parent layout value. * + * @param {boolean} props.isShownByDefault + * @param {string} props.panelId * @return {Element} child layout edit element. */ export default function ChildLayoutControl( { value: childLayout = {}, onChange, parentLayout, + isShownByDefault, + panelId, } ) { const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout; const { type: parentType, default: { type: defaultParentType = 'default' } = {}, + orientation = 'horizontal', } = parentLayout ?? {}; const parentLayoutType = parentType || defaultParentType; + const hasFlexValue = () => !! selfStretch; + const flexResetLabel = + orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' ); + const resetFlex = () => { + onChange( { + selfStretch: undefined, + flexSize: undefined, + } ); + }; + + const hasColumnSpanValue = () => !! columnSpan; + const resetColumnSpan = () => { + onChange( { + rowSpan, + columnSpan: undefined, + } ); + }; + + const hasRowSpanValue = () => !! rowSpan; + const resetRowSpan = () => { + onChange( { + columnSpan, + rowSpan: undefined, + } ); + }; + useEffect( () => { if ( selfStretch === 'fixed' && ! flexSize ) { onChange( { @@ -59,7 +92,15 @@ export default function ChildLayoutControl( { return ( <> { parentLayoutType === 'flex' && ( - <> + ) } - + ) } { parentLayoutType === 'grid' && ( - - + { - onChange( { - rowSpan, - columnSpan: value, - } ); - } } - value={ columnSpan } - min={ 1 } - /> - + { + onChange( { + rowSpan, + columnSpan: value, + } ); + } } + value={ columnSpan } + min={ 1 } + /> + + { - onChange( { - columnSpan, - rowSpan: value, - } ); - } } - value={ rowSpan } - min={ 1 } - /> + onDeselect={ resetRowSpan } + isShownByDefault={ isShownByDefault } + panelId={ panelId } + > + { + onChange( { + columnSpan, + rowSpan: value, + } ); + } } + value={ rowSpan } + min={ 1 } + /> + ) } diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 1386df0dfe2894..6344ad8d1b4a3b 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -12,7 +12,6 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, __experimentalBoxControl as BoxControl, __experimentalHStack as HStack, - __experimentalVStack as VStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalView as View, @@ -396,16 +395,7 @@ export default function DimensionsPanel( { // Child Layout const showChildLayoutControl = useHasChildLayout( settings ); const childLayout = inheritedValue?.layout; - const { orientation = 'horizontal' } = settings?.parentLayout ?? {}; - const { - type: parentType, - default: { type: defaultParentType = 'default' } = {}, - } = settings?.parentLayout ?? {}; - const parentLayoutType = parentType || defaultParentType; - const flexResetLabel = - orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' ); - const childLayoutResetLabel = - parentLayoutType === 'flex' ? flexResetLabel : __( 'Grid spans' ); + const setChildLayout = ( newChildLayout ) => { onChange( { ...value, @@ -414,15 +404,6 @@ export default function DimensionsPanel( { }, } ); }; - const resetChildLayoutValue = () => { - setChildLayout( { - selfStretch: undefined, - flexSize: undefined, - columnSpan: undefined, - rowSpan: undefined, - } ); - }; - const hasChildLayoutValue = () => !! value?.layout; const resetAllFilter = useCallback( ( previousValue ) => { return { @@ -650,24 +631,16 @@ export default function DimensionsPanel( { ) } { showChildLayoutControl && ( - - - + /> ) } { showMinHeightControl && ( Date: Fri, 1 Mar 2024 09:43:20 +1100 Subject: [PATCH 02/15] Output grid-start styling --- lib/block-supports/layout.php | 18 +++++++++++-- .../block-editor/src/hooks/layout-child.js | 27 +++++++++++++++++-- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 30b5d8d02084a8..17763d572f07b1 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -581,11 +581,25 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $child_layout_declarations['flex-grow'] = '1'; } - if ( isset( $block['attrs']['style']['layout']['columnSpan'] ) ) { + if ( isset( $block['attrs']['style']['layout']['columnStart'] ) && isset( $block['attrs']['style']['layout']['columnSpan'] ) ) { + $column_start = $block['attrs']['style']['layout']['columnStart']; + $column_span = $block['attrs']['style']['layout']['columnSpan']; + $child_layout_declarations['grid-column'] = "$column_start / span $column_span"; + } elseif ( isset( $block['attrs']['style']['layout']['columnStart'] ) ) { + $column_start = $block['attrs']['style']['layout']['columnStart']; + $child_layout_declarations['grid-column'] = "$column_start"; + } elseif ( isset( $block['attrs']['style']['layout']['columnSpan'] ) ) { $column_span = $block['attrs']['style']['layout']['columnSpan']; $child_layout_declarations['grid-column'] = "span $column_span"; } - if ( isset( $block['attrs']['style']['layout']['rowSpan'] ) ) { + if ( isset( $block['attrs']['style']['layout']['rowStart'] ) && isset( $block['attrs']['style']['layout']['rowSpan'] ) ) { + $row_start = $block['attrs']['style']['layout']['rowStart']; + $row_span = $block['attrs']['style']['layout']['rowSpan']; + $child_layout_declarations['grid-row'] = "$row_start / span $row_span"; + } elseif ( isset( $block['attrs']['style']['layout']['rowStart'] ) ) { + $row_start = $block['attrs']['style']['layout']['rowStart']; + $child_layout_declarations['grid-row'] = "$row_start"; + } elseif ( isset( $block['attrs']['style']['layout']['rowSpan'] ) ) { $row_span = $block['attrs']['style']['layout']['rowSpan']; $child_layout_declarations['grid-row'] = "span $row_span"; } diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js index d8333e8e0e830f..9aac9735bcbd68 100644 --- a/packages/block-editor/src/hooks/layout-child.js +++ b/packages/block-editor/src/hooks/layout-child.js @@ -17,7 +17,14 @@ function useBlockPropsChildLayoutStyles( { style } ) { return ! select( blockEditorStore ).getSettings().disableLayoutStyles; } ); const layout = style?.layout ?? {}; - const { selfStretch, flexSize, columnSpan, rowSpan } = layout; + const { + selfStretch, + flexSize, + columnStart, + rowStart, + columnSpan, + rowSpan, + } = layout; const parentLayout = useLayout() || {}; const { columnCount, minimumColumnWidth } = parentLayout; const id = useInstanceId( useBlockPropsChildLayoutStyles ); @@ -34,6 +41,14 @@ function useBlockPropsChildLayoutStyles( { style } ) { css = `${ selector } { flex-grow: 1; }`; + } else if ( columnStart && columnSpan ) { + css = `${ selector } { + grid-column: ${ columnStart } / span ${ columnSpan }; + }`; + } else if ( columnStart ) { + css = `${ selector } { + grid-column: ${ columnStart }; + }`; } else if ( columnSpan ) { css = `${ selector } { grid-column: span ${ columnSpan }; @@ -79,7 +94,15 @@ function useBlockPropsChildLayoutStyles( { style } ) { } }`; } - if ( rowSpan ) { + if ( rowStart && rowSpan ) { + css += `${ selector } { + grid-row: ${ rowStart } / span ${ rowSpan }; + }`; + } else if ( rowStart ) { + css += `${ selector } { + grid-row: ${ rowStart }; + }`; + } else if ( rowSpan ) { css += `${ selector } { grid-row: span ${ rowSpan }; }`; From 90ad7610e9780fcf81dab5af126b014f0132c94c Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 1 Mar 2024 10:38:34 +1100 Subject: [PATCH 03/15] Add Column Start and Row Start controls to block inspector --- .../components/child-layout-control/index.js | 103 +++++++++++++----- .../global-styles/dimensions-panel.js | 4 + 2 files changed, 78 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 310d9cd2a3f155..728df01d361cde 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -40,7 +40,14 @@ export default function ChildLayoutControl( { onChange, parentLayout, } ) { - const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout; + const { + selfStretch, + flexSize, + columnStart, + rowStart, + columnSpan, + rowSpan, + } = childLayout; const { type: parentType, default: { type: defaultParentType = 'default' } = {}, @@ -107,34 +114,72 @@ export default function ChildLayoutControl( { ) } { parentLayoutType === 'grid' && ( - - { - onChange( { - rowSpan, - columnSpan: value, - } ); - } } - value={ columnSpan } - min={ 1 } - /> - { - onChange( { - columnSpan, - rowSpan: value, - } ); - } } - value={ rowSpan } - min={ 1 } - /> - + <> + + { + onChange( { + columnStart: value, + rowStart, + columnSpan, + rowSpan, + } ); + } } + value={ columnStart } + min={ 1 } + /> + { + onChange( { + columnStart, + rowStart: value, + columnSpan, + rowSpan, + } ); + } } + value={ rowStart } + min={ 1 } + /> + + + { + onChange( { + columnStart, + rowStart, + columnSpan: value, + rowSpan, + } ); + } } + value={ columnSpan } + min={ 1 } + /> + { + onChange( { + columnStart, + rowStart, + columnSpan, + rowSpan: value, + } ); + } } + value={ rowSpan } + min={ 1 } + /> + + ) } ); diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 1386df0dfe2894..0d7473be288034 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -418,6 +418,8 @@ export default function DimensionsPanel( { setChildLayout( { selfStretch: undefined, flexSize: undefined, + columnStart: undefined, + rowStart: undefined, columnSpan: undefined, rowSpan: undefined, } ); @@ -433,6 +435,8 @@ export default function DimensionsPanel( { wideSize: undefined, selfStretch: undefined, flexSize: undefined, + columnStart: undefined, + rowStart: undefined, columnSpan: undefined, rowSpan: undefined, } ), From 00fccfe2fec2672381120ecd99abcbb2e0ef1d37 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 1 Mar 2024 15:51:05 +1100 Subject: [PATCH 04/15] Simplify php array access --- lib/block-supports/layout.php | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 17763d572f07b1..a442d47fb766a5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -581,28 +581,26 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $child_layout_declarations['flex-grow'] = '1'; } - if ( isset( $block['attrs']['style']['layout']['columnStart'] ) && isset( $block['attrs']['style']['layout']['columnSpan'] ) ) { - $column_start = $block['attrs']['style']['layout']['columnStart']; - $column_span = $block['attrs']['style']['layout']['columnSpan']; + $column_start = isset( $block['attrs']['style']['layout']['columnStart'] ) ? $block['attrs']['style']['layout']['columnStart'] : null; + $column_span = isset( $block['attrs']['style']['layout']['columnSpan'] ) ? $block['attrs']['style']['layout']['columnSpan'] : null; + if ( $column_start && $column_span ) { $child_layout_declarations['grid-column'] = "$column_start / span $column_span"; - } elseif ( isset( $block['attrs']['style']['layout']['columnStart'] ) ) { - $column_start = $block['attrs']['style']['layout']['columnStart']; + } elseif ( $column_start ) { $child_layout_declarations['grid-column'] = "$column_start"; - } elseif ( isset( $block['attrs']['style']['layout']['columnSpan'] ) ) { - $column_span = $block['attrs']['style']['layout']['columnSpan']; + } elseif ( $column_span ) { $child_layout_declarations['grid-column'] = "span $column_span"; } - if ( isset( $block['attrs']['style']['layout']['rowStart'] ) && isset( $block['attrs']['style']['layout']['rowSpan'] ) ) { - $row_start = $block['attrs']['style']['layout']['rowStart']; - $row_span = $block['attrs']['style']['layout']['rowSpan']; + + $row_start = isset( $block['attrs']['style']['layout']['rowStart'] ) ? $block['attrs']['style']['layout']['rowStart'] : null; + $row_span = isset( $block['attrs']['style']['layout']['rowSpan'] ) ? $block['attrs']['style']['layout']['rowSpan'] : null; + if ( $row_start && $row_span ) { $child_layout_declarations['grid-row'] = "$row_start / span $row_span"; - } elseif ( isset( $block['attrs']['style']['layout']['rowStart'] ) ) { - $row_start = $block['attrs']['style']['layout']['rowStart']; + } elseif ( $row_start ) { $child_layout_declarations['grid-row'] = "$row_start"; - } elseif ( isset( $block['attrs']['style']['layout']['rowSpan'] ) ) { - $row_span = $block['attrs']['style']['layout']['rowSpan']; + } elseif ( $row_span ) { $child_layout_declarations['grid-row'] = "span $row_span"; } + $child_layout_styles[] = array( 'selector' => ".$container_content_class", 'declarations' => $child_layout_declarations, From 6091409459a2785b63cd259ff8c5235a66f572b7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 1 Mar 2024 16:37:16 +1100 Subject: [PATCH 05/15] Remove a few more issets --- lib/block-supports/layout.php | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index a442d47fb766a5..5cd428e8f85223 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -606,15 +606,18 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { 'declarations' => $child_layout_declarations, ); + $minimum_column_width = isset( $block['attrs']['style']['layout']['minimumColumnWidth'] ) ? $block['attrs']['style']['layout']['minimumColumnWidth'] : null; + $column_count = isset( $block['attrs']['style']['layout']['columnCount'] ) ? $block['attrs']['style']['layout']['columnCount'] : null; + /* * If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set, * the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive. * But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't * exist, we can assume that the grid is responsive. */ - if ( isset( $block['attrs']['style']['layout']['columnSpan'] ) && ( isset( $block['parentLayout']['minimumColumnWidth'] ) || ! isset( $block['parentLayout']['columnCount'] ) ) ) { - $column_span_number = floatval( $block['attrs']['style']['layout']['columnSpan'] ); - $parent_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : '12rem'; + if ( $column_span && ( $minimum_column_width || ! $column_count ) ) { + $column_span_number = floatval( $column_span ); + $parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem'; $parent_column_value = floatval( $parent_column_width ); $parent_column_unit = explode( $parent_column_value, $parent_column_width ); From 3e5314495c1c7bba7abd3af389583ac03df6ff21 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 1 Mar 2024 17:10:42 +1100 Subject: [PATCH 06/15] Adjust container query to take columnStart into account. --- lib/block-supports/layout.php | 19 ++++++++------ .../block-editor/src/hooks/layout-child.js | 25 ++++++++++++++----- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 5cd428e8f85223..b53a90cde21855 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -610,13 +610,16 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $column_count = isset( $block['attrs']['style']['layout']['columnCount'] ) ? $block['attrs']['style']['layout']['columnCount'] : null; /* - * If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set, - * the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive. - * But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't - * exist, we can assume that the grid is responsive. + * If columnSpan or columnStart is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set, + * the columnSpan should be removed once the grid is smaller than the span, and columnStart should be removed + * once the grid has less columns than the start. + * If there's a minimumColumnWidth, the grid is responsive. But if the minimumColumnWidth value wasn't changed, it won't be set. + * In that case, if columnCount doesn't exist, we can assume that the grid is responsive. */ - if ( $column_span && ( $minimum_column_width || ! $column_count ) ) { + if ( ( $column_span || $column_start ) && ( $minimum_column_width || ! $column_count ) ) { $column_span_number = floatval( $column_span ); + $column_start_number = floatval( $column_start ); + $highest_number = max( $column_span_number, $column_start_number ); $parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem'; $parent_column_value = floatval( $parent_column_width ); $parent_column_unit = explode( $parent_column_value, $parent_column_width ); @@ -642,14 +645,16 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { * viable to use in the computation of the container query value. */ $default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5; - $container_query_value = $column_span_number * $parent_column_value + ( $column_span_number - 1 ) * $default_gap_value; + $container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value; $container_query_value = $container_query_value . $parent_column_unit; + // If a span is set we want to preserve it as long as possible, otherwise we just reset the value. + $grid_column_value = $column_span ? '1/-1' : 'auto'; $child_layout_styles[] = array( 'rules_group' => "@container (max-width: $container_query_value )", 'selector' => ".$container_content_class", 'declarations' => array( - 'grid-column' => '1/-1', + 'grid-column' => $grid_column_value, ), ); } diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js index 9aac9735bcbd68..4fa641bff203ae 100644 --- a/packages/block-editor/src/hooks/layout-child.js +++ b/packages/block-editor/src/hooks/layout-child.js @@ -59,9 +59,20 @@ function useBlockPropsChildLayoutStyles( { style } ) { * columnCount is set, the grid is responsive so a * container query is needed for the span to resize. */ - if ( columnSpan && ( minimumColumnWidth || ! columnCount ) ) { - // Calculate the container query value. - const columnSpanNumber = parseInt( columnSpan ); + if ( + ( columnSpan || columnStart ) && + ( minimumColumnWidth || ! columnCount ) + ) { + // Check if columnSpan and columnStart are numbers so Math.max doesn't break. + const columnSpanNumber = columnSpan ? parseInt( columnSpan ) : null; + const columnStartNumber = columnStart + ? parseInt( columnStart ) + : null; + const highestNumber = Math.max( + columnSpanNumber, + columnStartNumber + ); + let parentColumnValue = parseFloat( minimumColumnWidth ); /** * 12rem is the default minimumColumnWidth value. @@ -85,12 +96,14 @@ function useBlockPropsChildLayoutStyles( { style } ) { const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5; const containerQueryValue = - columnSpanNumber * parentColumnValue + - ( columnSpanNumber - 1 ) * defaultGapValue; + highestNumber * parentColumnValue + + ( highestNumber - 1 ) * defaultGapValue; + // If a span is set we want to preserve it as long as possible, otherwise we just reset the value. + const gridColumnValue = columnSpan ? '1/-1' : 'auto'; css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) { ${ selector } { - grid-column: 1 / -1; + grid-column: ${ gridColumnValue }; } }`; } From 97c4ceb15e9362661c078a6b1ace0c3356258275 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 4 Mar 2024 16:37:08 +1100 Subject: [PATCH 07/15] Reset grid spans together --- .../components/child-layout-control/index.js | 86 ++++++++----------- 1 file changed, 35 insertions(+), 51 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 30a310d9fb5d11..e1d89bd16c2cc3 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -64,18 +64,10 @@ export default function ChildLayoutControl( { } ); }; - const hasColumnSpanValue = () => !! columnSpan; - const resetColumnSpan = () => { + const hasSpanValue = () => !! columnSpan || !! rowSpan; + const resetGridSpans = () => { onChange( { - rowSpan, columnSpan: undefined, - } ); - }; - - const hasRowSpanValue = () => !! rowSpan; - const resetRowSpan = () => { - onChange( { - columnSpan, rowSpan: undefined, } ); }; @@ -148,49 +140,41 @@ export default function ChildLayoutControl( { ) } { parentLayoutType === 'grid' && ( - - + - { - onChange( { - rowSpan, - columnSpan: value, - } ); - } } - value={ columnSpan } - min={ 1 } - /> - - { + onChange( { + rowSpan, + columnSpan: value, + } ); + } } + value={ columnSpan } + min={ 1 } + /> + + - { - onChange( { - columnSpan, - rowSpan: value, - } ); - } } - value={ rowSpan } - min={ 1 } - /> - + type="number" + onChange={ ( value ) => { + onChange( { + columnSpan, + rowSpan: value, + } ); + } } + value={ rowSpan } + min={ 1 } + /> ) } From 44b5ce45f812b49ae54bdd150d395c3b06f1aa7e Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 4 Mar 2024 16:20:58 +1100 Subject: [PATCH 08/15] Add max to column/row inputs --- .../block-editor/src/components/child-layout-control/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 728df01d361cde..522ab050353317 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -130,6 +130,7 @@ export default function ChildLayoutControl( { } } value={ columnStart } min={ 1 } + max={ parentLayout?.columnCount } /> @@ -162,6 +164,7 @@ export default function ChildLayoutControl( { } } value={ columnSpan } min={ 1 } + max={ parentLayout?.columnCount } /> From 8869a71e49aab8840bc719d88deadb01a6c08ddc Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 13 Mar 2024 15:46:58 +1100 Subject: [PATCH 09/15] Adjust copy --- .../src/components/child-layout-control/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index b17245b52025fc..b620a2dffc1f7c 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -158,14 +158,14 @@ export default function ChildLayoutControl( { { onChange( { @@ -182,7 +182,7 @@ export default function ChildLayoutControl( { { onChange( { @@ -200,14 +200,14 @@ export default function ChildLayoutControl( { { onChange( { @@ -223,7 +223,7 @@ export default function ChildLayoutControl( { { onChange( { From 6dd877063825b43289219d49dc683507a3ad2b29 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 13 Mar 2024 15:47:18 +1100 Subject: [PATCH 10/15] Don't show Grid position by default --- .../block-editor/src/components/child-layout-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index b620a2dffc1f7c..c34853a14969bb 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -160,7 +160,7 @@ export default function ChildLayoutControl( { hasValue={ hasStartValue } label={ __( 'Grid position' ) } onDeselect={ resetGridStarts } - isShownByDefault={ isShownByDefault } + isShownByDefault={ false } panelId={ panelId } > Date: Wed, 13 Mar 2024 15:54:34 +1100 Subject: [PATCH 11/15] Use 'Grid placement' --- .../block-editor/src/components/child-layout-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index c34853a14969bb..41eb09e0bc78d5 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -158,7 +158,7 @@ export default function ChildLayoutControl( { Date: Wed, 13 Mar 2024 16:12:01 +1100 Subject: [PATCH 12/15] Simplify input control labels for now --- .../block-editor/src/components/child-layout-control/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 41eb09e0bc78d5..4f3d6bb28a16cd 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -165,7 +165,7 @@ export default function ChildLayoutControl( { > { onChange( { @@ -182,7 +182,7 @@ export default function ChildLayoutControl( { { onChange( { From 2a1d13b61c9f019696ac1642e5e955504c08167b Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 13 Mar 2024 16:44:40 +1100 Subject: [PATCH 13/15] Put placement behind the Grid interactivity experimental flag for now --- .../components/child-layout-control/index.js | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 4f3d6bb28a16cd..3816d850a30dd4 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -155,48 +155,49 @@ export default function ChildLayoutControl( { ) } { parentLayoutType === 'grid' && ( <> - - { - onChange( { - columnStart: value, - rowStart, - columnSpan, - rowSpan, - } ); - } } - value={ columnStart } - min={ 1 } - max={ parentLayout?.columnCount } - /> - - { - onChange( { - columnStart, - rowStart: value, - columnSpan, - rowSpan, - } ); - } } - value={ rowStart } - min={ 1 } - max={ parentLayout?.columnCount } - /> - + { window.__experimentalEnableGridInteractivity && ( + + { + onChange( { + columnStart: value, + rowStart, + columnSpan, + rowSpan, + } ); + } } + value={ columnStart } + min={ 1 } + max={ parentLayout?.columnCount } + /> + { + onChange( { + columnStart, + rowStart: value, + columnSpan, + rowSpan, + } ); + } } + value={ rowStart } + min={ 1 } + max={ parentLayout?.columnCount } + /> + + ) } - Date: Thu, 14 Mar 2024 12:13:07 +1100 Subject: [PATCH 14/15] Fix input width issue in webkit --- .../components/child-layout-control/index.js | 77 +++++++++++-------- 1 file changed, 43 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 3816d850a30dd4..fdc11fa260e68b 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -9,6 +9,8 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalToolsPanelItem as ToolsPanelItem, + Flex, + FlexItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; @@ -156,7 +158,10 @@ export default function ChildLayoutControl( { { parentLayoutType === 'grid' && ( <> { window.__experimentalEnableGridInteractivity && ( - - { - onChange( { - columnStart: value, - rowStart, - columnSpan, - rowSpan, - } ); - } } - value={ columnStart } - min={ 1 } - max={ parentLayout?.columnCount } - /> - { - onChange( { - columnStart, - rowStart: value, - columnSpan, - rowSpan, - } ); - } } - value={ rowStart } - min={ 1 } - max={ parentLayout?.columnCount } - /> - + + { + onChange( { + columnStart: value, + rowStart, + columnSpan, + rowSpan, + } ); + } } + value={ columnStart } + min={ 1 } + max={ parentLayout?.columnCount } + /> + + + { + onChange( { + columnStart, + rowStart: value, + columnSpan, + rowSpan, + } ); + } } + value={ rowStart } + min={ 1 } + max={ parentLayout?.columnCount } + /> + + ) } Date: Thu, 14 Mar 2024 12:32:57 +1100 Subject: [PATCH 15/15] Show placement after span --- .../components/child-layout-control/index.js | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index fdc11fa260e68b..7fa0349cb18a8f 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -157,6 +157,45 @@ export default function ChildLayoutControl( { ) } { parentLayoutType === 'grid' && ( <> + + { + onChange( { + columnStart, + rowStart, + rowSpan, + columnSpan: value, + } ); + } } + value={ columnSpan } + min={ 1 } + /> + { + onChange( { + columnStart, + rowStart, + columnSpan, + rowSpan: value, + } ); + } } + value={ rowSpan } + min={ 1 } + /> + { window.__experimentalEnableGridInteractivity && ( // Use Flex with an explicit width on the FlexItem instead of HStack to // work around an issue in webkit where inputs with a max attribute are @@ -207,45 +246,6 @@ export default function ChildLayoutControl( { ) } - - { - onChange( { - columnStart, - rowStart, - rowSpan, - columnSpan: value, - } ); - } } - value={ columnSpan } - min={ 1 } - /> - { - onChange( { - columnStart, - rowStart, - columnSpan, - rowSpan: value, - } ); - } } - value={ rowSpan } - min={ 1 } - /> - ) }