From 8e523f2452602d70d573e761f02c9b7c440913c6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 28 Oct 2022 16:39:50 +1100 Subject: [PATCH 01/21] Add Layout controls to children of Flex layout blocks --- .../src/components/block-list/block.js | 5 ++- packages/block-editor/src/hooks/layout.js | 34 ++++++++++++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 9e4c9755ec225..c32d929392d8d 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -40,7 +40,7 @@ import BlockCrashBoundary from './block-crash-boundary'; import BlockHtml from './block-html'; import { useBlockProps } from './use-block-props'; import { store as blockEditorStore } from '../../store'; - +import { useLayout } from './layout'; export const BlockListBlockContext = createContext(); /** @@ -130,6 +130,8 @@ function BlockListBlock( { const { removeBlock } = useDispatch( blockEditorStore ); const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] ); + const parentLayout = useLayout(); + // We wrap the BlockEdit component in a div that hides it when editing in // HTML mode. This allows us to render all of the ancillary pieces // (InspectorControls, etc.) which are inside `BlockEdit` but not @@ -148,6 +150,7 @@ function BlockListBlock( { isSelectionEnabled={ isSelectionEnabled } toggleSelection={ toggleSelection } __unstableLayoutClassNames={ layoutClassNames } + __unstableParentLayout={ parentLayout } /> ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index a2058cb24677e..1d6ffc1e706f7 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -15,6 +15,8 @@ import { Button, ButtonGroup, ToggleControl, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, PanelBody, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -265,6 +267,31 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ); } +function ChildLayoutPanel() { + return ( + + + null } + > + + + + + + ); +} + function LayoutTypeSwitcher( { type, onChange } ) { return ( @@ -315,13 +342,18 @@ export function addAttribute( settings ) { */ export const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { name: blockName } = props; + const { name: blockName, __unstableParentLayout: parentLayout } = props; const supportLayout = hasBlockSupport( blockName, layoutBlockSupportKey ); + const { type = 'default' } = parentLayout; + return [ + type === 'flex' && ( + + ), supportLayout && , , ]; From 3c1413c1b75d07c187be268db19c6fe3a987e478 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 1 Nov 2022 16:31:59 +1100 Subject: [PATCH 02/21] Child layout styles on the editor --- packages/block-editor/src/hooks/layout.js | 99 +++++++++++++++++++++-- 1 file changed, 92 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 1d6ffc1e706f7..f72d5847375b3 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -16,7 +16,8 @@ import { ButtonGroup, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, + __experimentalUnitControl as UnitControl, PanelBody, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -267,26 +268,54 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ); } -function ChildLayoutPanel() { +function ChildLayoutPanel( { setAttributes, attributes } ) { + const { style: { layout = {} } = {} } = attributes; + const { selfStretch, flexWidth } = layout; + return ( - + null } + value={ selfStretch || 'fill' } + onChange={ ( value ) => { + setAttributes( { + style: { + layout: { + ...layout, + selfStretch: value, + }, + }, + } ); + } } + isBlock={ true } > - - + { selfStretch === 'fixed' && ( + { + setAttributes( { + style: { + layout: { + ...layout, + flexWidth: value, + }, + }, + } ); + } } + value={ flexWidth } + /> + ) } ); @@ -448,6 +477,57 @@ export const withLayoutStyles = createHigherOrderComponent( } ); +/** + * Override the default block element to add the child layout styles. + * + * @param {Function} BlockListBlock Original component. + * + * @return {Function} Wrapped component. + */ +export const withChildLayoutStyles = createHigherOrderComponent( + ( BlockListBlock ) => ( props ) => { + const { attributes } = props; + const { style: { layout = {} } = {} } = attributes; + const { selfStretch, flexWidth } = layout; + const hasChildLayout = selfStretch || flexWidth; + const disableLayoutStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); + const shouldRenderChildLayoutStyles = + hasChildLayout && ! disableLayoutStyles; + + const element = useContext( BlockList.__unstableElementContext ); + const id = useInstanceId( BlockListBlock ); + const selector = `.wp-container-content-${ id }`; + + let css = ''; + + if ( selfStretch === 'fixed' && flexWidth ) { + css += `${ selector } { + flex-shrink: 0; + flex-basis: ${ flexWidth }; + }`; + } + + // Attach a `wp-container-content` id-based classname. + const className = classnames( props?.className, { + [ `wp-container-content-${ id }` ]: + shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached. + } ); + + return ( + <> + { shouldRenderChildLayoutStyles && + element && + !! css && + createPortal( , element ) } + + + ); + } +); + addFilter( 'blocks.registerBlockType', 'core/layout/addAttribute', @@ -458,6 +538,11 @@ addFilter( 'core/editor/layout/with-layout-styles', withLayoutStyles ); +addFilter( + 'editor.BlockListBlock', + 'core/editor/layout/with-child-layout-styles', + withChildLayoutStyles +); addFilter( 'editor.BlockEdit', 'core/editor/layout/with-inspector-controls', From 36fe32c43d692fcf5a974a596bbfb98a8c27b963 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 1 Nov 2022 17:43:49 +1100 Subject: [PATCH 03/21] Try to get it working on server --- lib/block-supports/layout.php | 51 +++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index a50e1fb883717..6b32a628d5b7b 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -316,13 +316,50 @@ function gutenberg_get_classnames_from_last_tag( $html ) { * @return string Filtered block content. */ function gutenberg_render_layout_support_flag( $block_content, $block ) { - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); - - if ( ! $support_layout ) { + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); + $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ) && isset( $block['attrs']['style']['layout']['flexWidth'] ); + $blocknaem = $block['blockName']; + if ( ! $support_layout + && ! $has_child_layout ) { return $block_content; } + $outer_class_names = array(); + + if ( $has_child_layout && 'fixed' === $block['attrs']['style']['layout']['selfStretch'] ) { + + $container_content_class = wp_unique_id( 'wp-container-content-' ); + + $child_layout_styles = array( + 'selector' => ".$container_content_class", + 'declarations' => array( + 'flex-shrink' => '0', + 'flex-basis' => $block['attrs']['style']['layout']['flexWidth'], + ), + ); + + gutenberg_style_engine_get_stylesheet_from_css_rules( + $child_layout_styles, + array( + 'context' => 'block-supports', + 'prettify' => false, + ) + ); + + $outer_class_names[] = $container_content_class; + + } + + // Return early if only child layout exists. + if ( ! $support_layout && ! empty( $outer_class_names ) ) { + echo "BLOCK RETURN RELR, $blocknaem"; + $content = new WP_HTML_Tag_Processor( $block_content ); + $content->next_tag(); + $content->add_class( implode( ' ', $outer_class_names ) ); + return $content; + } + $block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) ); $global_layout_settings = gutenberg_get_global_settings( array( 'layout' ) ); $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; @@ -435,14 +472,18 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? gutenberg_get_classnames_from_last_tag( $block['innerContent'][0] ) : ''; $content = new WP_HTML_Tag_Processor( $block_content ); + if ( $inner_content_classnames ) { $content->next_tag( array( 'class_name' => $inner_content_classnames ) ); foreach ( $class_names as $class_name ) { $content->add_class( $class_name ); } } else { + $combined_class_names = array_merge( $class_names, $outer_class_names ); $content->next_tag(); - $content->add_class( implode( ' ', $class_names ) ); + foreach ( $combined_class_names as $combined_class_name ) { + $content->add_class( $combined_class_name ); + } } return (string) $content; From 18e3d9c0fb4d86883bb4da6b49554ef3d633cce8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 2 Nov 2022 10:36:56 +1100 Subject: [PATCH 04/21] Fix style generation --- lib/block-supports/layout.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 6b32a628d5b7b..2e5bd07a44f17 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -340,7 +340,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { ); gutenberg_style_engine_get_stylesheet_from_css_rules( - $child_layout_styles, + array( $child_layout_styles ), array( 'context' => 'block-supports', 'prettify' => false, @@ -353,7 +353,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { // Return early if only child layout exists. if ( ! $support_layout && ! empty( $outer_class_names ) ) { - echo "BLOCK RETURN RELR, $blocknaem"; $content = new WP_HTML_Tag_Processor( $block_content ); $content->next_tag(); $content->add_class( implode( ' ', $outer_class_names ) ); From d52ee1f175715d2df9b8bc90c2190bb67e816f25 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 2 Nov 2022 12:01:22 +1100 Subject: [PATCH 05/21] Fix classname logic --- lib/block-supports/layout.php | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 2e5bd07a44f17..40c618fa7681a 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -464,13 +464,25 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } + $content_with_outer_classnames = ''; + + if ( ! empty( $outer_class_names ) ) { + $content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content ); + $content_with_outer_classnames->next_tag(); + foreach ( $outer_class_names as $outer_class_name ) { + $content_with_outer_classnames->add_class( $outer_class_name ); + } + + $content_with_outer_classnames = (string) $content_with_outer_classnames; + } + /** * The first chunk of innerContent contains the block markup up until the inner blocks start. * We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk. */ $inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? gutenberg_get_classnames_from_last_tag( $block['innerContent'][0] ) : ''; - $content = new WP_HTML_Tag_Processor( $block_content ); + $content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content ); if ( $inner_content_classnames ) { $content->next_tag( array( 'class_name' => $inner_content_classnames ) ); @@ -478,10 +490,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $content->add_class( $class_name ); } } else { - $combined_class_names = array_merge( $class_names, $outer_class_names ); $content->next_tag(); - foreach ( $combined_class_names as $combined_class_name ) { - $content->add_class( $combined_class_name ); + foreach ( $class_names as $class_name ) { + $content->add_class( $class_name ); } } From b23a6659bb2343cf982d0e2a05ae2ca0733dbbcf Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 2 Nov 2022 14:37:08 +1100 Subject: [PATCH 06/21] Add hug option and change names to accommodate vertical orientation --- lib/block-supports/layout.php | 33 +++++++++++++++-------- packages/block-editor/src/hooks/layout.js | 27 ++++++++++++------- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 40c618fa7681a..2abc5ff96af27 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -318,8 +318,8 @@ function gutenberg_get_classnames_from_last_tag( $html ) { function gutenberg_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); - $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ) && isset( $block['attrs']['style']['layout']['flexWidth'] ); - $blocknaem = $block['blockName']; + $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ); + if ( ! $support_layout && ! $has_child_layout ) { return $block_content; @@ -327,20 +327,31 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $outer_class_names = array(); - if ( $has_child_layout && 'fixed' === $block['attrs']['style']['layout']['selfStretch'] ) { + if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) { $container_content_class = wp_unique_id( 'wp-container-content-' ); - $child_layout_styles = array( - 'selector' => ".$container_content_class", - 'declarations' => array( - 'flex-shrink' => '0', - 'flex-basis' => $block['attrs']['style']['layout']['flexWidth'], - ), - ); + $child_layout_styles = array(); + + if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) { + $child_layout_styles[] = array( + 'selector' => ".$container_content_class", + 'declarations' => array( + 'flex-shrink' => '0', + 'flex-basis' => $block['attrs']['style']['layout']['flexSize'], + ), + ); + } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) { + $child_layout_styles[] = array( + 'selector' => ".$container_content_class", + 'declarations' => array( + 'flex-grow' => '1', + ), + ); + } gutenberg_style_engine_get_stylesheet_from_css_rules( - array( $child_layout_styles ), + $child_layout_styles, array( 'context' => 'block-supports', 'prettify' => false, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index f72d5847375b3..349b716f25889 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -270,14 +270,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { function ChildLayoutPanel( { setAttributes, attributes } ) { const { style: { layout = {} } = {} } = attributes; - const { selfStretch, flexWidth } = layout; + const { selfStretch, flexSize } = layout; return ( { setAttributes( { style: { @@ -290,6 +290,11 @@ function ChildLayoutPanel( { setAttributes, attributes } ) { } } isBlock={ true } > + ) } @@ -488,8 +493,8 @@ export const withChildLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { attributes } = props; const { style: { layout = {} } = {} } = attributes; - const { selfStretch, flexWidth } = layout; - const hasChildLayout = selfStretch || flexWidth; + const { selfStretch, flexSize } = layout; + const hasChildLayout = selfStretch || flexSize; const disableLayoutStyles = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return !! getSettings().disableLayoutStyles; @@ -503,10 +508,14 @@ export const withChildLayoutStyles = createHigherOrderComponent( let css = ''; - if ( selfStretch === 'fixed' && flexWidth ) { + if ( selfStretch === 'fixed' && flexSize ) { css += `${ selector } { flex-shrink: 0; - flex-basis: ${ flexWidth }; + flex-basis: ${ flexSize }; + }`; + } else if ( selfStretch === 'fill' ) { + css += `${ selector } { + flex-grow: 1; }`; } From 9dd7e55683380adbed091b3786b88915d83e1583 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 2 Nov 2022 15:54:00 +1100 Subject: [PATCH 07/21] Don't trash existing styles --- packages/block-editor/src/hooks/layout.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 349b716f25889..05712ca95a874 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -269,7 +269,8 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { } function ChildLayoutPanel( { setAttributes, attributes } ) { - const { style: { layout = {} } = {} } = attributes; + const { style = {} } = attributes; + const { layout = {} } = style; const { selfStretch, flexSize } = layout; return ( @@ -311,6 +312,7 @@ function ChildLayoutPanel( { setAttributes, attributes } ) { onChange={ ( value ) => { setAttributes( { style: { + ...style, layout: { ...layout, flexSize: value, From c4d96c9ba8fd8470dc9146fd5dd46442a87fa983 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 3 Nov 2022 17:18:20 +1100 Subject: [PATCH 08/21] Merge layout panels --- packages/block-editor/src/hooks/layout.js | 246 +++++++++++----------- 1 file changed, 128 insertions(+), 118 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 05712ca95a874..385c8df27e16b 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -131,8 +131,17 @@ export function useLayoutStyles( block = {}, selector ) { return css; } -function LayoutPanel( { setAttributes, attributes, name: blockName } ) { - const { layout } = attributes; +function LayoutPanel( { + setAttributes, + attributes, + name: blockName, + __unstableParentLayout: parentLayout, +} ) { + const { layout, style = {} } = attributes; + const { layout: childLayout = {} } = style; + const { selfStretch, flexSize } = childLayout; + const { type: parentLayoutType = 'default' } = parentLayout; + const defaultThemeLayout = useSetting( 'layout' ); const themeSupportsLayout = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -151,7 +160,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { default: defaultBlockLayout, } = layoutBlockSupport; - if ( ! allowEditing ) { + if ( ! allowEditing && parentLayoutType !== 'flex' ) { return null; } @@ -199,65 +208,127 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { <> - { showInheritToggle && ( + { allowEditing && ( + <> + { showInheritToggle && ( + <> + + setAttributes( { + layout: { + type: + layoutType?.name === + 'constrained' || + hasContentSizeOrLegacySettings + ? 'default' + : 'constrained', + }, + } ) + } + help={ + layoutType?.name === + 'constrained' || + hasContentSizeOrLegacySettings + ? __( + 'Nested blocks use content width with options for full and wide widths.' + ) + : __( + 'Nested blocks will fill the width of this container. Toggle to constrain.' + ) + } + /> + + ) } + + { ! inherit && allowSwitching && ( + + ) } + + { layoutType && layoutType.name !== 'default' && ( + + ) } + { constrainedType && + displayControlsForLegacyLayouts && ( + + ) } + + ) } + { parentLayoutType === 'flex' && ( <> - + { setAttributes( { - layout: { - type: - layoutType?.name === - 'constrained' || - hasContentSizeOrLegacySettings - ? 'default' - : 'constrained', + style: { + layout: { + ...childLayout, + selfStretch: value, + }, }, - } ) - } - help={ - layoutType?.name === 'constrained' || - hasContentSizeOrLegacySettings - ? __( - 'Nested blocks use content width with options for full and wide widths.' - ) - : __( - 'Nested blocks will fill the width of this container. Toggle to constrain.' - ) - } - /> + } ); + } } + isBlock={ true } + > + + + + + { selfStretch === 'fixed' && ( + { + setAttributes( { + style: { + ...style, + layout: { + ...childLayout, + flexSize: value, + }, + }, + } ); + } } + value={ flexSize } + /> + ) } ) } - - { ! inherit && allowSwitching && ( - - ) } - - { layoutType && layoutType.name !== 'default' && ( - - ) } - { constrainedType && displayControlsForLegacyLayouts && ( - - ) } - { ! inherit && layoutType && ( + { allowEditing && ! inherit && layoutType && ( - - { - setAttributes( { - style: { - layout: { - ...layout, - selfStretch: value, - }, - }, - } ); - } } - isBlock={ true } - > - - - - - { selfStretch === 'fixed' && ( - { - setAttributes( { - style: { - ...style, - layout: { - ...layout, - flexSize: value, - }, - }, - } ); - } } - value={ flexSize } - /> - ) } - - - ); -} - function LayoutTypeSwitcher( { type, onChange } ) { return ( @@ -387,10 +398,9 @@ export const withInspectorControls = createHigherOrderComponent( const { type = 'default' } = parentLayout; return [ - type === 'flex' && ( - + ( type === 'flex' || supportLayout ) && ( + ), - supportLayout && , , ]; }, From c2d0cb4728f1529426878cc6030419d77bf75976 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 17 Nov 2022 15:52:08 +1100 Subject: [PATCH 09/21] Move controls to dimensions panel --- lib/block-supports/layout.php | 1 + .../block-editor/src/hooks/child-layout.js | 157 +++++++++++++++ packages/block-editor/src/hooks/dimensions.js | 37 +++- packages/block-editor/src/hooks/layout.js | 190 ++++++------------ .../block-library/src/group/variations.js | 16 +- 5 files changed, 262 insertions(+), 139 deletions(-) create mode 100644 packages/block-editor/src/hooks/child-layout.js diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 2abc5ff96af27..499d940594fb6 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -339,6 +339,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { 'declarations' => array( 'flex-shrink' => '0', 'flex-basis' => $block['attrs']['style']['layout']['flexSize'], + 'box-sizing' => 'border-box', ), ); } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) { diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js new file mode 100644 index 0000000000000..a2a32aa93927a --- /dev/null +++ b/packages/block-editor/src/hooks/child-layout.js @@ -0,0 +1,157 @@ +/** + * WordPress dependencies + */ +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import useSetting from '../components/use-setting'; + +/** + * Inspector control panel containing the child layout related configuration + * + * @param {Object} props Block props. + * @param {Object} props.attributes Block attributes. + * @param {Object} props.setAttributes Function to set block attributes. + * @param {Object} props.__unstableParentLayout + * + * @return {WPElement} child layout edit element. + */ +export function ChildLayoutEdit( { + attributes, + setAttributes, + __unstableParentLayout: parentLayout, +} ) { + const { style = {} } = attributes; + const { layout: childLayout = {} } = style; + const { selfStretch, flexSize } = childLayout; + + return ( + <> + { + setAttributes( { + style: { + ...style, + layout: { + ...childLayout, + selfStretch: value, + }, + }, + } ); + } } + isBlock={ true } + > + + + + + { selfStretch === 'fixed' && ( + { + setAttributes( { + style: { + ...style, + layout: { + ...childLayout, + flexSize: value, + }, + }, + } ); + } } + value={ flexSize } + /> + ) } + + ); +} + +/** + * Determines if there is child layout support. + * + * @param {Object} props Block Props object. + * @param {Object} props.__unstableParentLayout Parent layout. + * + * @return {boolean} Whether there is support. + */ +export function hasChildLayoutSupport( { + __unstableParentLayout: parentLayout, +} ) { + const { + type: parentLayoutType = 'default', + allowSizingOnChildren = false, + } = parentLayout; + const support = parentLayoutType === 'flex' && allowSizingOnChildren; + + return support; +} + +/** + * Checks if there is a current value in the child layout attributes. + * + * @param {Object} props Block props. + * @return {boolean} Whether or not the block has a child layout value set. + */ +export function hasChildLayoutValue( props ) { + return props.attributes.style?.layout !== undefined; +} + +/** + * Resets the child layout attribute. This can be used when disabling + * child layout controls for a block via a progressive discovery panel. + * + * @param {Object} props Block props. + * @param {Object} props.attributes Block attributes. + * @param {Object} props.setAttributes Function to set block attributes. + */ +export function resetChildLayout( { attributes = {}, setAttributes } ) { + const { style } = attributes; + + setAttributes( { + style: { + ...style, + layout: undefined, + }, + } ); +} + +/** + * Custom hook that checks if child layout settings have been disabled. + * + * @param {Object} props Block props. + * + * @return {boolean} Whether the child layout setting is disabled. + */ +export function useIsChildLayoutDisabled( props ) { + const isDisabled = ! useSetting( 'layout' ); + + return ! hasChildLayoutSupport( props ) || isDisabled; +} + +export function childLayoutOrientation( parentLayout ) { + const { orientation = 'horizontal' } = parentLayout; + + return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' ); +} diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 44a9fd83278a9..455eeb524f843 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -46,6 +46,14 @@ import { resetPadding, useIsPaddingDisabled, } from './padding'; +import { + ChildLayoutEdit, + hasChildLayoutSupport, + hasChildLayoutValue, + resetChildLayout, + useIsChildLayoutDisabled, + childLayoutOrientation, +} from './child-layout'; import useSetting from '../components/use-setting'; import { store as blockEditorStore } from '../store'; @@ -85,8 +93,9 @@ export function DimensionsPanel( props ) { const isPaddingDisabled = useIsPaddingDisabled( props ); const isMarginDisabled = useIsMarginDisabled( props ); const isMinHeightDisabled = useIsMinHeightDisabled( props ); + const isChildLayoutDisabled = useIsChildLayoutDisabled( props ); const isDisabled = useIsDimensionsDisabled( props ); - const isSupported = hasDimensionsSupport( props.name ); + const isSupported = hasDimensionsSupport( props ); const spacingSizes = useSetting( 'spacing.spacingSizes' ); const paddingMouseOver = useVisualizerMouseOver(); const marginMouseOver = useVisualizerMouseOver(); @@ -121,6 +130,8 @@ export function DimensionsPanel( props ) { 'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0, } ); + const { __unstableParentLayout: parentLayout } = props; + return ( <> @@ -198,6 +209,21 @@ export function DimensionsPanel( props ) { ) } + { ! isChildLayoutDisabled && ( + hasChildLayoutValue( props ) } + label={ childLayoutOrientation( parentLayout ) } + onDeselect={ () => resetChildLayout( props ) } + resetAllFilter={ createResetAllFilter( + 'selfStretch', + 'layout' + ) } + isShownByDefault={ false } + panelId={ props.clientId } + > + + + ) } { ! isPaddingDisabled && ( { @@ -160,7 +149,7 @@ function LayoutPanel( { default: defaultBlockLayout, } = layoutBlockSupport; - if ( ! allowEditing && parentLayoutType !== 'flex' ) { + if ( ! allowEditing ) { return null; } @@ -208,124 +197,62 @@ function LayoutPanel( { <> - { allowEditing && ( - <> - { showInheritToggle && ( - <> - - setAttributes( { - layout: { - type: - layoutType?.name === - 'constrained' || - hasContentSizeOrLegacySettings - ? 'default' - : 'constrained', - }, - } ) - } - help={ - layoutType?.name === - 'constrained' || - hasContentSizeOrLegacySettings - ? __( - 'Nested blocks use content width with options for full and wide widths.' - ) - : __( - 'Nested blocks will fill the width of this container. Toggle to constrain.' - ) - } - /> - - ) } - - { ! inherit && allowSwitching && ( - - ) } - - { layoutType && layoutType.name !== 'default' && ( - - ) } - { constrainedType && - displayControlsForLegacyLayouts && ( - - ) } - - ) } - { parentLayoutType === 'flex' && ( + { showInheritToggle && ( <> - { + setAttributes( { - style: { - layout: { - ...childLayout, - selfStretch: value, - }, + layout: { + type: + layoutType?.name === + 'constrained' || + hasContentSizeOrLegacySettings + ? 'default' + : 'constrained', }, - } ); - } } - isBlock={ true } - > - - - - - { selfStretch === 'fixed' && ( - { - setAttributes( { - style: { - ...style, - layout: { - ...childLayout, - flexSize: value, - }, - }, - } ); - } } - value={ flexSize } - /> - ) } + } ) + } + help={ + layoutType?.name === 'constrained' || + hasContentSizeOrLegacySettings + ? __( + 'Nested blocks use content width with options for full and wide widths.' + ) + : __( + 'Nested blocks will fill the width of this container. Toggle to constrain.' + ) + } + /> ) } + + { ! inherit && allowSwitching && ( + + ) } + + { layoutType && layoutType.name !== 'default' && ( + + ) } + { constrainedType && displayControlsForLegacyLayouts && ( + + ) } { allowEditing && ! inherit && layoutType && ( @@ -389,18 +316,14 @@ export function addAttribute( settings ) { */ export const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { name: blockName, __unstableParentLayout: parentLayout } = props; + const { name: blockName } = props; const supportLayout = hasBlockSupport( blockName, layoutBlockSupportKey ); - const { type = 'default' } = parentLayout; - return [ - ( type === 'flex' || supportLayout ) && ( - - ), + supportLayout && , , ]; }, @@ -524,6 +447,7 @@ export const withChildLayoutStyles = createHigherOrderComponent( css += `${ selector } { flex-shrink: 0; flex-basis: ${ flexSize }; + box-sizing: border-box; }`; } else if ( selfStretch === 'fill' ) { css += `${ selector } { diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index 2b64d794dd4cc..59615e100c1ed 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -23,7 +23,13 @@ const variations = [ name: 'group-row', title: _x( 'Row', 'single horizontal line' ), description: __( 'Arrange blocks horizontally.' ), - attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } }, + attributes: { + layout: { + type: 'flex', + flexWrap: 'nowrap', + allowSizingOnChildren: true, + }, + }, scope: [ 'block', 'inserter', 'transform' ], isActive: ( blockAttributes ) => blockAttributes.layout?.type === 'flex' && @@ -35,7 +41,13 @@ const variations = [ name: 'group-stack', title: __( 'Stack' ), description: __( 'Arrange blocks vertically.' ), - attributes: { layout: { type: 'flex', orientation: 'vertical' } }, + attributes: { + layout: { + type: 'flex', + orientation: 'vertical', + allowSizingOnChildren: true, + }, + }, scope: [ 'block', 'inserter', 'transform' ], isActive: ( blockAttributes ) => blockAttributes.layout?.type === 'flex' && From 02705ca64f06c5bdd4b04dfc7ab41db6bfeac489 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 21 Nov 2022 11:46:57 +1100 Subject: [PATCH 10/21] Use VStack for margins. --- packages/block-editor/src/hooks/child-layout.js | 3 +-- packages/block-editor/src/hooks/dimensions.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index a2a32aa93927a..65aab18ba5fbb 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -35,7 +35,6 @@ export function ChildLayoutEdit( { return ( <> { @@ -69,7 +68,7 @@ export function ChildLayoutEdit( { { selfStretch === 'fixed' && ( { setAttributes( { style: { diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 455eeb524f843..d98974976196b 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -6,7 +6,10 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalVStack as VStack, +} from '@wordpress/components'; import { Platform, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlockSupport } from '@wordpress/blocks'; @@ -210,7 +213,9 @@ export function DimensionsPanel( props ) { ) } { ! isChildLayoutDisabled && ( - hasChildLayoutValue( props ) } label={ childLayoutOrientation( parentLayout ) } onDeselect={ () => resetChildLayout( props ) } @@ -222,7 +227,7 @@ export function DimensionsPanel( props ) { panelId={ props.clientId } > - + ) } { ! isPaddingDisabled && ( From 99b98e41d0f8011ac9ffc43ddf48ee0a8f3cdae8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 21 Nov 2022 12:17:08 +1100 Subject: [PATCH 11/21] Change "hug" label and add help text. --- .../block-editor/src/hooks/child-layout.js | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index 65aab18ba5fbb..1327ce5158f1b 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -13,6 +13,17 @@ import { __ } from '@wordpress/i18n'; */ import useSetting from '../components/use-setting'; +function helpText( selfStretch ) { + switch ( selfStretch ) { + case 'fill': + return __( 'Stretch to fill available space.' ); + case 'fixed': + return __( 'Specify a fixed width.' ); + default: + return __( 'Fit contents.' ); + } +} + /** * Inspector control panel containing the child layout related configuration * @@ -36,7 +47,8 @@ export function ChildLayoutEdit( { <> { setAttributes( { style: { @@ -51,9 +63,9 @@ export function ChildLayoutEdit( { isBlock={ true } > Date: Tue, 22 Nov 2022 11:22:41 +1100 Subject: [PATCH 12/21] Wipe fixed width when other setting is chosen. --- packages/block-editor/src/hooks/child-layout.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index 1327ce5158f1b..f272e63aadb11 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -50,12 +50,14 @@ export function ChildLayoutEdit( { value={ selfStretch || 'fit' } help={ helpText( selfStretch ) } onChange={ ( value ) => { + const newFlexSize = value !== 'fixed' ? null : flexSize; setAttributes( { style: { ...style, layout: { ...childLayout, selfStretch: value, + flexSize: newFlexSize, }, }, } ); From 75d55bd4137d0ff6f58343dc3fb81f31f1e90b75 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 11:26:14 +1100 Subject: [PATCH 13/21] Update doc comment. --- packages/block-editor/src/hooks/child-layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index f272e63aadb11..6ae08b221f2ff 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -25,7 +25,7 @@ function helpText( selfStretch ) { } /** - * Inspector control panel containing the child layout related configuration + * Inspector controls containing the child layout related configuration. * * @param {Object} props Block props. * @param {Object} props.attributes Block attributes. From 22ed793e2edcbac128746f10d4b703a6102c195a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 11:33:17 +1100 Subject: [PATCH 14/21] Try parent layout logic in native BlockEdit --- .../block-editor/src/components/block-list/block.native.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index bf62fe9c24e13..991f08ec58a17 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -33,6 +33,7 @@ import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from '../block-mobile-toolbar'; import { store as blockEditorStore } from '../../store'; import BlockDraggable from '../block-draggable'; +import { useLayout } from './layout'; const emptyArray = []; function BlockForType( { @@ -78,6 +79,8 @@ function BlockForType( { ), ] ); + const parentLayout = useLayout(); + return ( From 760e9267215df4960010ca3895e1aa3ee94ed9d9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 12:19:52 +1100 Subject: [PATCH 15/21] Add sizing controls to transformed Rows and Stacks --- .../src/components/convert-to-group-buttons/toolbar.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js index 38405fe3ee6ab..843ed23d4f44f 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js @@ -15,8 +15,12 @@ import { store as blockEditorStore } from '../../store'; const layouts = { group: { type: 'constrained' }, - row: { type: 'flex', flexWrap: 'nowrap' }, - stack: { type: 'flex', orientation: 'vertical' }, + row: { type: 'flex', flexWrap: 'nowrap', allowSizingOnChildren: true }, + stack: { + type: 'flex', + orientation: 'vertical', + allowSizingOnChildren: true, + }, }; function BlockGroupToolbar() { From 92d3bb0f7df02bcb21c5cc0b0f3ae7f27938fa58 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 13:53:13 +1100 Subject: [PATCH 16/21] Failsafe if parent layout doesn't exist --- packages/block-editor/src/hooks/child-layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index 6ae08b221f2ff..23a4857c8576e 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -110,7 +110,7 @@ export function ChildLayoutEdit( { * @return {boolean} Whether there is support. */ export function hasChildLayoutSupport( { - __unstableParentLayout: parentLayout, + __unstableParentLayout: parentLayout = {}, } ) { const { type: parentLayoutType = 'default', From 95d35f1d84c2421dfa579676b5f324592245d53c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 14:14:16 +1100 Subject: [PATCH 17/21] Fixed controls not rendering for certain block types --- packages/block-editor/src/hooks/dimensions.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index d98974976196b..c5b6398890833 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -281,9 +281,14 @@ const useIsDimensionsDisabled = ( props = {} ) => { const minHeightDisabled = useIsMinHeightDisabled( props ); const paddingDisabled = useIsPaddingDisabled( props ); const marginDisabled = useIsMarginDisabled( props ); + const childLayoutDisabled = useIsChildLayoutDisabled( props ); return ( - gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled + gapDisabled && + minHeightDisabled && + paddingDisabled && + marginDisabled && + childLayoutDisabled ); }; From d11ff04a50564b0860dd0adf7a0eda4521071dac Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 22 Nov 2022 14:22:16 +1100 Subject: [PATCH 18/21] Actual 40px size --- packages/block-editor/src/hooks/child-layout.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index 23a4857c8576e..89e5c345085a8 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -46,6 +46,7 @@ export function ChildLayoutEdit( { return ( <> { selfStretch === 'fixed' && ( { setAttributes( { From 0065be17e8d5ee359b6fb06b462d60847e82fdec Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 24 Nov 2022 16:50:51 +1100 Subject: [PATCH 19/21] Make opt-in a default property of layout support --- .../convert-to-group-buttons/toolbar.js | 8 ++------ .../src/components/inner-blocks/index.js | 16 +++++++++++++--- packages/block-editor/src/hooks/layout.js | 3 +-- packages/block-library/src/group/block.json | 4 +++- packages/block-library/src/group/variations.js | 16 ++-------------- 5 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js index 843ed23d4f44f..38405fe3ee6ab 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js @@ -15,12 +15,8 @@ import { store as blockEditorStore } from '../../store'; const layouts = { group: { type: 'constrained' }, - row: { type: 'flex', flexWrap: 'nowrap', allowSizingOnChildren: true }, - stack: { - type: 'flex', - orientation: 'vertical', - allowSizingOnChildren: true, - }, + row: { type: 'flex', flexWrap: 'nowrap' }, + stack: { type: 'flex', orientation: 'vertical' }, }; function BlockGroupToolbar() { diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index c03a8616fed65..b497fb10ef092 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -10,6 +10,7 @@ import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; import { forwardRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { + getBlockSupport, getBlockType, store as blocksStore, __unstableGetInnerBlocksProps as getInnerBlocksProps, @@ -74,7 +75,7 @@ function UncontrolledInnerBlocks( props ) { templateInsertUpdatesSelection ); - const context = useSelect( + const { context, name } = useSelect( ( select ) => { const block = select( blockEditorStore ).getBlock( clientId ); @@ -90,11 +91,17 @@ function UncontrolledInnerBlocks( props ) { return; } - return getBlockContext( block.attributes, blockType ); + return { + context: getBlockContext( block.attributes, blockType ), + name: block.name, + }; }, [ clientId ] ); + const { allowSizingOnChildren = false } = + getBlockSupport( name, '__experimentalLayout' ) || {}; + // This component needs to always be synchronous as it's the one changing // the async mode depending on the block selection. return ( @@ -103,7 +110,10 @@ function UncontrolledInnerBlocks( props ) { rootClientId={ clientId } renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } - __experimentalLayout={ __experimentalLayout } + __experimentalLayout={ { + ...__experimentalLayout, + allowSizingOnChildren, + } } wrapperRef={ wrapperRef } placeholder={ placeholder } /> diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 4f5341f8d3ac8..8ee7a6615c367 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -130,7 +130,6 @@ export function useLayoutStyles( block = {}, selector ) { function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; - const defaultThemeLayout = useSetting( 'layout' ); const themeSupportsLayout = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -255,7 +254,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ) } - { allowEditing && ! inherit && layoutType && ( + { ! inherit && layoutType && ( blockAttributes.layout?.type === 'flex' && @@ -41,13 +35,7 @@ const variations = [ name: 'group-stack', title: __( 'Stack' ), description: __( 'Arrange blocks vertically.' ), - attributes: { - layout: { - type: 'flex', - orientation: 'vertical', - allowSizingOnChildren: true, - }, - }, + attributes: { layout: { type: 'flex', orientation: 'vertical' } }, scope: [ 'block', 'inserter', 'transform' ], isActive: ( blockAttributes ) => blockAttributes.layout?.type === 'flex' && From 1173722488b114229d272be5742223998ac2f84b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 25 Nov 2022 11:15:02 +1100 Subject: [PATCH 20/21] Fix error when block doesn't exist --- packages/block-editor/src/components/inner-blocks/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index b497fb10ef092..80362754a394f 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -82,13 +82,13 @@ function UncontrolledInnerBlocks( props ) { // This check is here to avoid the Redux zombie bug where a child subscription // is called before a parent, causing potential JS errors when the child has been removed. if ( ! block ) { - return; + return {}; } const blockType = getBlockType( block.name ); if ( ! blockType || ! blockType.providesContext ) { - return; + return {}; } return { From fabea5825423bce387c5efcc86149d63c0aff40f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 25 Nov 2022 03:40:06 +0000 Subject: [PATCH 21/21] Update lib/block-supports/layout.php string content ftw Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> --- lib/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 499d940594fb6..8bda090263037 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -368,7 +368,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $content = new WP_HTML_Tag_Processor( $block_content ); $content->next_tag(); $content->add_class( implode( ' ', $outer_class_names ) ); - return $content; + return (string) $content; } $block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) );