Changeset 55255

Timestamp:

02/07/2023 12:40:44 PM (19 months 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';