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.

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

Migrating layout.php to WordPress 6.0 #2518

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
119 changes: 100 additions & 19 deletions src/wp-includes/block-supports/layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,15 @@ function wp_register_layout_support( $block_type ) {
* @since 5.9.0
* @access private
*
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked
* the existence of default block layout.
* @param bool $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked
* the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @return string CSS style.
*/
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand All @@ -57,9 +58,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );

$style = '';
if ( $content_size || $wide_size ) {
$style = "$selector > * {";
$style = "$selector > :where(:not(.alignleft):not(.alignright)) {";
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
$style .= 'margin-left: auto !important;';
$style .= 'margin-right: auto !important;';
Expand All @@ -69,12 +69,16 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$style .= "$selector .alignfull { max-width: none; }";
}

$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; }";
$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
$style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
$style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
if ( $has_block_gap_support ) {
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
$style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
$style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
}
} elseif ( 'flex' === $layout_type ) {
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
Expand All @@ -97,13 +101,18 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
if ( is_array( $gap_value ) ) {
$gap_row = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
}
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
$style .= "gap: $gap_style;";
} else {
$style .= 'gap: 0.5em;';
}

$style .= "flex-wrap: $flex_wrap;";
$style .= 'align-items: center;';
if ( 'horizontal' === $layout_orientation ) {
$style .= 'align-items: center;';
/**
Expand All @@ -118,6 +127,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$style .= 'flex-direction: column;';
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
} else {
$style .= 'align-items: flex-start;';
}
}
$style .= '}';
Expand Down Expand Up @@ -163,8 +174,18 @@ function wp_render_layout_support_flag( $block_content, $block ) {
// 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.
$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
$style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
} else {
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}

// 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' );
Copy link
Member Author

Choose a reason for hiding this comment

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

$style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
// 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(
Expand Down Expand Up @@ -208,7 +229,6 @@ function wp_restore_group_inner_container( $block_content, $block ) {
);

if (
'core/group' !== $block['blockName'] ||
WP_Theme_JSON_Resolver::theme_has_support() ||
1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] )
Expand All @@ -230,4 +250,65 @@ static function( $matches ) {
return $updated_content;
}

add_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
gziolo marked this conversation as resolved.
Show resolved Hide resolved

/**
* For themes without theme.json file, make sure
* to restore the outer div for the aligned image block
* to avoid breaking styles relying on that div.
*
* @since 6.0.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_restore_image_outer_container( $block_content, $block ) {
$image_with_align = "
/# 1) everything up to the class attribute contents
(
^\s*
<figure\b
[^>]*
\bclass=
[\"']
)
# 2) the class attribute contents
(
[^\"']*
\bwp-block-image\b
[^\"']*
\b(?:alignleft|alignright|aligncenter)\b
[^\"']*
)
# 3) everything after the class attribute contents
(
[\"']
[^>]*
>
.*
<\/figure>
)/iUx";

if (
WP_Theme_JSON_Resolver::theme_has_support() ||
0 === preg_match( $image_with_align, $block_content, $matches )
) {
return $block_content;
}

$wrapper_classnames = array( 'wp-block-image' );

// If the block has a classNames attribute these classnames need to be removed from the content and added back
// to the new wrapper div also.
if ( ! empty( $block['attrs']['className'] ) ) {
$wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
}
$content_classnames = explode( ' ', $matches[2] );
$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );

return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
}

add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
gziolo marked this conversation as resolved.
Show resolved Hide resolved
160 changes: 160 additions & 0 deletions tests/phpunit/tests/block-supports/layout.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<?php
/**
* Block supports tests for the layout.
*
* @package WordPress
* @subpackage Block Supports
* @since 6.0.0
*/

/**
* Tests for block supports related to layout.
*
* @since 6.0.0
*
* @group block-supports
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
*/
class Test_Block_Supports_Layout extends WP_UnitTestCase {
function set_up() {
parent::set_up();
$this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );
$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];

// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );

// Set up the new root.
add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );

$this->queries = array();
// Clear caches.
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
}

function tear_down() {
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;

// Clear up the filters to modify the theme root.
remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );

wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
parent::tear_down();
}

function filter_set_theme_root() {
return $this->theme_root;
}

/**
* @ticket 55505
*/
function test_outer_container_not_restored_for_non_aligned_image_block_with_non_themejson_theme() {
// The "default" theme doesn't have theme.json support.
switch_theme( 'default' );
$block = array(
'blockName' => 'core/image',
'attrs' => array(),
);
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg"/></figure>';
$expected = '<figure class="wp-block-image size-full"><img src="/my-image.jpg"/></figure>';

$this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
}

/**
* @ticket 55505
*/
function test_outer_container_restored_for_aligned_image_block_with_non_themejson_theme() {
// The "default" theme doesn't have theme.json support.
switch_theme( 'default' );
$block = array(
'blockName' => 'core/image',
'attrs' => array(),
);
$block_content = '<figure class="wp-block-image alignright size-full"><img src="/my-image.jpg"/></figure>';
$expected = '<div class="wp-block-image"><figure class="alignright size-full"><img src="/my-image.jpg"/></figure></div>';

$this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
}

/**
* @ticket 55505
*
* @dataProvider data_block_image_html_restored_outer_container
*
* @param string $block_image_html The block image HTML passed to `wp_restore_image_outer_container`.
* @param string $expected The expected block image HTML.
*/
function test_additional_styles_moved_to_restored_outer_container_for_aligned_image_block_with_non_themejson_theme( $block_image_html, $expected ) {
// The "default" theme doesn't have theme.json support.
switch_theme( 'default' );
$block = array(
'blockName' => 'core/image',
'attrs' => array(
'className' => 'is-style-round my-custom-classname',
),
);

$this->assertSame( $expected, wp_restore_image_outer_container( $block_image_html, $block ) );
}

/**
* Data provider for test_additional_styles_moved_to_restored_outer_container_for_aligned_image_block_with_non_themejson_theme().
*
* @return array {
* @type array {
* @type string $block_image_html The block image HTML passed to `wp_restore_image_outer_container`.
* @type string $expected The expected block image HTML.
* }
* }
*/
public function data_block_image_html_restored_outer_container() {
$expected = '<div class="wp-block-image is-style-round my-custom-classname"><figure class="alignright size-full"><img src="/my-image.jpg"/></figure></div>';

return array(
array(
'<figure class="wp-block-image alignright size-full is-style-round my-custom-classname"><img src="/my-image.jpg"/></figure>',
$expected,
),
array(
'<figure class="is-style-round my-custom-classname wp-block-image alignright size-full"><img src="/my-image.jpg"/></figure>',
$expected,
),
array(
'<figure class="wp-block-image is-style-round my-custom-classname alignright size-full"><img src="/my-image.jpg"/></figure>',
$expected,
),
array(
'<figure class="is-style-round wp-block-image alignright my-custom-classname size-full"><img src="/my-image.jpg"/></figure>',
$expected,
),
array(
'<figure style="color: red" class=\'is-style-round wp-block-image alignright my-custom-classname size-full\' data-random-tag=">"><img src="/my-image.jpg"/></figure>',
'<div class="wp-block-image is-style-round my-custom-classname"><figure style="color: red" class=\'alignright size-full\' data-random-tag=">"><img src="/my-image.jpg"/></figure></div>',
),
);
}

/**
* @ticket 55505
*/
function test_outer_container_not_restored_for_aligned_image_block_with_themejson_theme() {
switch_theme( 'block-theme' );
$block = array(
'blockName' => 'core/image',
'attrs' => array(
'className' => 'is-style-round my-custom-classname',
),
);
$block_content = '<figure class="wp-block-image alignright size-full is-style-round my-custom-classname"><img src="/my-image.jpg"/></figure>';
$expected = '<figure class="wp-block-image alignright size-full is-style-round my-custom-classname"><img src="/my-image.jpg"/></figure>';

$this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
}
}