Skip to content

Commit

Permalink
Add layout classes to legacy Group inner container (#56130)
Browse files Browse the repository at this point in the history 
* Add layout classes to legacy Group inner container

* Fix lint issues

* fix lint warning

* Add some tests for inner container function

* Add fallback for `class_list`

* Fix selectors for legacy group placeholder.

* Add explanatory comments.
  • Loading branch information
@tellthemachines
tellthemachines authored Nov 16, 2023
1 parent 093d52c commit d39d2dd
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 16 deletions.
52 changes: 49 additions & 3 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -865,17 +865,63 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
return $block_content;
}

$replace_regex = sprintf(
/**
* This filter runs after the layout classnames have been added to the block, so they
* have to be removed from the outer wrapper and then added to the inner.
*/
$layout_classes = array();
$processor = new WP_HTML_Tag_Processor( $block_content );

if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
if ( method_exists( $processor, 'class_list' ) ) {
foreach ( $processor->class_list() as $class_name ) {
if ( str_contains( $class_name, 'layout' ) ) {
array_push( $layout_classes, $class_name );
$processor->remove_class( $class_name );
}
}
} else {
/**
* The class_list method was only added in 6.4 so this needs a temporary fallback.
* This fallback should be removed when the minimum supported version is 6.4.
*/
$classes = $processor->get_attribute( 'class' );
if ( $classes ) {
$classes = explode( ' ', $classes );
foreach ( $classes as $class_name ) {
if ( str_contains( $class_name, 'layout' ) ) {
array_push( $layout_classes, $class_name );
$processor->remove_class( $class_name );
}
}
}
}
}

$content_without_layout_classes = $processor->get_updated_html();
$replace_regex = sprintf(
'/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
preg_quote( $tag_name, '/' )
);
$updated_content = preg_replace_callback(
$updated_content = preg_replace_callback(
$replace_regex,
static function ( $matches ) {
return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
},
$block_content
$content_without_layout_classes
);

// Add layout classes to inner wrapper.
if ( ! empty( $layout_classes ) ) {
$processor = new WP_HTML_Tag_Processor( $updated_content );
if ( $processor->next_tag( array( 'class_name' => 'wp-block-group__inner-container' ) ) ) {
foreach ( $layout_classes as $class_name ) {
$processor->add_class( $class_name );
}
}
$updated_content = $processor->get_updated_html();
}

return $updated_content;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/button-block-appender/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
// Legacy groups have an inner container so need to be targeted separately
.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
pointer-events: none;

&::after {
Expand Down
14 changes: 3 additions & 11 deletions packages/block-library/src/group/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
);
}

function GroupEdit( {
attributes,
name,
setAttributes,
clientId,
__unstableLayoutClassNames: layoutClassNames,
} ) {
function GroupEdit( { attributes, name, setAttributes, clientId } ) {
const { hasInnerBlocks, themeSupportsLayout } = useSelect(
( select ) => {
const { getBlock, getSettings } = select( blockEditorStore );
Expand All @@ -103,9 +97,8 @@ function GroupEdit( {
themeSupportsLayout || type === 'flex' || type === 'grid';

// Hooks.
const blockProps = useBlockProps( {
className: ! layoutSupportEnabled ? layoutClassNames : null,
} );
const blockProps = useBlockProps();

const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
attributes,
usedLayoutType: type,
Expand Down Expand Up @@ -134,7 +127,6 @@ function GroupEdit( {
templateLock,
allowedBlocks,
renderAppender,
__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
}
);

Expand Down
88 changes: 88 additions & 0 deletions phpunit/block-supports/layout-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,4 +464,92 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
),
);
}

/**
* Check that gutenberg_restore_group_inner_container() restores the legacy inner container on the Group block.
*
* @dataProvider data_restore_group_inner_container
*
* @covers ::gutenberg_restore_group_inner_container
*
* @param array $args Dataset to test.
* @param string $expected_output The expected output.
*/
public function test_restore_group_inner_container( $args, $expected_output ) {
$actual_output = gutenberg_restore_group_inner_container( $args['block_content'], $args['block'] );
$this->assertEquals( $expected_output, $actual_output );
}

/**
* Data provider for test_restore_group_inner_container.
*
* @return array
*/
public function data_restore_group_inner_container() {
return array(
'group block with existing inner container' => array(
'args' => array(
'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
'block' => array(
'blockName' => 'core/group',
'attrs' => array(
'layout' => array(
'type' => 'default',
),
),
'innerBlocks' => array(),
'innerHTML' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
'innerContent' => array(
'<div class="wp-block-group"><div class="wp-block-group__inner-container">',
' ',
' </div></div>',
),
),
),
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
),
'group block with no existing inner container' => array(
'args' => array(
'block_content' => '<div class="wp-block-group"></div>',
'block' => array(
'blockName' => 'core/group',
'attrs' => array(
'layout' => array(
'type' => 'default',
),
),
'innerBlocks' => array(),
'innerHTML' => '<div class="wp-block-group"></div>',
'innerContent' => array(
'<div class="wp-block-group">',
' ',
' </div>',
),
),
),
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
),
'group block with layout classnames' => array(
'args' => array(
'block_content' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
'block' => array(
'blockName' => 'core/group',
'attrs' => array(
'layout' => array(
'type' => 'default',
),
),
'innerBlocks' => array(),
'innerHTML' => '<div class="wp-block-group"></div>',
'innerContent' => array(
'<div class="wp-block-group">',
' ',
' </div>',
),
),
),
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"></div></div>',
),
);
}
}

0 comments on commit d39d2dd

Please sign in to comment.