From 51b5d5fa2c725b5f9c1732401d73692861cbd054 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 23 Jun 2022 21:46:58 +0100 Subject: [PATCH] Add: Frontend section presets output. --- lib/block-supports/preset-settings.php | 116 ++++++++++++++++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 105 ++++++++++++++++ lib/load.php | 1 + package-lock.json | 26 ++-- 4 files changed, 235 insertions(+), 13 deletions(-) create mode 100644 lib/block-supports/preset-settings.php diff --git a/lib/block-supports/preset-settings.php b/lib/block-supports/preset-settings.php new file mode 100644 index 0000000000000..b167d4984627a --- /dev/null +++ b/lib/block-supports/preset-settings.php @@ -0,0 +1,116 @@ +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. + * + * @param string|null $pre_render The pre-rendered content. Default null. + * @param array $block The block being rendered. + * + * @return null + */ +function gutenberg_add_descendent_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 ); + + // 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, + ), + '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_scoped_css_variables( $class_name ); + + // include preset css classes on the the stylesheet. + $styles .= $theme_json_object->get_scoped_css_classes( $class_name ); + + if ( ! empty( $styles ) ) { + gutenberg_enqueue_block_support_styles( $styles ); + } + + return null; +} + +add_filter( 'render_block', 'gutenberg_add_descendent_presets_class', 10, 2 ); +add_filter( 'pre_render_block', 'gutenberg_add_descendent_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 31ce6d6964b55..c4d56a477ce64 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 @@ -1503,4 +1503,109 @@ 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 ) ) { + if( empty( $inner ) ) { + continue; + } + $selectors_scoped[] = $inner; + } else { + if( empty( $inner ) ) { + $selectors_scoped[] = $outer; + } else { + $selectors_scoped[] = $outer . ' ' . $inner; + } + } + } + } + + $result = implode( ', ', $selectors_scoped ); + return $result; + } + + /** + * Function that returns presets css variables scoped to a given selector. + * Similar to get_css_variables but with added scoping. + * + * @param string $scope Selector to scope to. + * @return string A stylesheet with the preset variables. + */ + public function get_scoped_css_variables( $scope ) { + $blocks_metadata = static::get_blocks_metadata(); + $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata ); + + // the root selector needs to target every possible block selector + // in order for the general setting to overwrite any bock specific setting of a parent block or + // the site root. + $default_selector = ',[class*="wp-block"]'; + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + foreach ( $blocks as $block_name => $block_type ) { + if ( + isset( $block_type->supports['__experimentalSelector'] ) && + is_string( $block_type->supports['__experimentalSelector'] ) + ) { + $default_selector .= ','.$block_type->supports['__experimentalSelector']; + } + } + + // make the root node use the default selector for this section. + $setting_nodes[0]['selector'] = $default_selector; + + // scope every selector. + foreach( $setting_nodes as &$node) { + $node['selector'] = static::scope_selector( $scope, $node['selector'] ); + } + + $styles = $this->get_css_variables( $setting_nodes, static::VALID_ORIGINS ); + return $styles; + } + + /** + * Function that returns presets css classes scoped to a given selector. + * Similar to get_preset_classes but with added scoping. + * + * @param string $scope Selector to scope to. + * @return string A stylesheet with the preset class rules. + */ + public function get_scoped_css_classes( $scope ) { + $blocks_metadata = static::get_blocks_metadata(); + $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata ); + + // scope every selector. + foreach( $setting_nodes as &$node) { + $node['selector'] = static::scope_selector( $scope, $node['selector'] ); + } + + // make the root node use the scope selector for this section. + $setting_nodes[0]['selector'] = $scope; + + return $this->get_preset_classes( $setting_nodes, static::VALID_ORIGINS ); + } } diff --git a/lib/load.php b/lib/load.php index 9792ef4870937..166245c800b02 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/preset-settings.php'; require __DIR__ . '/block-supports/elements.php'; require __DIR__ . '/block-supports/colors.php'; require __DIR__ . '/block-supports/typography.php'; diff --git a/package-lock.json b/package-lock.json index 0cb04bf56fa03..3f89b04d91987 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18667,7 +18667,7 @@ "app-root-dir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz", - "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", + "integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=", "dev": true }, "app-root-path": { @@ -26846,7 +26846,7 @@ "babel-plugin-add-react-displayname": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz", - "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==", + "integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=", "dev": true }, "babel-plugin-apply-mdx-type-prop": { @@ -27269,7 +27269,7 @@ "batch-processor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", - "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", + "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=", "dev": true }, "bcrypt-pbkdf": { @@ -30559,7 +30559,7 @@ "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", "dev": true }, "cssesc": { @@ -36680,7 +36680,7 @@ "has-glob": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz", - "integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==", + "integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=", "dev": true, "requires": { "is-glob": "^3.0.0" @@ -36689,7 +36689,7 @@ "is-glob": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==", + "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", "dev": true, "requires": { "is-extglob": "^2.1.0" @@ -38503,7 +38503,7 @@ "is-window": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz", - "integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==", + "integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=", "dev": true }, "is-windows": { @@ -41880,7 +41880,7 @@ "js-string-escape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", - "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==", + "integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=", "dev": true }, "js-tokens": { @@ -43408,7 +43408,7 @@ "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", "dev": true }, "macos-release": { @@ -46739,7 +46739,7 @@ "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", - "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", "dev": true }, "number-is-nan": { @@ -47818,7 +47818,7 @@ "p-defer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", - "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==", + "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=", "dev": true }, "p-event": { @@ -49157,7 +49157,7 @@ "pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", - "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", + "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, "prismjs": { @@ -51389,7 +51389,7 @@ "relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", - "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", + "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, "remark": {