From 7e34fb585b9140565e03bfa09b738a8d01910874 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 23 Aug 2022 17:14:54 +1000 Subject: [PATCH 01/15] Try adding layout support to Cover block. --- lib/block-supports/layout.php | 60 +++++++++++++++++---- packages/block-library/src/cover/block.json | 7 +++ 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 15a7a131f8a9b0..63ae1303ade182 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -291,6 +291,29 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support return ''; } +/** + * Adds an identifying classname to the inner block wrapper. + * + * @param array $parsed_block A parsed block object. + * @return array The updated block object. + */ +function gutenberg_identify_inner_block_wrapper( $parsed_block ) { + + if ( ! isset( $parsed_block['innerContent'][0] ) ) { + return $parsed_block; + } + + $inner_class_position = strrpos( $parsed_block['innerContent'][0], 'class="' ); + + if ( ! $inner_class_position ) { + return $parsed_block; + } + + $parsed_block['innerContent'][0] = substr_replace( $parsed_block['innerContent'][0], 'class="is-inner-block-wrapper ', $inner_class_position, strlen( 'class="' ) ); + + return $parsed_block; +} + /** * Renders the layout config to the block wrapper. * @@ -413,15 +436,28 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } /* - * This assumes the hook only applies to blocks with a single wrapper. - * A limitation of this hook is that nested inner blocks wrappers are not yet supported. - */ - $content = preg_replace( - '/' . preg_quote( 'class="', '/' ) . '/', - 'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ', - $block_content, - 1 - ); + * Ideally we'll be able to attach this class to all inner block wrappers and + * we won't need the condition or the fallback. + */ + if ( strpos( $block_content, 'is-inner-block-wrapper' ) ) { + $content = preg_replace( + '/' . preg_quote( 'is-inner-block-wrapper', '/' ) . '/', + esc_attr( implode( ' ', $class_names ) ), + $block_content, + 1 + ); + } else { + /* + * This assumes the hook only applies to blocks with a single wrapper. + * A limitation of this hook is that nested inner blocks wrappers are not yet supported. + */ + $content = preg_replace( + '/' . preg_quote( 'class="', '/' ) . '/', + 'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ', + $block_content, + 1 + ); + } return $content; } @@ -433,6 +469,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { 'register_attribute' => 'gutenberg_register_layout_support', ) ); + +if ( function_exists( 'wp_identify_inner_block_wrapper' ) ) { + remove_filter( 'render_block', 'wp_identify_inner_block_wrapper' ); +} +add_filter( 'render_block_data', 'gutenberg_identify_inner_block_wrapper' ); + if ( function_exists( 'wp_render_layout_support_flag' ) ) { remove_filter( 'render_block', 'wp_render_layout_support_flag' ); } diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 1982ecc44853ea..d7dd4d48e57b41 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -105,6 +105,13 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "__experimentalLayout": { + "allowSwitching": true, + "allowInheriting": false, + "default": { + "type": "flow" + } } }, "editorStyle": "wp-block-cover-editor", From a29bd4a0629378111c62582f61c45753ece28753 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 30 Sep 2022 15:51:52 +1000 Subject: [PATCH 02/15] Try adding layout classnames to inner block wrapper. --- lib/block-supports/layout.php | 42 +++++++-------------- packages/block-library/src/cover/block.json | 7 ---- 2 files changed, 14 insertions(+), 35 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 63ae1303ade182..9e2776539d94f9 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -292,26 +292,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } /** - * Adds an identifying classname to the inner block wrapper. + * Indentifies inner block wrapper classnames. * - * @param array $parsed_block A parsed block object. - * @return array The updated block object. + * @param array $inner_content An array of strings. + * @return string String of inner wrapper classnames. */ -function gutenberg_identify_inner_block_wrapper( $parsed_block ) { +function gutenberg_identify_inner_block_wrapper_classnames( $inner_content ) { - if ( ! isset( $parsed_block['innerContent'][0] ) ) { - return $parsed_block; + if ( ! isset( $inner_content[0] ) ) { + return false; } - $inner_class_position = strrpos( $parsed_block['innerContent'][0], 'class="' ); + $matches = array(); - if ( ! $inner_class_position ) { - return $parsed_block; - } + preg_match_all( '/class="[a-z\-\_\s]*/', $inner_content[0], $matches ); - $parsed_block['innerContent'][0] = substr_replace( $parsed_block['innerContent'][0], 'class="is-inner-block-wrapper ', $inner_class_position, strlen( 'class="' ) ); + return end( $matches[0] ); - return $parsed_block; } /** @@ -435,22 +432,16 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } - /* - * Ideally we'll be able to attach this class to all inner block wrappers and - * we won't need the condition or the fallback. - */ - if ( strpos( $block_content, 'is-inner-block-wrapper' ) ) { + $inner_content_classnames = gutenberg_identify_inner_block_wrapper_classnames( $block['innerContent'] ); + + if ( $inner_content_classnames ) { $content = preg_replace( - '/' . preg_quote( 'is-inner-block-wrapper', '/' ) . '/', - esc_attr( implode( ' ', $class_names ) ), + '/' . $inner_content_classnames . '/', + $inner_content_classnames . ' ' . esc_attr( implode( ' ', $class_names ) ), $block_content, 1 ); } else { - /* - * This assumes the hook only applies to blocks with a single wrapper. - * A limitation of this hook is that nested inner blocks wrappers are not yet supported. - */ $content = preg_replace( '/' . preg_quote( 'class="', '/' ) . '/', 'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ', @@ -470,11 +461,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { ) ); -if ( function_exists( 'wp_identify_inner_block_wrapper' ) ) { - remove_filter( 'render_block', 'wp_identify_inner_block_wrapper' ); -} -add_filter( 'render_block_data', 'gutenberg_identify_inner_block_wrapper' ); - if ( function_exists( 'wp_render_layout_support_flag' ) ) { remove_filter( 'render_block', 'wp_render_layout_support_flag' ); } diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index d7dd4d48e57b41..1982ecc44853ea 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -105,13 +105,6 @@ "__experimentalDefaultControls": { "fontSize": true } - }, - "__experimentalLayout": { - "allowSwitching": true, - "allowInheriting": false, - "default": { - "type": "flow" - } } }, "editorStyle": "wp-block-cover-editor", From d291f8257847a6f091e8058231a0d1bdbec60226 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 6 Oct 2022 16:17:44 +1100 Subject: [PATCH 03/15] Make it work in the editor --- lib/block-supports/layout.php | 7 +++---- .../block-editor/src/components/block-edit/index.js | 3 ++- .../block-editor/src/components/block-list/block.js | 5 ++++- .../src/components/inner-blocks/index.js | 8 ++++++-- packages/block-editor/src/hooks/layout.js | 13 ++++--------- packages/block-library/src/cover/block.json | 6 ++++++ 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 9e2776539d94f9..17ebc1a77bdd12 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -305,9 +305,9 @@ function gutenberg_identify_inner_block_wrapper_classnames( $inner_content ) { $matches = array(); - preg_match_all( '/class="[a-z\-\_\s]*/', $inner_content[0], $matches ); + preg_match_all( '/class="([a-z0-9\-\_\s]*)/', $inner_content[0], $matches ); - return end( $matches[0] ); + return end( $matches[1] ); } @@ -340,7 +340,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $class_names = array(); $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); - $block_classname = wp_get_block_default_classname( $block['blockName'] ); $container_class = wp_unique_id( 'wp-container-' ); $layout_classname = ''; @@ -417,7 +416,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); $style = gutenberg_get_layout_style( - ".$block_classname.$container_class", + ".$container_class.$container_class", $used_layout, $has_block_gap_support, $gap_value, diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 9b2875b3018a30..05f9a0319fca12 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context'; export { useBlockEditContext }; export default function BlockEdit( props ) { - const { name, isSelected, clientId } = props; + const { name, isSelected, clientId, layoutClassNames } = props; const context = { name, isSelected, clientId, + layoutClassNames, }; return ( ); @@ -231,7 +233,8 @@ function BlockListBlock( { 'is-content-block': hasContentLockedParent && isContentBlock, }, dataAlign && themeSupportsLayout && `align${ dataAlign }`, - className + className, + layoutClassNames ), wrapperProps: restWrapperProps, isAligned, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 4105d7291957ed..f8a914f58a0768 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -150,7 +150,7 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md */ export function useInnerBlocksProps( props = {}, options = {} ) { - const { clientId } = useBlockEditContext(); + const { clientId, layoutClassNames = '' } = useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); const { __experimentalCaptureToolbars, hasOverlay } = useSelect( ( select ) => { @@ -200,11 +200,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) { innerBlocksProps.value && innerBlocksProps.onChange ? ControlledInnerBlocks : UncontrolledInnerBlocks; + //Dedupe layout classes + const allTheClassNames = `${ props.className } ${ layoutClassNames }`; + const classNameSet = new Set( allTheClassNames.split( ' ' ) ); + const dedupedClassNames = Array.from( classNameSet ).join( ' ' ); return { ...props, ref, className: classnames( - props.className, + dedupedClassNames, 'block-editor-block-list__layout', { 'has-overlay': hasOverlay, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 73d655c57c2acb..42009b459ba31d 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -9,11 +9,7 @@ import { kebabCase } from 'lodash'; */ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; -import { - getBlockDefaultClassName, - getBlockSupport, - hasBlockSupport, -} from '@wordpress/blocks'; +import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; import { Button, @@ -366,9 +362,8 @@ export const withLayoutStyles = createHigherOrderComponent( const layoutClasses = hasLayoutBlockSupport ? useLayoutClasses( block ) : null; - const selector = `.${ getBlockDefaultClassName( - name - ) }.wp-container-${ id }`; + // Higher specificity to override defaults from theme.json. + const selector = `.wp-container-${ id }.wp-container-${ id }`; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; @@ -413,7 +408,7 @@ export const withLayoutStyles = createHigherOrderComponent( />, element ) } - + ); } diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 1982ecc44853ea..4958b377c17633 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -105,6 +105,12 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "__experimentalLayout": { + "allowSwitching": true, + "default": { + "type": "constrained" + } } }, "editorStyle": "wp-block-cover-editor", From 13157844ac9aa4307a7a1e3abc54d0f7b0c333cd Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 12 Oct 2022 15:23:35 +1100 Subject: [PATCH 04/15] Use WP_HTML_Tag_Processor to add layout classnames --- lib/block-supports/layout.php | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 17ebc1a77bdd12..e7d1f4b65f570a 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -433,20 +433,13 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $inner_content_classnames = gutenberg_identify_inner_block_wrapper_classnames( $block['innerContent'] ); + $content = new WP_HTML_Tag_Processor( $block_content ); if ( $inner_content_classnames ) { - $content = preg_replace( - '/' . $inner_content_classnames . '/', - $inner_content_classnames . ' ' . esc_attr( implode( ' ', $class_names ) ), - $block_content, - 1 - ); + $content->next_tag( array( 'class_name' => $inner_content_classnames ) ); + $content->add_class( esc_attr( implode( ' ', $class_names ) ) ); } else { - $content = preg_replace( - '/' . preg_quote( 'class="', '/' ) . '/', - 'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ', - $block_content, - 1 - ); + $content->next_tag(); + $content->add_class( esc_attr( implode( ' ', $class_names ) ) ); } return $content; From 0d0f24faad53b7d01b2d1c89aec089fed8d19ccf Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 12 Oct 2022 15:55:50 +1100 Subject: [PATCH 05/15] Use WP_HTML_Tag_Processor to identify inner wrapper classnames --- lib/block-supports/layout.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index e7d1f4b65f570a..ee0512d6ec33da 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -303,12 +303,14 @@ function gutenberg_identify_inner_block_wrapper_classnames( $inner_content ) { return false; } - $matches = array(); + $inner_content_chunk = new WP_HTML_Tag_Processor( $inner_content[0] ); + $inner_wrapper_classnames = ''; - preg_match_all( '/class="([a-z0-9\-\_\s]*)/', $inner_content[0], $matches ); - - return end( $matches[1] ); + while ( true === $inner_content_chunk->next_tag() ) { + $inner_wrapper_classnames = $inner_content_chunk->get_attribute( 'class' ); + } + return $inner_wrapper_classnames; } /** From 132733885b4179dbb063e47d59dbdb6c097fd638 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 13 Oct 2022 17:03:11 +1100 Subject: [PATCH 06/15] Improvements to inner content classname logic --- lib/block-supports/layout.php | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index ee0512d6ec33da..d1b4d92d8c7825 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -292,25 +292,20 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } /** - * Indentifies inner block wrapper classnames. + * Gets classname from last tag in a string of HTML. * - * @param array $inner_content An array of strings. + * @param string $html markup to be processed. * @return string String of inner wrapper classnames. */ -function gutenberg_identify_inner_block_wrapper_classnames( $inner_content ) { +function gutenberg_get_classnames_from_last_tag( $html ) { + $tags = new WP_HTML_Tag_Processor( $html ); + $last_classnames = ''; - if ( ! isset( $inner_content[0] ) ) { - return false; + while ( $tags->next_tag() ) { + $last_classnames = $tags->get_attribute( 'class' ); } - $inner_content_chunk = new WP_HTML_Tag_Processor( $inner_content[0] ); - $inner_wrapper_classnames = ''; - - while ( true === $inner_content_chunk->next_tag() ) { - $inner_wrapper_classnames = $inner_content_chunk->get_attribute( 'class' ); - } - - return $inner_wrapper_classnames; + return $last_classnames; } /** @@ -433,15 +428,15 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } - $inner_content_classnames = gutenberg_identify_inner_block_wrapper_classnames( $block['innerContent'] ); + $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 ) ); - $content->add_class( esc_attr( implode( ' ', $class_names ) ) ); + $content->add_class( implode( ' ', $class_names ) ); } else { $content->next_tag(); - $content->add_class( esc_attr( implode( ' ', $class_names ) ) ); + $content->add_class( implode( ' ', $class_names ) ); } return $content; From 95a330b13cf4f271f4634e4b8ac4073513b126d6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 13 Oct 2022 17:14:05 +1100 Subject: [PATCH 07/15] Only add layout classnames to inner blocks --- packages/block-editor/src/components/block-list/block.js | 3 +-- .../block-editor/src/components/inner-blocks/index.js | 8 +++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 5b71dc6fb4da4c..65310a841122d7 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -233,8 +233,7 @@ function BlockListBlock( { 'is-content-block': hasContentLockedParent && isContentBlock, }, dataAlign && themeSupportsLayout && `align${ dataAlign }`, - className, - layoutClassNames + className ), wrapperProps: restWrapperProps, isAligned, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index f8a914f58a0768..2fecc9b548b590 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -200,15 +200,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) { innerBlocksProps.value && innerBlocksProps.onChange ? ControlledInnerBlocks : UncontrolledInnerBlocks; - //Dedupe layout classes - const allTheClassNames = `${ props.className } ${ layoutClassNames }`; - const classNameSet = new Set( allTheClassNames.split( ' ' ) ); - const dedupedClassNames = Array.from( classNameSet ).join( ' ' ); + return { ...props, ref, className: classnames( - dedupedClassNames, + props.className, + layoutClassNames, 'block-editor-block-list__layout', { 'has-overlay': hasOverlay, From 0ad72747d696da3da2a3fd9ba6be0a7119cf7408 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 13 Oct 2022 18:04:16 +1100 Subject: [PATCH 08/15] Manually add layout classnames to Gallery and Post Content edit --- packages/block-library/src/gallery/gallery.js | 2 ++ packages/block-library/src/post-content/edit.js | 12 ++++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 9a551b6e0d9f78..f025d1b52a389b 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -26,6 +26,7 @@ export const Gallery = ( props ) => { mediaPlaceholder, insertBlocksAfter, blockProps, + layoutClassNames, } = props; const { align, columns, caption, imageCrop } = attributes; @@ -42,6 +43,7 @@ export const Gallery = ( props ) => { { ...innerBlocksProps } className={ classnames( blockProps.className, + layoutClassNames, 'blocks-gallery-grid', { [ `align${ align }` ]: align, diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 1949553b2540f6..f936d59547764c 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -84,8 +84,8 @@ function Content( props ) { ); } -function Placeholder() { - const blockProps = useBlockProps(); +function Placeholder( { layoutClassNames } ) { + const blockProps = useBlockProps( { className: layoutClassNames } ); return (

@@ -118,7 +118,11 @@ function RecursionError() { ); } -export default function PostContentEdit( { context, attributes } ) { +export default function PostContentEdit( { + context, + attributes, + layoutClassNames, +} ) { const { postId: contextPostId, postType: contextPostType } = context; const { layout = {} } = attributes; const hasAlreadyRendered = useHasRecursion( contextPostId ); @@ -132,7 +136,7 @@ export default function PostContentEdit( { context, attributes } ) { { contextPostId && contextPostType ? ( ) : ( - + ) } ); From 03757a2ab1851cbfedd2568073ce1d0a31ac7d41 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 14 Oct 2022 17:47:15 +1100 Subject: [PATCH 09/15] Add comment to inner content classnames logic. --- lib/block-supports/layout.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index d1b4d92d8c7825..280328e4497dc8 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -428,6 +428,10 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } + /** + * 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 ); From 06ad2b58b604b8073a9ed6fc255f4ee2e4412efd Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Oct 2022 15:13:25 +1100 Subject: [PATCH 10/15] Mark layoutClassnames unstable --- packages/block-editor/src/components/block-edit/index.js | 4 ++-- packages/block-editor/src/components/block-list/block.js | 4 ++-- packages/block-editor/src/components/inner-blocks/index.js | 3 ++- packages/block-editor/src/hooks/layout.js | 5 ++++- packages/block-library/src/gallery/gallery.js | 2 +- packages/block-library/src/post-content/edit.js | 2 +- 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 05f9a0319fca12..747e25b820847d 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -20,12 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context'; export { useBlockEditContext }; export default function BlockEdit( props ) { - const { name, isSelected, clientId, layoutClassNames } = props; + const { name, isSelected, clientId, __unstableLayoutClassNames } = props; const context = { name, isSelected, clientId, - layoutClassNames, + __unstableLayoutClassNames, }; return ( ); diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 2fecc9b548b590..2933150f31d9de 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -150,7 +150,8 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md */ export function useInnerBlocksProps( props = {}, options = {} ) { - const { clientId, layoutClassNames = '' } = useBlockEditContext(); + const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } = + useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); const { __experimentalCaptureToolbars, hasOverlay } = useSelect( ( select ) => { diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 42009b459ba31d..eeea8f3df2c8ce 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -408,7 +408,10 @@ export const withLayoutStyles = createHigherOrderComponent( />, element ) } - + ); } diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index f025d1b52a389b..e6176cc8a7256c 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -26,7 +26,7 @@ export const Gallery = ( props ) => { mediaPlaceholder, insertBlocksAfter, blockProps, - layoutClassNames, + __unstableLayoutClassNames: layoutClassNames, } = props; const { align, columns, caption, imageCrop } = attributes; diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index f936d59547764c..e190101aa05155 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -121,7 +121,7 @@ function RecursionError() { export default function PostContentEdit( { context, attributes, - layoutClassNames, + __unstableLayoutClassNames: layoutClassNames, } ) { const { postId: contextPostId, postType: contextPostType } = context; const { layout = {} } = attributes; From 8295cbda19226d9897ac5318c3030fef2e4452bd Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Oct 2022 15:26:52 +1100 Subject: [PATCH 11/15] Add classnames to container in a loop. --- lib/block-supports/layout.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 280328e4497dc8..b61311362893a6 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -437,7 +437,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $content = new WP_HTML_Tag_Processor( $block_content ); if ( $inner_content_classnames ) { $content->next_tag( array( 'class_name' => $inner_content_classnames ) ); - $content->add_class( implode( ' ', $class_names ) ); + foreach ( $class_names as $class_name ) { + $content->add_class( $class_name ); + } } else { $content->next_tag(); $content->add_class( implode( ' ', $class_names ) ); From d34bb682722bd6fdf20c6e2be8d7252ba102ad6e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Oct 2022 15:42:12 +1100 Subject: [PATCH 12/15] Remove layout support for Cover block. --- packages/block-library/src/cover/block.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 4958b377c17633..1982ecc44853ea 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -105,12 +105,6 @@ "__experimentalDefaultControls": { "fontSize": true } - }, - "__experimentalLayout": { - "allowSwitching": true, - "default": { - "type": "constrained" - } } }, "editorStyle": "wp-block-cover-editor", From e87b92b9f731c0a95f210ca231cfe47a58fa35a2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 25 Oct 2022 09:36:03 +1100 Subject: [PATCH 13/15] Apply layout to outer wrapper if legacy Group --- .../block-editor/src/components/inner-blocks/index.js | 3 ++- packages/block-library/src/group/edit.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 2933150f31d9de..957e9fa60a3f41 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -150,6 +150,7 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md */ export function useInnerBlocksProps( props = {}, options = {} ) { + const { __experimentalLayout } = options; const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } = useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); @@ -207,10 +208,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) { ref, className: classnames( props.className, - layoutClassNames, 'block-editor-block-list__layout', { 'has-overlay': hasOverlay, + [ layoutClassNames ]: __experimentalLayout, } ), children: clientId ? ( diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 9d43c4339ba1f5..f4b69bcbf68fe1 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -35,7 +35,12 @@ const htmlElementMessages = { ), }; -function GroupEdit( { attributes, setAttributes, clientId } ) { +function GroupEdit( { + attributes, + setAttributes, + clientId, + __unstableLayoutClassNames: layoutClassNames, +} ) { const { hasInnerBlocks, themeSupportsLayout } = useSelect( ( select ) => { const { getBlock, getSettings } = select( blockEditorStore ); @@ -55,7 +60,9 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { const { type = 'default' } = usedLayout; const layoutSupportEnabled = themeSupportsLayout || type === 'flex'; - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { + className: ! layoutSupportEnabled ? layoutClassNames : null, + } ); const innerBlocksProps = useInnerBlocksProps( layoutSupportEnabled From 4074881eccc2a2ce9447946e0ffd8b445c20f743 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 25 Oct 2022 17:10:39 +1100 Subject: [PATCH 14/15] Off switch for layout classes in inner wrapper --- packages/block-editor/src/components/inner-blocks/index.js | 4 ++-- packages/block-library/src/group/edit.js | 1 + 2 files changed, 3 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 957e9fa60a3f41..057cded0852322 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -150,7 +150,7 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md */ export function useInnerBlocksProps( props = {}, options = {} ) { - const { __experimentalLayout } = options; + const { __unstableNoLayoutClassNames } = options; const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } = useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); @@ -209,9 +209,9 @@ export function useInnerBlocksProps( props = {}, options = {} ) { className: classnames( props.className, 'block-editor-block-list__layout', + __unstableNoLayoutClassNames ? '' : layoutClassNames, { 'has-overlay': hasOverlay, - [ layoutClassNames ]: __experimentalLayout, } ), children: clientId ? ( diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index f4b69bcbf68fe1..7d527819927a97 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -74,6 +74,7 @@ function GroupEdit( { ? undefined : InnerBlocks.ButtonBlockAppender, __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined, + __unstableNoLayoutClassNames: ! layoutSupportEnabled, } ); From 5381d2b5262ce10ec6070de96344a75c5028883d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 26 Oct 2022 13:51:24 +1100 Subject: [PATCH 15/15] Change unstable prop name --- packages/block-editor/src/components/inner-blocks/index.js | 4 ++-- packages/block-library/src/group/edit.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 057cded0852322..8afc6482eb33fa 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -150,7 +150,7 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md */ export function useInnerBlocksProps( props = {}, options = {} ) { - const { __unstableNoLayoutClassNames } = options; + const { __unstableDisableLayoutClassNames } = options; const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } = useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); @@ -209,7 +209,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { className: classnames( props.className, 'block-editor-block-list__layout', - __unstableNoLayoutClassNames ? '' : layoutClassNames, + __unstableDisableLayoutClassNames ? '' : layoutClassNames, { 'has-overlay': hasOverlay, } diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 7d527819927a97..efe0d0ede9ebc8 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -74,7 +74,7 @@ function GroupEdit( { ? undefined : InnerBlocks.ButtonBlockAppender, __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined, - __unstableNoLayoutClassNames: ! layoutSupportEnabled, + __unstableDisableLayoutClassNames: ! layoutSupportEnabled, } );