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 utility classnames back to blocks that have layout attributes specified #2840

Closed
wants to merge 3 commits into from
Closed

Add utility classnames back to blocks that have layout attributes specified #2840

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e97eb6
Add utility classnames back to blocks that have layout attributes spe…
Jun 21, 2022
df52f25
Fixes from PR review
Jun 22, 2022
0543a2e
Move addition of util classes into existing method to avoid adding a …
Jun 23, 2022
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: 23 additions & 4 deletions src/wp-includes/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,27 @@ function wp_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}

$class_name = wp_unique_id( 'wp-container-' );
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
$class_names = array();
$container_class = wp_unique_id( 'wp-container-' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Can this be in the function so it is wp_get_block_class_names or somethign?

Copy link
Author

Choose a reason for hiding this comment

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

I think it is better to keep it separate for now as this unique container id is different to the utility class names being generated by the new temporary method, and may or may not remain after that method is superseded by the style engine functionality.

Copy link
Contributor

Choose a reason for hiding this comment

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

Do you mean wp_get_layout_classes() is intended to be temporary?

I'd rather avoid adding it if it's know that it will be deprecated. It avoids the tax of having to maintain backward compatibility.

Copy link
Contributor

Choose a reason for hiding this comment

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

From my perspective, I think we'd probably still wind up having the wp_get_layout_classes function, but that the internals of it might be moved elsewhere to use a common abstraction. (So the implementation of the function might be temporary, but the existence of the function probably isn't). What do you think @glendaviesnz?

Copy link
Author

Choose a reason for hiding this comment

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

Good point @peterwilsoncc, I was overlooking the backwards compat issues of global public wp_ methods. I will take another look at this from that perspective.

Copy link
Author

@glendaviesnz glendaviesnz Jun 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@peterwilsoncc - given the uncertain future of that method I have pulled the code back into the main method, and opened up a PR to do the same in Gutenberg

$class_names[] = $container_class;

// The following section was added to reintroduce a small set of layout classnames that were
// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
// not intended to provide an extended set of classes to match all block layout attributes
// here.
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
}

if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
$class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] );
}

if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) {
$class_names[] = 'is-nowrap';
}

$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
Expand All @@ -188,12 +207,12 @@ function wp_render_layout_support_flag( $block_content, $block ) {
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
$style = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . esc_attr( $class_name ) . ' ',
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
$block_content,
1
);
Expand Down