From fb10c498fa8cbc58da20b75a7e86616f37f5caf9 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 15 Feb 2022 21:04:52 +1100 Subject: [PATCH 1/5] Layout doesn't take into account different writing modes, such as left-to-right, vertical and so on. With CSS logical properties, block and inline margins will apply to the appropriate side depending on the direction of the document flow. This change to the layout margins ensures that margins will adhere to the logic of current flow. For example, margin-block-start (instead of margin-top) will manifest itself as a top margin for `writing-mode: horizontal-tb;` but a right margin for `writing-mode: vertical-rl;`. --- lib/block-supports/layout.php | 12 ++++++------ packages/block-editor/src/layouts/flow.js | 18 +++++++++--------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 59632f3e2bd16..5edd6ece1de2f 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -54,20 +54,20 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( $content_size || $wide_size ) { $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;'; + $style .= 'margin-inline-start: auto !important;'; + $style .= 'margin-inline-end: auto !important;'; $style .= '}'; $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; $style .= "$selector .alignfull { max-width: none; }"; } - $style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }"; - $style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }"; + $style .= "$selector .alignleft { float: left; margin-inline-start: 2em; margin-inline-end: 0; }"; + $style .= "$selector .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }"; 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; }"; + $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'; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index ae2e9379bdf11..3e2b5eddf7aa4 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -120,8 +120,8 @@ export default { '> :where(:not(.alignleft):not(.alignright))' ) } { max-width: ${ contentSize ?? wideSize }; - margin-left: auto !important; - margin-right: auto !important; + margin-inline-start: auto !important; + margin-inline-end: auto !important; } ${ appendSelectors( selector, '> .alignwide' ) } { @@ -137,14 +137,14 @@ export default { output += ` ${ appendSelectors( selector, '> .alignleft' ) } { float: left; - margin-right: 2em; - margin-left: 0; + margin-inline-end: 2em; + margin-inline-start: 0; } ${ appendSelectors( selector, '> .alignright' ) } { float: right; - margin-left: 2em; - margin-right: 0; + margin-inline-start: 2em; + margin-inline-end: 0; } `; @@ -152,11 +152,11 @@ export default { if ( hasBlockGapStylesSupport ) { output += ` ${ appendSelectors( selector, '> *' ) } { - margin-top: 0; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } ${ appendSelectors( selector, '> * + *' ) } { - margin-top: ${ blockGapValue }; + margin-block-start: ${ blockGapValue }; } `; } From 1d1385515fc525aae2cdebb0aa39af94e3e08b2e Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 17 Feb 2022 13:42:49 +1100 Subject: [PATCH 2/5] Fixing CSS error where I mean to use margin-inline-end for margin-right. Other minor formatting Taking a clumsy stab at compat files so we can load the global styles and settings. --- lib/block-supports/layout.php | 2 +- .../class-wp-theme-json-gutenberg.php | 75 +++++++++++++++++++ lib/load.php | 1 + packages/block-editor/src/layouts/flow.js | 6 +- 4 files changed, 78 insertions(+), 6 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 5edd6ece1de2f..09892d3401aed 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -62,7 +62,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector .alignfull { max-width: none; }"; } - $style .= "$selector .alignleft { float: left; margin-inline-start: 2em; margin-inline-end: 0; }"; + $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; }"; if ( $has_block_gap_support ) { $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )'; diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php index c68f6fb3d205a..b6e2c9161bcc7 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php @@ -43,6 +43,81 @@ public function get_patterns() { return array(); } + /** + * Converts each style section into a list of rulesets + * containing the block styles to be appended to the stylesheet. + * + * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax + * + * For each section this creates a new ruleset such as: + * + * block-selector { + * style-property-one: value; + * } + * + * @param array $style_nodes Nodes with styles. + * @return string The new stylesheet. + */ + protected function get_block_classes( $style_nodes ) { + $block_rules = ''; + + foreach ( $style_nodes as $metadata ) { + if ( null === $metadata['selector'] ) { + continue; + } + + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + $selector = $metadata['selector']; + $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); + $declarations = static::compute_style_properties( $node, $settings ); + + // 1. Separate the ones who use the general selector + // and the ones who use the duotone selector. + $declarations_duotone = array(); + foreach ( $declarations as $index => $declaration ) { + if ( 'filter' === $declaration['name'] ) { + unset( $declarations[ $index ] ); + $declarations_duotone[] = $declaration; + } + } + + /* + * Reset default browser margin on the root body element. + * This is set on the root selector **before** generating the ruleset + * from the `theme.json`. This is to ensure that if the `theme.json` declares + * `margin` in its `spacing` declaration for the `body` element then these + * user-generated values take precedence in the CSS cascade. + * @link https://github.com/WordPress/gutenberg/issues/36147. + */ + if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= 'body { margin: 0; }'; + } + + // 2. Generate the rules that use the general selector. + $block_rules .= static::to_ruleset( $selector, $declarations ); + + // 3. Generate the rules that use the duotone selector. + if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { + $selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] ); + $block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone ); + } + + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }'; + $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }'; + $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }'; + + $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null; + if ( $has_block_gap_support ) { + $block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }'; + $block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + } + } + } + + return $block_rules; + } + /** * Returns a valid theme.json for a theme. * Essentially, it flattens the preset data. diff --git a/lib/load.php b/lib/load.php index 26cd50608dbdc..66569d4a9dc67 100644 --- a/lib/load.php +++ b/lib/load.php @@ -90,6 +90,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/compat/wordpress-5.9/class-wp-rest-global-styles-controller.php'; require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php'; require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php'; +require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php'; require __DIR__ . '/compat/wordpress-6.0/post-lock.php'; require __DIR__ . '/compat/wordpress-6.0/blocks.php'; require __DIR__ . '/compat/wordpress-6.0/block-template-utils.php'; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 3e2b5eddf7aa4..31ed5726cf6e4 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -123,11 +123,9 @@ export default { margin-inline-start: auto !important; margin-inline-end: auto !important; } - ${ appendSelectors( selector, '> .alignwide' ) } { max-width: ${ wideSize ?? contentSize }; } - ${ appendSelectors( selector, '> .alignfull' ) } { max-width: none; } @@ -137,16 +135,14 @@ export default { output += ` ${ appendSelectors( selector, '> .alignleft' ) } { float: left; - margin-inline-end: 2em; margin-inline-start: 0; + margin-inline-end: 2em; } - ${ appendSelectors( selector, '> .alignright' ) } { float: right; margin-inline-start: 2em; margin-inline-end: 0; } - `; if ( hasBlockGapStylesSupport ) { From 32d3ed8d70a50708f07f10aed88ddfbef925c4c0 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 17 Feb 2022 15:04:52 +1100 Subject: [PATCH 3/5] Updated tests and removed var_dumpy --- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 09f875fb3b7a0..556fb7a77ddc7 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = '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-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $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; }'; + $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.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-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.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-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = '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-block-group{color: red;}'; + $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}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; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); } From c675f300bd9bd921b0d0cd84f2cfc706e9d42e5a Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 22 Feb 2022 12:30:04 +1100 Subject: [PATCH 4/5] Removing reference to non-existent file after rebasing on top of #38883 Removing `get_stylesheet()` from WP_Theme_JSON_Gutenberg --- lib/load.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/load.php b/lib/load.php index 66569d4a9dc67..26cd50608dbdc 100644 --- a/lib/load.php +++ b/lib/load.php @@ -90,7 +90,6 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/compat/wordpress-5.9/class-wp-rest-global-styles-controller.php'; require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php'; require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php'; -require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php'; require __DIR__ . '/compat/wordpress-6.0/post-lock.php'; require __DIR__ . '/compat/wordpress-6.0/blocks.php'; require __DIR__ . '/compat/wordpress-6.0/block-template-utils.php'; From 0616be35ed1723ac03729c6ddd6b3d8cd5558ccf Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 23 Feb 2022 15:30:29 +1100 Subject: [PATCH 5/5] Removing the CSS logical properties for styles that control horizontal page layout (left and right margins) so that any changes to the writing mode of blocks within wp-site-blocks and block containers still align themselves according to current horizontal rules. --- lib/block-supports/layout.php | 4 ++-- .../wordpress-6.0/class-wp-theme-json-gutenberg.php | 6 +++--- packages/block-editor/src/layouts/flow.js | 4 ++-- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 09892d3401aed..668ab88a608e0 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -54,8 +54,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( $content_size || $wide_size ) { $style = "$selector > :where(:not(.alignleft):not(.alignright)) {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; - $style .= 'margin-inline-start: auto !important;'; - $style .= 'margin-inline-end: auto !important;'; + $style .= 'margin-left: auto !important;'; + $style .= 'margin-right: auto !important;'; $style .= '}'; $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php index b6e2c9161bcc7..567dfb0cf4027 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php @@ -103,9 +103,9 @@ protected function get_block_classes( $style_nodes ) { } if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }'; - $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }'; - $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }'; + $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; + $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; + $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null; if ( $has_block_gap_support ) { diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 31ed5726cf6e4..8ef689d7a36d3 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -120,8 +120,8 @@ export default { '> :where(:not(.alignleft):not(.alignright))' ) } { max-width: ${ contentSize ?? wideSize }; - margin-inline-start: auto !important; - margin-inline-end: auto !important; + margin-left: auto !important; + margin-right: auto !important; } ${ appendSelectors( selector, '> .alignwide' ) } { max-width: ${ wideSize ?? contentSize }; diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 556fb7a77ddc7..b138564896cb7 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = '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-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }'; + $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; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.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--style--block-gap ); }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.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--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{color: red;}'; + $styles = '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-block-group{color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;}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; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); }