Changeset 58226 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

05/29/2024 05:14:00 AM (22 months ago)

Author:

isabel_brison

Message:

Editor: improve consistency of root padding.

Improve the behaviour of global padding when useRootPaddingAwareAlignments is enabled in theme.json to be more consistent across blocks, templates and patterns.

Props richtabor, isabel_brison, andrewserong.
Fixes #61304.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (3 diffs)

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

@@ -2689 +2689 @@
      *
      * @since 6.1.0
-     * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties.
+     * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules.
      *
      * @param string $selector The root node selector.
@@ -2709 +2709 @@
             $wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
             $wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
-            $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
-            $css .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
+            $css         .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
+            $css         .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
         }
 
@@ -2728 +2728 @@
             // Right and left padding are applied to the first container with `.has-global-padding` class.
             $css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-            // Nested containers with `.has-global-padding` class do not get padding.
-            $css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }';
             // Alignfull children of the container with left and right padding have negative margins so they can still be full width.
             $css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-            // The above rule is negated for alignfull children of nested containers.
-            $css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }';
-            // Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
-            $css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-            // The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
-            $css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+            // Nested children of the container with left and right padding that are not wide or full aligned do not get padding.
+            $css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
+            // Nested children of the container with left and right padding that are not wide or full aligned do not get negative margin applied.
+            $css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
         }