From 81ea70e819c1bcc3e1efc4e1fc50581d56c5090a Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 27 Oct 2022 15:38:52 +1100 Subject: [PATCH] Fix up output so that position classes are applied to the wrapper --- lib/block-supports/layout.php | 6 +++--- packages/block-editor/src/hooks/layout.js | 13 ++++++++----- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index ea0a6774730113..110f594fb2baed 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -305,7 +305,7 @@ function gutenberg_get_classnames_from_last_tag( $html ) { $last_classnames = $tags->get_attribute( 'class' ); } - return $last_classnames; + return (string) $last_classnames; } /** @@ -445,7 +445,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $content->add_class( implode( ' ', $class_names ) ); } - return $content; + return (string) $content; } // Register the block support. (overrides core one). @@ -559,7 +559,7 @@ function gutenberg_render_layout_position_support( $block_content, $block ) { $content = new WP_HTML_Tag_Processor( $block_content ); $content->next_tag(); $content->add_class( $class_name ); - return $content; + return (string) $content; } return $block_content; } diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 42d9d926ba3103..df3ce9f5301ddc 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -403,16 +403,18 @@ export const withLayoutStyles = createHigherOrderComponent( } // Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`. - const className = classnames( - props?.className, + const combinedLayoutClassNames = classnames( { [ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached. - [ `wp-container-${ positionId }` ]: - shouldRenderLayoutStyles && !! positionCss, // Use separate container class for position styles in prep for layout styles moving to inner wrapper in: https://github.com/WordPress/gutenberg/pull/44600 }, layoutClasses ); + const wrapperClassNames = classnames( props?.className, { + [ `wp-container-${ positionId }` ]: + shouldRenderLayoutStyles && !! positionCss, // Use separate container class for position styles in prep for layout styles moving to inner wrapper in: https://github.com/WordPress/gutenberg/pull/44600 + } ); + return ( <> { shouldRenderLayoutStyles && @@ -430,7 +432,8 @@ export const withLayoutStyles = createHigherOrderComponent( ) } );