Changeset 58028

Timestamp:

04/22/2024 05:28:50 AM (6 months ago)

Author:

isabel_brison

Message:

Editor: limit layout rules on themes without theme.json.

Removes output of base rules for flow and constrained layout types on themes without theme.json.

Props evanltd, poena, isabel_brison, andrewserong, oandregal.
See #60981.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (3 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -1228 +1228 @@
 
             foreach ( $base_styles_nodes as $base_style_node ) {
-                $stylesheet .= $this->get_layout_styles( $base_style_node );
+                $stylesheet .= $this->get_layout_styles( $base_style_node, $types );
             }
         }
@@ -1390 +1390 @@
      * @since 6.3.0 Reduced specificity for layout margin rules.
      * @since 6.5.1 Only output rules referencing content and wide sizes when values exist.
+     * @since 6.5.3 Add types parameter to check if only base layout styles are needed.
      *
      * @param array $block_metadata Metadata about the block to get styles for.
+     * @param array $types Optional. Types of styles to output. If empty, all styles will be output.
      * @return string Layout styles for the block.
      */
-    protected function get_layout_styles( $block_metadata ) {
+    protected function get_layout_styles( $block_metadata, $types = array() ) {
         $block_rules = '';
         $block_type  = null;
@@ -1543 +1545 @@
                     foreach ( $base_style_rules as $base_style_rule ) {
                         $declarations = array();
+
+                        // Skip outputting base styles for flow and constrained layout types if theme doesn't support theme.json. The 'base-layout-styles' type flags this.
+                        if ( in_array( 'base-layout-styles', $types, true ) && ( 'default' === $layout_definition['name'] || 'constrained' === $layout_definition['name'] ) ) {
+                            continue;
+                        }
 
                         if (

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -1261 +1261 @@
         // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
         $this->assertSame(
-            ':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}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-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
+            ':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
             $stylesheet
         );