From ed078e9a0bb339c02ad8ed26ed1d24ba988bbe6b Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 23 Jun 2022 21:46:58 +0100 Subject: [PATCH] Add: Descendent block styles mechanism. --- .../descendent-block-styles.php | 115 ++++++++++++++++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 31 +++++ lib/load.php | 1 + packages/block-library/src/group/block.json | 1 + 4 files changed, 148 insertions(+) create mode 100644 lib/block-supports/descendent-block-styles.php diff --git a/lib/block-supports/descendent-block-styles.php b/lib/block-supports/descendent-block-styles.php new file mode 100644 index 0000000000000..6d3d4239891eb --- /dev/null +++ b/lib/block-supports/descendent-block-styles.php @@ -0,0 +1,115 @@ +get_registered( $block['blockName'] ); + if ( ! block_has_support( $block_type, array( '__experimentalDescendentStyles' ), false ) ) { + return $block_content; + } + + // return early if no descendent blocks are found on the block attributes. + $block_styles = _wp_array_get( $block, array( 'attrs', 'style', 'blocks' ), null ); + if ( empty( $block_styles ) ) { + return $block_content; + } + + $class_name = gutenberg_get_block_styles_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 descendent block styles stylesheet. + * + * @param string|null $pre_render The pre-rendered content. Default null. + * @param array $block The block being rendered. + * + * @return null + */ +function gutenberg_render_descendent_block_styles_support_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( '__experimentalDescendentStyles' ), false ) ) { + return null; + } + + // Return early if no descendent blocks are found on the block attributes. + $block_styles = _wp_array_get( $block, array( 'attrs', 'style', 'blocks' ), null ); + if ( empty( $block_styles ) ) { + return null; + } + + $class_name = gutenberg_get_block_styles_class_name( $block ); + + // Remove any potentially unsafe styles. + $theme_json_shape = WP_Theme_JSON_Gutenberg::remove_insecure_properties( array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => $block_styles, + ), + ) ); + + $styles = ''; + + $theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape ); + $block_nodes = $theme_json_object->get_styles_block_nodes(); + foreach ( $block_nodes as $block_node ) { + $block_node['selector'] = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $class_name, $block_node['selector'] ); + $styles .= $theme_json_object->get_styles_for_block( $block_node ); + } + + if ( ! empty( $styles ) ) { + gutenberg_enqueue_block_support_styles( $styles ); + } + + return null; +} + +add_filter( 'render_block', 'gutenberg_render_descendent_block_styles_support', 10, 2 ); +add_filter( 'pre_render_block', 'gutenberg_render_descendent_block_styles_support_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 d093480e924e4..3a0acc082ecc0 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 @@ -674,4 +674,35 @@ protected static function get_property_value( $styles, $path, $theme_json = null return $value; } + + /** + * 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 ) { + $selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner ); + } + } + + return implode( ', ', $selectors_scoped ); + } } diff --git a/lib/load.php b/lib/load.php index 5504e8bd3fc3d..1133976edb702 100644 --- a/lib/load.php +++ b/lib/load.php @@ -159,6 +159,7 @@ function gutenberg_is_experiment_enabled( $name ) { // Block supports overrides. require __DIR__ . '/block-supports/utils.php'; +require __DIR__ . '/block-supports/descendent-block-styles.php'; require __DIR__ . '/block-supports/elements.php'; require __DIR__ . '/block-supports/colors.php'; require __DIR__ . '/block-supports/typography.php'; diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 3e89f14dc938b..ba4c802362b61 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -19,6 +19,7 @@ }, "supports": { "__experimentalSettings": true, + "__experimentalDescendentStyles": true, "align": [ "wide", "full" ], "anchor": true, "html": false,