From 09b46dd3ab2927d25408dcc031782098c9e9924b Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 23 Sep 2022 20:44:50 +0100 Subject: [PATCH] Add: Frontend section presets output (#42124) --- lib/block-supports/settings.php | 151 ++++++++++++++++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 88 +++++++++- lib/load.php | 1 + 3 files changed, 232 insertions(+), 8 deletions(-) create mode 100644 lib/block-supports/settings.php diff --git a/lib/block-supports/settings.php b/lib/block-supports/settings.php new file mode 100644 index 00000000000000..60900629c04cf1 --- /dev/null +++ b/lib/block-supports/settings.php @@ -0,0 +1,151 @@ +get_registered( $block['blockName'] ); + if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) { + return $block_content; + } + + // return early if no settings are found on the block attributes. + $block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null ); + if ( empty( $block_settings ) ) { + return $block_content; + } + + $class_name = _gutenberg_get_presets_class_name( $block ); + + // Like the layout hook this assumes the hook only applies to blocks with a single wrapper. + // Retrieve the opening tag of the first HTML element. + $html_element_matches = array(); + preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE ); + $first_element = $html_element_matches[0][0]; + // If the first HTML element has a class attribute just add the new class + // as we do on layout and duotone. + if ( strpos( $first_element, 'class="' ) !== false ) { + $content = preg_replace( + '/' . preg_quote( 'class="', '/' ) . '/', + 'class="' . $class_name . ' ', + $block_content, + 1 + ); + } else { + // If the first HTML element has no class attribute we should inject the attribute before the attribute at the end. + $first_element_offset = $html_element_matches[0][1]; + $content = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 ); + } + + return $content; +} + +/** + * Render the block level presets stylesheet. + * + * @access private + * + * @param string|null $pre_render The pre-rendered content. Default null. + * @param array $block The block being rendered. + * + * @return null + */ +function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) { + // Return early if the block has not support for descendent block styles. + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) { + return null; + } + + // return early if no settings are found on the block attributes. + $block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null ); + if ( empty( $block_settings ) ) { + return null; + } + + $class_name = '.' . _gutenberg_get_presets_class_name( $block ); + + // the root selector for preset variables needs to target every possible block selector + // in order for the general setting to override any bock specific setting of a parent block or + // the site root. + $variables_root_selector = '*,[class*="wp-block"]'; + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + foreach ( $blocks as $block_type ) { + if ( + isset( $block_type->supports['__experimentalSelector'] ) && + is_string( $block_type->supports['__experimentalSelector'] ) + ) { + $variables_root_selector .= ',' . $block_type->supports['__experimentalSelector']; + } + } + $variables_root_selector = WP_Theme_JSON_6_1::scope_selector( $class_name, $variables_root_selector ); + + // Remove any potentially unsafe styles. + $theme_json_shape = WP_Theme_JSON_Gutenberg::remove_insecure_properties( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => $block_settings, + ) + ); + $theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape ); + + $styles = ''; + + // include preset css variables declaration on the stylesheet. + $styles .= $theme_json_object->get_stylesheet( + array( 'variables' ), + null, + array( + 'root_selector' => $variables_root_selector, + 'scope' => $class_name, + ) + ); + + // include preset css classes on the the stylesheet. + $styles .= $theme_json_object->get_stylesheet( + array( 'presets' ), + null, + array( + 'root_selector' => $class_name . ',' . $class_name . ' *', + 'scope' => $class_name, + ) + ); + + if ( ! empty( $styles ) ) { + gutenberg_enqueue_block_support_styles( $styles ); + } + + return null; +} + +add_filter( 'render_block', '_gutenberg_add_block_level_presets_class', 10, 2 ); +add_filter( 'pre_render_block', '_gutenberg_add_block_level_preset_styles', 10, 2 ); diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 5c1639d3d2ce6b..edbfd5419f0326 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -445,7 +445,7 @@ protected static function get_blocks_metadata() { static::$blocks_metadata[ $block_name ]['features'] = $features; } - // Assign defaults, then overwrite those that the block sets by itself. + // Assign defaults, then override those that the block sets by itself. // If the block selector is compounded, will append the element to each // individual block selector. $block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] ); @@ -625,9 +625,12 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { * 'styles': only the styles section in theme.json. * '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 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; } @@ -648,6 +651,27 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' $style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata ); $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 = ''; if ( in_array( 'variables', $types, true ) ) { @@ -655,23 +679,30 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' } 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. $base_styles_nodes = array( 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', ), ); @@ -1516,4 +1547,45 @@ protected function get_layout_styles( $block_metadata ) { } return $block_rules; } + + /** + * Function that scopes a selector with another one. This works a bit like + * SCSS nesting except the `&` operator isn't supported. + * + * + * $scope = '.a, .b .c'; + * $selector = '> .x, .y'; + * $merged = scope_selector( $scope, $selector ); + * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y' + * + * + * @since 5.9.0 + * + * @param string $scope Selector to scope to. + * @param string $selector Original selector. + * @return string Scoped selector. + */ + public static function scope_selector( $scope, $selector ) { + $scopes = explode( ',', $scope ); + $selectors = explode( ',', $selector ); + + $selectors_scoped = array(); + foreach ( $scopes as $outer ) { + foreach ( $selectors as $inner ) { + $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; + } + } diff --git a/lib/load.php b/lib/load.php index 9792ef48709375..b0e16820652305 100644 --- a/lib/load.php +++ b/lib/load.php @@ -126,6 +126,7 @@ function gutenberg_is_experiment_enabled( $name ) { // Block supports overrides. require __DIR__ . '/block-supports/utils.php'; +require __DIR__ . '/block-supports/settings.php'; require __DIR__ . '/block-supports/elements.php'; require __DIR__ . '/block-supports/colors.php'; require __DIR__ . '/block-supports/typography.php';