From 3ae5d4dce49ced5b126a560d1a5f967cd4c4a473 Mon Sep 17 00:00:00 2001 From: SergeyBiryukov Date: Thu, 23 Jun 2022 23:09:09 +0000 Subject: [PATCH] Editor: Add utility classnames back to blocks that have layout attributes specified. [https://github.com/WordPress/gutenberg/issues/38719 In 5.9 these utility classnames were removed], which removed the ability for theme/plugin authors to assign their own custom CSS related to specific layout selections. This was mostly related to the Button block. This commit adds these classes dynamically based on attributes, rather than saving them to the serialized content. Original PR from Gutenberg repository: * [https://github.com/WordPress/gutenberg/pull/41487 #41487 Add utility classnames back to blocks that have layout attributes specified] Props glendaviesnz, peterwilsoncc, andrewserong, zieladam, matveb, samikeijonen. See #56058. Built from https://develop.svn.wordpress.org/trunk@53568 --- wp-includes/block-supports/layout.php | 27 +++++++++++++++++++++++---- wp-includes/version.php | 2 +- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/wp-includes/block-supports/layout.php b/wp-includes/block-supports/layout.php index bd8666f044..4ad4665fd4 100644 --- a/wp-includes/block-supports/layout.php +++ b/wp-includes/block-supports/layout.php @@ -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-' ); + $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. @@ -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 ); diff --git a/wp-includes/version.php b/wp-includes/version.php index 06489ea786..ca6c3efaf2 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.1-alpha-53567'; +$wp_version = '6.1-alpha-53568'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.