Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add layout classes to legacy Group inner container #56130

Merged
merged 7 commits into from
Nov 16, 2023
Merged

Add layout classes to legacy Group inner container #56130

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8edd0bb
Add layout classes to legacy Group inner container
tellthemachines Nov 15, 2023
12d8b75
Fix lint issues
tellthemachines Nov 15, 2023
497322b
fix lint warning
tellthemachines Nov 15, 2023
d110316
Add some tests for inner container function
tellthemachines Nov 15, 2023
81b379c
Add fallback for `class_list`
tellthemachines Nov 16, 2023
c12e176
Fix selectors for legacy group placeholder.
tellthemachines Nov 16, 2023
8fcb202
Add explanatory comments.
tellthemachines Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -865,6 +865,20 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
return $block_content;
}

$layout_classes = array();
$processor = new WP_HTML_Tag_Processor( $block_content );

if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
foreach ( $processor->class_list() as $class_name ) {
if (str_contains( $class_name, 'layout' ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably unlikely that folks might use custom classnames that contain layout, but to be a bit more specific about it, would it be worth using str_starts_with( 'is-layout-' )?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait, I forgot about the compound classnames like wp-block-group-is-layout-flow 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we'll have to take the risk with custom classnames 😅 because the crucial one for block gap to work is wp-container-core-group-layout-x. It was fortunate that #55416 had already made that classname layout-specific!

array_push( $layout_classes, $class_name );
$what = $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, '/' )
Expand All @@ -874,8 +888,19 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
static function ( $matches ) {
return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
},
$block_content
$content_without_layout_classes
);

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
14 changes: 3 additions & 11 deletions packages/block-library/src/group/edit.js
View file
Open in desktop
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