From bd1346b843c856c471fb08928c98184719d8cbb5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 25 Oct 2023 12:48:02 +0200 Subject: [PATCH 1/3] Allow CSS under theme.json styles.elements --- lib/class-wp-theme-json-gutenberg.php | 11 +++++++++++ .../global-styles/use-global-styles-output.js | 18 +++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8c2857fa89d0c..c512fa67218fd 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1178,6 +1178,17 @@ public function get_custom_css() { // Add the global styles root CSS. $stylesheet = $this->theme_json['styles']['css'] ?? ''; + // Add the global styles elements 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 ) { 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 7e99eca355b52..685396530df3d 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 @@ -1230,9 +1230,25 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { }, ]; + // 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 'styles' array. + Object.entries( ELEMENTS ).forEach( ( element ) => { + const [ name, elementsSelector ] = element; + if ( mergedConfig.styles.elements[ name ]?.css ) { + styles.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. + // the CSS value to the 'styles' array. getBlockTypes().forEach( ( blockType ) => { if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) { const selector = blockSelectors[ blockType.name ].selector; From e5f624ed4898efc289fc78665017859c96ee5211 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 17 Nov 2023 09:49:15 +0100 Subject: [PATCH 2/3] Update lib/class-wp-theme-json-gutenberg.php Co-authored-by: Ari Stathopoulos --- lib/class-wp-theme-json-gutenberg.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index c512fa67218fd..4170a41c610db 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1181,7 +1181,9 @@ public function get_custom_css() { // Add the global styles elements 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' ) ); + $custom_element_css = isset( $this->theme_json['styles']['elements'][ $element ]['css'] ) + ? $this->theme_json['styles']['elements'][ $element ]['css'] + : null; if ( $custom_element_css ) { $selector = static::ELEMENTS[ $element ]; $stylesheet .= $this->process_blocks_custom_css( $custom_element_css, $selector ); From 6916b9332a8a7bf155a78d0be4b4e15d1c997d12 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 5 Mar 2024 13:18:37 +0100 Subject: [PATCH 3/3] Update the elements CSS to use the block_nodes array. Remove the unused stylesheet variable in get_block_custom_css_nodes() and use the block_nodes array. --- lib/class-wp-theme-json-gutenberg.php | 29 +++++++++++++++------------ 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 88c1de0e4b76a..5aa05e1867336 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1327,19 +1327,6 @@ public function get_base_custom_css() { public function get_block_custom_css_nodes() { $block_nodes = array(); - // Add the global styles elements CSS. - if ( isset( $this->theme_json['styles']['elements'] ) ) { - foreach ( $this->theme_json['styles']['elements'] as $element => $node ) { - $custom_element_css = isset( $this->theme_json['styles']['elements'][ $element ]['css'] ) - ? $this->theme_json['styles']['elements'][ $element ]['css'] - : null; - 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 ) { @@ -1356,6 +1343,22 @@ public function get_block_custom_css_nodes() { } } + // Add the global styles elements CSS. + if ( isset( $this->theme_json['styles']['elements'] ) ) { + foreach ( $this->theme_json['styles']['elements'] as $element => $node ) { + $custom_element_css = isset( $this->theme_json['styles']['elements'][ $element ]['css'] ) + ? $this->theme_json['styles']['elements'][ $element ]['css'] + : null; + if ( $custom_element_css ) { + $block_nodes[] = array( + 'name' => $element, + 'selector' => static::ELEMENTS[ $element ], + 'css' => $custom_element_css, + ); + } + } + } + return $block_nodes; }