From d81c2ca4403e8a280f84f97543b458f5cf7abc3b Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 Mar 2023 12:31:11 +0200 Subject: [PATCH 01/10] Add custom CSS support for theme.json elements and variations --- lib/class-wp-theme-json-gutenberg.php | 20 +++++++++++ .../global-styles/use-global-styles-output.js | 36 +++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b0367bb5c779d4..7b279229fe4d7c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1091,6 +1091,17 @@ public function get_custom_css() { // Add the global styles root CSS. $stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' ); + // Add the global styles element CSS. + if ( isset( $this->theme_json['styles']['elements'] ) ) { + foreach ( $this->theme_json['styles']['elements'] as $element => $node ) { + $custom_element_css = _wp_array_get( $this->theme_json, array( 'styles', 'elements', $element, 'css' ) ); + if ( $custom_element_css ) { + $selector = static::ELEMENTS[ $element ]; + $stylesheet .= $this->process_blocks_custom_css( $custom_element_css, $selector ); + } + } + } + // Add the global styles block CSS. if ( isset( $this->theme_json['styles']['blocks'] ) ) { foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) { @@ -1099,6 +1110,15 @@ public function get_custom_css() { $selector = static::$blocks_metadata[ $name ]['selector']; $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); } + if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) { + foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) { + $custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) ); + if ( $custom_variation_css ) { + $selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; + $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $selector ); + } + } + } } } diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index cce2b61f0786e7..c3dcaf7170cc0c 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -1067,6 +1067,22 @@ export function useGlobalStylesOutput() { }, ]; + // Loop through the elements to check if there are custom CSS values. + // If there are, push the selector together with + // the CSS value to the 'stylesheets' array. + Object.entries( ELEMENTS ).forEach( ( element ) => { + const [ name, elementsSelector ] = element; + if ( mergedConfig.styles.elements[ name ]?.css ) { + stylesheets.push( { + css: processCSSNesting( + mergedConfig.styles.elements[ name ]?.css, + elementsSelector + ), + isGlobalStyles: true, + } ); + } + } ); + // Loop through the blocks to check if there are custom CSS values. // If there are, get the block selector and push the selector together with // the CSS value to the 'stylesheets' array. @@ -1081,6 +1097,26 @@ export function useGlobalStylesOutput() { isGlobalStyles: true, } ); } + + /* CSS for block style variations */ + if ( mergedConfig.styles.blocks[ blockType.name ]?.variations ) { + Object.entries( + mergedConfig.styles.blocks[ blockType.name ]?.variations + ).forEach( ( variation ) => { + if ( variation[ 1 ].css ) { + const variationSelector = + blockSelectors[ blockType.name ] + .styleVariationSelectors[ variation[ 0 ] ]; + stylesheets.push( { + css: processCSSNesting( + variation[ 1 ].css, + variationSelector + ), + isGlobalStyles: true, + } ); + } + } ); + } } ); return [ stylesheets, mergedConfig.settings, filters ]; From 4a92a7260a0530d9e79150203a7e9eaf69ed835d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Apr 2023 09:21:25 +0200 Subject: [PATCH 02/10] Add a not CSS selector to target the default block variation --- lib/class-wp-theme-json-gutenberg.php | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 7b279229fe4d7c..40d3221753333c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1114,7 +1114,18 @@ public function get_custom_css() { foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) { $custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) ); if ( $custom_variation_css ) { - $selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; + if ( 'default' === $variation_name ) { + // The default variation is the one that doesn't have a class. + // If the default variation is selected, the class .is-style-default is missing. + // We need to add a ':not' selector to the selector to target the default variation. + $not_selector = ''; + foreach ( static::$blocks_metadata[ $name ]['styleVariations'] as $not_style_variation_name => $node ) { + $not_selector .= ':not(.is-style-' . $not_style_variation_name . ')'; + } + $selector = static::$blocks_metadata[ $name ]['selector'] . $not_selector . ',' . static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; + } else { + $selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; + } $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $selector ); } } From 1413f494a9999465a7524d44f9d4f6ffe429ba59 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Apr 2023 12:11:24 +0200 Subject: [PATCH 03/10] Update the name of the styles array --- .../components/global-styles/use-global-styles-output.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index cb88bad02af4f1..c2feb66258bc99 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -1168,11 +1168,11 @@ export function useGlobalStylesOutput() { // Loop through the elements to check if there are custom CSS values. // If there are, push the selector together with - // the CSS value to the 'stylesheets' array. + // the CSS value to the 'styles' array. Object.entries( ELEMENTS ).forEach( ( element ) => { const [ name, elementsSelector ] = element; if ( mergedConfig.styles.elements[ name ]?.css ) { - stylesheets.push( { + styles.push( { css: processCSSNesting( mergedConfig.styles.elements[ name ]?.css, elementsSelector @@ -1184,7 +1184,7 @@ export function useGlobalStylesOutput() { // Loop through the blocks to check if there are custom CSS values. // If there are, get the block selector and push the selector together with - // the CSS value to the 'stylesheets' array. + // the CSS value to the 'styles' array. getBlockTypes().forEach( ( blockType ) => { if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) { const selector = blockSelectors[ blockType.name ].selector; @@ -1206,7 +1206,7 @@ export function useGlobalStylesOutput() { const variationSelector = blockSelectors[ blockType.name ] .styleVariationSelectors[ variation[ 0 ] ]; - stylesheets.push( { + styles.push( { css: processCSSNesting( variation[ 1 ].css, variationSelector From afb55a2b2ff3772ff42672d2e8466e4ce52437e6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 21 Apr 2023 11:53:38 +0200 Subject: [PATCH 04/10] try a UI for block style variation CSS --- .../components/global-styles/context-menu.js | 30 +++++++++++++++---- .../components/global-styles/screen-css.js | 30 ++++++++++++------- .../src/components/global-styles/ui.js | 2 +- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js index dca571881cd4e5..218a27bcba9375 100644 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ b/packages/edit-site/src/components/global-styles/context-menu.js @@ -75,6 +75,9 @@ function ContextMenu( { name, parentMenu = '' } ) { parentMenu.includes( 'blocks' ) && ! parentMenu.includes( 'variations' ); + const isVariationsPanel = + parentMenu.includes( 'blocks' ) && parentMenu.includes( 'variations' ); + return ( <> @@ -135,23 +138,38 @@ function ContextMenu( { name, parentMenu = '' } ) { { hasVariationsPanel && ( ) } - { isBlocksPanel && canEditCSS && ( + { ( isBlocksPanel || isVariationsPanel ) && canEditCSS && ( <> - { __( - 'Add your own CSS to customize the block appearance.' - ) } + { isVariationsPanel && + __( + 'Add your own CSS to customize the style variation.' + ) } + { isBlocksPanel && + __( + 'Add your own CSS to customize the block appearance.' + ) } - { __( 'Additional block CSS' ) } + { !! isVariationsPanel + ? __( + 'Additional style variation CSS' + ) + : __( 'Additional block CSS' ) }
- +
); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index b2f3da2306a1d0..1232309a944890 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -225,7 +225,7 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { - + { !! blockStyleVariations?.length && ( From ea2f63aba328386208cc3376cde4d03bfabefc2a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 8 May 2023 09:04:28 +0200 Subject: [PATCH 05/10] Try to reduce merge conflicts --- .../components/global-styles/screen-css.js | 52 ++++++++----------- .../src/components/global-styles/ui.js | 2 +- 2 files changed, 22 insertions(+), 32 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js index 474472a11a8070..50aae836ffa1c3 100644 --- a/packages/edit-site/src/components/global-styles/screen-css.js +++ b/packages/edit-site/src/components/global-styles/screen-css.js @@ -1,44 +1,30 @@ /** * WordPress dependencies */ -import { sprintf, __ } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { ExternalLink } from '@wordpress/components'; -import { getBlockType } from '@wordpress/blocks'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ +import { unlock } from '../../private-apis'; import ScreenHeader from './header'; -import CustomCSSControl from './custom-css'; -function ScreenCSS( { name, variation } ) { - // If name is defined, we are customizing CSS at the block level. - // Display the block title in the description. - const blockType = getBlockType( name ); +const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock( + blockEditorPrivateApis +); - const title = variation - ? sprintf( - // translators: %1$s: is the name of a block e.g., 'Image' or 'Table'. %2$s: is the name of a block variation e.g., 'Rounded' or 'Outline'. - __( - 'Add your own CSS to customize the appearance of the %1$s block when using the %2$s variation.' - ), - blockType?.title, - variation - ) - : sprintf( - // translators: %s: is the name of a block e.g., 'Image' or 'Table'. - __( - 'Add your own CSS to customize the appearance of the %s block.' - ), - blockType?.title - ); - - const description = - title !== undefined - ? title - : __( - 'Add your own CSS to customize the appearance and layout of your site.' - ); +function ScreenCSS() { + const description = __( + 'Add your own CSS to customize the appearance and layout of your site.' + ); + const [ style ] = useGlobalStyle( '', undefined, 'user', { + shouldDecodeEncode: false, + } ); + const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', { + shouldDecodeEncode: false, + } ); return ( <> @@ -57,7 +43,11 @@ function ScreenCSS( { name, variation } ) { } />
- +
); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 367498c2a4c034..6cfcc5ada2e1db 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -226,7 +226,7 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { - + { !! blockStyleVariations?.length && ( From c60591655f0a5a4a7026669ea4ff998b16fe9702 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 8 May 2023 09:08:32 +0200 Subject: [PATCH 06/10] revert context-menu.js --- .../components/global-styles/context-menu.js | 30 ++++--------------- 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js index 218a27bcba9375..dca571881cd4e5 100644 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ b/packages/edit-site/src/components/global-styles/context-menu.js @@ -75,9 +75,6 @@ function ContextMenu( { name, parentMenu = '' } ) { parentMenu.includes( 'blocks' ) && ! parentMenu.includes( 'variations' ); - const isVariationsPanel = - parentMenu.includes( 'blocks' ) && parentMenu.includes( 'variations' ); - return ( <> @@ -138,38 +135,23 @@ function ContextMenu( { name, parentMenu = '' } ) { { hasVariationsPanel && ( ) } - { ( isBlocksPanel || isVariationsPanel ) && canEditCSS && ( + { isBlocksPanel && canEditCSS && ( <> - { isVariationsPanel && - __( - 'Add your own CSS to customize the style variation.' - ) } - { isBlocksPanel && - __( - 'Add your own CSS to customize the block appearance.' - ) } + { __( + 'Add your own CSS to customize the block appearance.' + ) } - { !! isVariationsPanel - ? __( - 'Additional style variation CSS' - ) - : __( 'Additional block CSS' ) } + { __( 'Additional block CSS' ) } Date: Fri, 26 May 2023 13:51:54 +0200 Subject: [PATCH 07/10] Update class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 421cf3e24fd64b..e3a211f27fae07 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1157,23 +1157,16 @@ public function get_custom_css() { foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) { $custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) ); if ( $custom_block_css ) { - $selector = static::$blocks_metadata[ $name ]['selector']; + // Add the block selector and the .is-style-default style variation class. + $selector = static::$blocks_metadata[ $name ]['selector'] . ', ' . static::$blocks_metadata[ $name ]['styleVariations']['default']; $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); } if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) { foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) { $custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) ); if ( $custom_variation_css ) { - if ( 'default' === $variation_name ) { - // The default variation is the one that doesn't have a class. - // If the default variation is selected, the class .is-style-default is missing. - // We need to add a ':not' selector to the selector to target the default variation. - $not_selector = ''; - foreach ( static::$blocks_metadata[ $name ]['styleVariations'] as $not_style_variation_name => $node ) { - $not_selector .= ':not(.is-style-' . $not_style_variation_name . ')'; - } - $selector = static::$blocks_metadata[ $name ]['selector'] . $not_selector . ',' . static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; - } else { + // Add the variation selectors, excluding the default variation. + if ( 'default' != $variation_name ) { $selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; } $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $selector ); From 720ec7fbe539d39fd822d718e9a17646960347fb Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 26 May 2023 15:10:32 +0200 Subject: [PATCH 08/10] Don't include default variation styles added by theme.json --- lib/class-wp-theme-json-gutenberg.php | 8 +++----- .../components/global-styles/use-global-styles-output.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index e3a211f27fae07..74a5b6f9eab6d5 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1164,12 +1164,10 @@ public function get_custom_css() { if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) { foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) { $custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) ); - if ( $custom_variation_css ) { + if ( $custom_variation_css && 'default' !== $variation_name ) { // Add the variation selectors, excluding the default variation. - if ( 'default' != $variation_name ) { - $selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; - } - $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $selector ); + $variation_selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; + $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $variation_selector ); } } } diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 1e352bbcdafb9f..75ab0ea0c0171f 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -1210,7 +1210,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { Object.entries( mergedConfig.styles.blocks[ blockType.name ]?.variations ).forEach( ( variation ) => { - if ( variation[ 1 ].css ) { + if ( variation[ 1 ].css && 'default' !== variation[ 0 ] ) { const variationSelector = blockSelectors[ blockType.name ] .styleVariationSelectors[ variation[ 0 ] ]; From 313320a0d42568ab0e28d9e632ca6da94b26605a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 26 May 2023 15:19:26 +0200 Subject: [PATCH 09/10] Update class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 74a5b6f9eab6d5..22d65ec48d4011 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1164,10 +1164,10 @@ public function get_custom_css() { if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) { foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) { $custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) ); - if ( $custom_variation_css && 'default' !== $variation_name ) { + if ( $custom_variation_css && 'default' !== $variation_name ) { // Add the variation selectors, excluding the default variation. $variation_selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ]; - $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $variation_selector ); + $stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $variation_selector ); } } } From f08f42206255b89460123dc4fa5f85023f662a37 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 26 May 2023 15:45:54 +0200 Subject: [PATCH 10/10] Update class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 22d65ec48d4011..de11f6fafe0010 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1157,9 +1157,16 @@ public function get_custom_css() { foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) { $custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) ); if ( $custom_block_css ) { - // Add the block selector and the .is-style-default style variation class. - $selector = static::$blocks_metadata[ $name ]['selector'] . ', ' . static::$blocks_metadata[ $name ]['styleVariations']['default']; - $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); + // Only use the class for the default style variation if the block has style variations. + if ( isset( static::$blocks_metadata[ $name ]['styleVariations'] ) ) { + // Add the block selector and the .is-style-default style variation class. + $selector = static::$blocks_metadata[ $name ]['selector'] . ', ' . static::$blocks_metadata[ $name ]['styleVariations']['default']; + $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); + } else { + // Add the block selector. + $selector = static::$blocks_metadata[ $name ]['selector']; + $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); + } } if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) { foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) {