mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-06-28 22:30:04 +00:00
Editor: update layout classnames and specificity.
Adds a compound layout classname and reduces layout spacing rule specificity. Props ramonopoly, andrewserong, poena. Fixes #58548. git-svn-id: https://develop.svn.wordpress.org/trunk@55956 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
@@ -312,6 +312,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
|
||||
* Renders the layout config to the block wrapper.
|
||||
*
|
||||
* @since 5.8.0
|
||||
* @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.
|
||||
* @access private
|
||||
*
|
||||
* @param string $block_content Rendered block content.
|
||||
@@ -474,6 +475,10 @@ function wp_render_layout_support_flag( $block_content, $block ) {
|
||||
}
|
||||
}
|
||||
|
||||
// Add combined layout and block classname for global styles to hook onto.
|
||||
$block_name = explode( '/', $block['blockName'] );
|
||||
$class_names[] = 'wp-block-' . end( $block_name ) . '-' . $layout_classname;
|
||||
|
||||
$content_with_outer_classnames = '';
|
||||
|
||||
if ( ! empty( $outer_class_names ) ) {
|
||||
|
||||
@@ -1246,6 +1246,7 @@ class WP_Theme_JSON {
|
||||
* Gets the CSS layout rules for a particular block from theme.json layout definitions.
|
||||
*
|
||||
* @since 6.1.0
|
||||
* @since 6.3.0 Reduced specificity for layout margin rules.
|
||||
*
|
||||
* @param array $block_metadata Metadata about the block to get styles for.
|
||||
* @return string Layout styles for the block.
|
||||
@@ -1342,7 +1343,7 @@ class WP_Theme_JSON {
|
||||
$spacing_rule['selector']
|
||||
);
|
||||
} else {
|
||||
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
|
||||
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(%s .%s) %s' : '%s-%s%s';
|
||||
$layout_selector = sprintf(
|
||||
$format,
|
||||
$selector,
|
||||
@@ -2560,8 +2561,9 @@ class WP_Theme_JSON {
|
||||
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
|
||||
if ( $has_block_gap_support ) {
|
||||
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
|
||||
$css .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
|
||||
$css .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
|
||||
$css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
|
||||
$css .= ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
|
||||
$css .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
|
||||
|
||||
// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
|
||||
$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
|
||||
|
||||
@@ -219,14 +219,19 @@
|
||||
],
|
||||
"spacingStyles": [
|
||||
{
|
||||
"selector": " > *",
|
||||
"selector": " > :first-child:first-child",
|
||||
"rules": {
|
||||
"margin-block-start": "0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": " > :last-child:last-child",
|
||||
"rules": {
|
||||
"margin-block-start": "0",
|
||||
"margin-block-end": "0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": " > * + *",
|
||||
"selector": " > *",
|
||||
"rules": {
|
||||
"margin-block-start": null,
|
||||
"margin-block-end": "0"
|
||||
@@ -279,14 +284,19 @@
|
||||
],
|
||||
"spacingStyles": [
|
||||
{
|
||||
"selector": " > *",
|
||||
"selector": " > :first-child:first-child",
|
||||
"rules": {
|
||||
"margin-block-start": "0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": " > :last-child:last-child",
|
||||
"rules": {
|
||||
"margin-block-start": "0",
|
||||
"margin-block-end": "0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": " > * + *",
|
||||
"selector": " > *",
|
||||
"rules": {
|
||||
"margin-block-start": null,
|
||||
"margin-block-end": "0"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<div class="wp-block-column is-layout-flow">
|
||||
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
|
||||
|
||||
<p>Column One, Paragraph One</p>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
|
||||
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1 wp-block-columns-is-layout-flex">
|
||||
|
||||
<div class="wp-block-column is-layout-flow">
|
||||
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
|
||||
|
||||
<p>Column One, Paragraph One</p>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wp-block-column is-layout-flow">
|
||||
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
|
||||
|
||||
<p>Column Two, Paragraph One</p>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
|
||||
<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1 wp-block-columns-is-layout-flex">
|
||||
|
||||
<p class="layout-column-1">Column One, Paragraph One</p>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<figure
|
||||
class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex"
|
||||
class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex"
|
||||
>
|
||||
|
||||
<figure class="wp-block-image size-large">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<figure
|
||||
class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex"
|
||||
class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex"
|
||||
>
|
||||
|
||||
<figure class="wp-block-image size-large">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<figure class="wp-block-image size-large">
|
||||
<img data-id="1421"
|
||||
src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<div class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex">
|
||||
<div class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<figure class="blocks-gallery-image">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title" />
|
||||
</figure>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ul class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex">
|
||||
<ul class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<li class="blocks-gallery-item">
|
||||
<figure>
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-id="1" alt="title" class="wp-image-1" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ul class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex">
|
||||
<ul class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<li class="blocks-gallery-item">
|
||||
<figure>
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<figure class="wp-block-gallery columns-3 is-cropped alignwide wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery columns-3 is-cropped alignwide wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<ul class="blocks-gallery-grid">
|
||||
<li class="blocks-gallery-item">
|
||||
<figure>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<figure class="wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<ul class="blocks-gallery-grid">
|
||||
<li class="blocks-gallery-item">
|
||||
<figure>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<figure class="wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<ul class="blocks-gallery-grid">
|
||||
<li class="blocks-gallery-item">
|
||||
<figure>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
|
||||
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img data-id="705" src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img data-id="704" src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img data-id="703" src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
|
||||
</figure>
|
||||
|
||||
|
||||
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex">
|
||||
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img data-id="705" src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img data-id="704" src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
|
||||
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img data-id="703" src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
|
||||
|
||||
@@ -170,6 +170,7 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
|
||||
|
||||
/**
|
||||
* @ticket 57584
|
||||
* @ticket 58548
|
||||
*
|
||||
* @dataProvider data_layout_support_flag_renders_classnames_on_wrapper
|
||||
*
|
||||
@@ -207,7 +208,7 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
|
||||
),
|
||||
),
|
||||
),
|
||||
'expected_output' => '<div class="wp-block-group is-layout-flow"></div>',
|
||||
'expected_output' => '<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"></div>',
|
||||
),
|
||||
'single wrapper block layout with constrained type' => array(
|
||||
'args' => array(
|
||||
@@ -226,7 +227,7 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
|
||||
),
|
||||
),
|
||||
),
|
||||
'expected_output' => '<div class="wp-block-group is-layout-constrained"></div>',
|
||||
'expected_output' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
|
||||
),
|
||||
'multiple wrapper block layout with flow type' => array(
|
||||
'args' => array(
|
||||
@@ -247,7 +248,7 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
|
||||
),
|
||||
),
|
||||
),
|
||||
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow"></div></div>',
|
||||
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow wp-block-group-is-layout-flow"></div></div>',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3827,6 +3827,7 @@ EOF;
|
||||
* image in the loop when using a block theme.
|
||||
*
|
||||
* @ticket 56930
|
||||
* @ticket 58548
|
||||
*
|
||||
* @covers ::wp_filter_content_tags
|
||||
* @covers ::wp_get_loading_attr_default
|
||||
@@ -3863,7 +3864,7 @@ EOF;
|
||||
$_wp_current_template_content = '<!-- wp:post-content /-->';
|
||||
|
||||
$html = get_the_block_template_html();
|
||||
$this->assertSame( '<div class="wp-site-blocks"><div class="entry-content wp-block-post-content is-layout-flow">' . $expected_content . '</div></div>', $html );
|
||||
$this->assertSame( '<div class="wp-site-blocks"><div class="entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow">' . $expected_content . '</div></div>', $html );
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -3871,6 +3872,7 @@ EOF;
|
||||
* to the featured image when using a block theme.
|
||||
*
|
||||
* @ticket 56930
|
||||
* @ticket 58548
|
||||
*
|
||||
* @covers ::wp_filter_content_tags
|
||||
* @covers ::wp_get_loading_attr_default
|
||||
@@ -3918,7 +3920,7 @@ EOF;
|
||||
$_wp_current_template_content = '<!-- wp:post-featured-image /--> <!-- wp:post-content /-->';
|
||||
|
||||
$html = get_the_block_template_html();
|
||||
$this->assertSame( '<div class="wp-site-blocks">' . $expected_featured_image . ' <div class="entry-content wp-block-post-content is-layout-flow">' . $expected_content . '</div></div>', $html );
|
||||
$this->assertSame( '<div class="wp-site-blocks">' . $expected_featured_image . ' <div class="entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow">' . $expected_content . '</div></div>', $html );
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -448,6 +448,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
|
||||
/**
|
||||
* @ticket 54336
|
||||
* @ticket 58548
|
||||
*/
|
||||
public function test_get_stylesheet_renders_enabled_protected_properties() {
|
||||
$theme_json = new WP_Theme_JSON(
|
||||
@@ -466,7 +467,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
)
|
||||
);
|
||||
|
||||
$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }';
|
||||
$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }';
|
||||
$this->assertSame( $expected, $theme_json->get_stylesheet() );
|
||||
$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
|
||||
}
|
||||
@@ -3299,6 +3300,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
* @dataProvider data_get_layout_definitions
|
||||
*
|
||||
* @ticket 56467
|
||||
* @ticket 58548
|
||||
*
|
||||
* @param array $layout_definitions Layout definitions as stored in core theme.json.
|
||||
*/
|
||||
@@ -3325,7 +3327,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
|
||||
// Results also include root site blocks styles.
|
||||
$this->assertSame(
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
|
||||
$theme_json->get_stylesheet( array( 'styles' ) )
|
||||
);
|
||||
}
|
||||
@@ -3334,6 +3336,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
* @dataProvider data_get_layout_definitions
|
||||
*
|
||||
* @ticket 56467
|
||||
* @ticket 58548
|
||||
*
|
||||
* @param array $layout_definitions Layout definitions as stored in core theme.json.
|
||||
*/
|
||||
@@ -3360,7 +3363,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
|
||||
// Results also include root site blocks styles.
|
||||
$this->assertSame(
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var(--wp--preset--spacing--60); }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}body .is-layout-flex{gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
|
||||
$theme_json->get_stylesheet( array( 'styles' ) )
|
||||
);
|
||||
}
|
||||
@@ -3516,7 +3519,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
);
|
||||
|
||||
$this->assertSame(
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flex{gap: 0;}.wp-block-buttons.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flex{gap: 0;}',
|
||||
'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow) > * + *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}',
|
||||
$theme_json->get_stylesheet()
|
||||
);
|
||||
}
|
||||
@@ -3958,6 +3961,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
|
||||
/**
|
||||
* @ticket 56611
|
||||
* @ticket 58548
|
||||
*/
|
||||
public function test_get_styles_with_appearance_tools() {
|
||||
$theme_json = new WP_Theme_JSON(
|
||||
@@ -3974,7 +3978,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
'selector' => 'body',
|
||||
);
|
||||
|
||||
$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: ; }body { --wp--style--block-gap: ; }';
|
||||
$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: ; }';
|
||||
$root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
|
||||
$this->assertSame( $expected, $root_rules );
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user