Changeset 55255

Timestamp:

02/07/2023 12:40:44 PM (4 years ago)

Author:

jorgefilipecosta

Message:

Block editor: Add frontend block-level settings to the core.

This commit adds block-level settings in the core. Block level settings allow a block to define the preset settings of its nested blocks using the same shape as theme.json.

Props oandregal, Mamaduka, jorgefilipecosta, dmsnell, adamziel.
57651 #57651.

Location:

trunk/src

Files:

• wp-includes/block-supports/settings.php (added)
• wp-includes/class-wp-theme-json.php (modified) (6 diffs)
• wp-settings.php (modified) (1 diff)

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

@@ -944 +944 @@
          *                       - `presets`: only the classes for the presets.
          * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
+         * @param array $options An array of options for now used for internal purposes only (may change without notice).
+         *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
+         *                       and root_selector which overwrites and forces a given selector to be used on the root node.
          * @return string The resulting stylesheet.
          */
-        public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null ) {
+        public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
                 if ( null === $origins ) {
                         $origins = static::VALID_ORIGINS;
@@ -967 +970 @@
                 $setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
 
+                $root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
+                $root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
+
+                if ( ! empty( $options['scope'] ) ) {
+                        foreach ( $setting_nodes as &$node ) {
+                                $node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
+                        }
+                        foreach ( $style_nodes as &$node ) {
+                                $node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
+                        }
+                }
+
+                if ( ! empty( $options['root_selector'] ) ) {
+                        if ( false !== $root_settings_key ) {
+                                $setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
+                        }
+                        if ( false !== $root_style_key ) {
+                                $setting_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
+                        }
+                }
+
                 $stylesheet = '';
 
@@ -974 +998 @@
 
                 if ( in_array( 'styles', $types, true ) ) {
-                        $root_block_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
-
-                        if ( false !== $root_block_key ) {
-                                $stylesheet .= $this->get_root_layout_rules( static::ROOT_BLOCK_SELECTOR, $style_nodes[ $root_block_key ] );
+                        if ( false !== $root_style_key ) {
+                                $stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
                         }
                         $stylesheet .= $this->get_block_classes( $style_nodes );
                 } elseif ( in_array( 'base-layout-styles', $types, true ) ) {
+                        $root_selector    = static::ROOT_BLOCK_SELECTOR;
+                        $columns_selector = '.wp-block-columns';
+                        if ( ! empty( $options['scope'] ) ) {
+                                $root_selector    = static::scope_selector( $options['scope'], $root_selector );
+                                $columns_selector = static::scope_selector( $options['scope'], $columns_selector );
+                        }
+                        if ( ! empty( $options['root_selector'] ) ) {
+                                $root_selector = $options['root_selector'];
+                        }
                         // Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
                         // For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
@@ -986 +1017 @@
                                 array(
                                         'path'     => array( 'styles' ),
-                                        'selector' => static::ROOT_BLOCK_SELECTOR,
+                                        'selector' => $root_selector,
                                 ),
                                 array(
                                         'path'     => array( 'styles', 'blocks', 'core/columns' ),
-                                        'selector' => '.wp-block-columns',
+                                        'selector' => $columns_selector,
                                         'name'     => 'core/columns',
                                 ),
@@ -1491 +1522 @@
          * @return string Scoped selector.
          */
-        protected static function scope_selector( $scope, $selector ) {
+        public static function scope_selector( $scope, $selector ) {
                 $scopes    = explode( ',', $scope );
                 $selectors = explode( ',', $selector );
@@ -1498 +1529 @@
                 foreach ( $scopes as $outer ) {
                         foreach ( $selectors as $inner ) {
-                                $selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner );
-                        }
-                }
-
-                return implode( ', ', $selectors_scoped );
+                                $outer = trim( $outer );
+                                $inner = trim( $inner );
+                                if ( ! empty( $outer ) && ! empty( $inner ) ) {
+                                        $selectors_scoped[] = $outer . ' ' . $inner;
+                                } elseif ( empty( $outer ) ) {
+                                        $selectors_scoped[] = $inner;
+                                } elseif ( empty( $inner ) ) {
+                                        $selectors_scoped[] = $outer;
+                                }
+                        }
+                }
+
+                $result = implode( ', ', $selectors_scoped );
+                return $result;
         }
 

trunk/src/wp-settings.php

@@ -339 +339 @@
 require ABSPATH . WPINC . '/block-supports/spacing.php';
 require ABSPATH . WPINC . '/block-supports/typography.php';
+require ABSPATH . WPINC . '/block-supports/settings.php';
 require ABSPATH . WPINC . '/style-engine.php';
 require ABSPATH . WPINC . '/style-engine/class-wp-style-engine.php';