vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Add layout controls to children of flex layout blocks.

Browse Source 
Props isabel_brison, andrewserong, davidbaumwald, flixos90, mamaduka, ntsekouras, hellofromtonya.
Fixes #57584.


git-svn-id: https://develop.svn.wordpress.org/trunk@55282 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Felix Arntz
2023-02-07 17:41:11 +00:00
parent 69164aaa3a
commit 05c1b0c6c8
7 changed files with 178 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/block-supports/layout.php
+87 -14
View File
@@ -321,10 +321,53 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
function wp_render_layout_support_flag( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
$has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
if ( ! $support_layout ) {
if ( ! $support_layout && ! $has_child_layout ) {
return $block_content;
}
$outer_class_names = array();
if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) {
$container_content_class = wp_unique_id( 'wp-container-content-' );
$child_layout_styles = array();
if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => array(
'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
'box-sizing' => 'border-box',
),
);
} elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) {
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => array(
'flex-grow' => '1',
),
);
}
wp_style_engine_get_stylesheet_from_css_rules(
$child_layout_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
$outer_class_names[] = $container_content_class;
}
// Return early if only child layout exists.
if ( ! $support_layout && ! empty( $outer_class_names ) ) {
$content = new WP_HTML_Tag_Processor( $block_content );
$content->next_tag();
$content->add_class( implode( ' ', $outer_class_names ) );
return (string) $content;
}
$global_settings = wp_get_global_settings();
$block_gap = _wp_array_get( $global_settings, array( 'spacing', 'blockGap' ), null );
@@ -341,7 +384,6 @@ function wp_render_layout_support_flag( $block_content, $block ) {
$class_names = array();
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
$block_classname = wp_get_block_default_classname( $block['blockName'] );
$container_class = wp_unique_id( 'wp-container-' );
$layout_classname = '';
@@ -417,7 +459,7 @@ function wp_render_layout_support_flag( $block_content, $block ) {
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = wp_get_layout_style(
".$block_classname.$container_class",
".$container_class.$container_class",
$used_layout,
$has_block_gap_support,
$gap_value,
@@ -432,18 +474,49 @@ function wp_render_layout_support_flag( $block_content, $block ) {
}
}
/*
* This assumes the hook only applies to blocks with a single wrapper.
* A limitation of this hook is that nested inner blocks wrappers are not yet supported.
*/
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
$block_content,
1
);
$content_with_outer_classnames = '';
return $content;
if ( ! empty( $outer_class_names ) ) {
$content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content );
$content_with_outer_classnames->next_tag();
foreach ( $outer_class_names as $outer_class_name ) {
$content_with_outer_classnames->add_class( $outer_class_name );
}
$content_with_outer_classnames = (string) $content_with_outer_classnames;
}
/**
* The first chunk of innerContent contains the block markup up until the inner blocks start.
* This targets the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
*/
$inner_content_classnames = '';
if ( isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ) {
$tags = new WP_HTML_Tag_Processor( $block['innerContent'][0] );
$last_classnames = '';
while ( $tags->next_tag() ) {
$last_classnames = $tags->get_attribute( 'class' );
}
$inner_content_classnames = (string) $last_classnames;
}
$content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content );
if ( $inner_content_classnames ) {
$content->next_tag( array( 'class_name' => $inner_content_classnames ) );
foreach ( $class_names as $class_name ) {
$content->add_class( $class_name );
}
} else {
$content->next_tag();
foreach ( $class_names as $class_name ) {
$content->add_class( $class_name );
}
}
return (string) $content;
}
// Register the block support.
tests/phpunit/data/blocks/fixtures/core__column.server.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="is-layout-flow wp-block-column">
<div class="wp-block-column is-layout-flow">
<p>Column One, Paragraph One</p>
tests/phpunit/data/blocks/fixtures/core__columns.server.html
+3 -3
View File
@@ -1,7 +1,7 @@
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
<div class="is-layout-flow wp-block-column">
<div class="wp-block-column is-layout-flow">
<p>Column One, Paragraph One</p>
@@ -11,7 +11,7 @@
</div>
<div class="is-layout-flow wp-block-column">
<div class="wp-block-column is-layout-flow">
<p>Column Two, Paragraph One</p>
tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
<p class="layout-column-1">Column One, Paragraph One</p>
tests/phpunit/data/blocks/fixtures/core__gallery.server.html
+1 -1
View File
@@ -1,5 +1,5 @@
<figure class="is-layout-flex wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1">
<figure class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex">
<figure class="wp-block-image size-large">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />
tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html
+1 -1
View File
@@ -1,5 +1,5 @@
<figure class="is-layout-flex wp-block-gallery has-nested-images is-cropped columns-1 wp-block-gallery-1" >
<figure class="wp-block-gallery has-nested-images is-cropped columns-1 wp-block-gallery-1 is-layout-flex" >
<figure class="wp-block-image size-large">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />
tests/phpunit/tests/block-supports/layout.php
+84
View File
@@ -173,4 +173,88 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
$this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
}
/**
* @ticket 57584
*
* @dataProvider data_layout_support_flag_renders_classnames_on_wrapper
*
* @covers ::wp_render_layout_support_flag
*
* @param array $args Dataset to test.
* @param string $expected_output The expected output.
*/
public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) {
$actual_output = wp_render_layout_support_flag( $args['block_content'], $args['block'] );
$this->assertSame( $expected_output, $actual_output );
}
/**
* Data provider for test_layout_support_flag_renders_classnames_on_wrapper.
*
* @return array
*/
public function data_layout_support_flag_renders_classnames_on_wrapper() {
return array(
'single wrapper block layout with flow type' => 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 is-layout-flow"></div>',
),
'single wrapper block layout with constrained type' => array(
'args' => array(
'block_content' => '<div class="wp-block-group"></div>',
'block' => array(
'blockName' => 'core/group',
'attrs' => array(
'layout' => array(
'type' => 'constrained',
),
),
'innerBlocks' => array(),
'innerHTML' => '<div class="wp-block-group"></div>',
'innerContent' => array(
'<div class="wp-block-group"></div>',
),
),
),
'expected_output' => '<div class="wp-block-group is-layout-constrained"></div>',
),
'multiple wrapper block layout with flow type' => array(
'args' => array(
'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper"></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-wrapper"></div></div>',
'innerContent' => array(
'<div class="wp-block-group"><div class="wp-block-group__inner-wrapper">',
' ',
' </div></div>',
),
),
),
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow"></div></div>',
),
);
}
}