From 4fab27fec5e757f744f1a3ed10c120a86ed9c602 Mon Sep 17 00:00:00 2001 From: "Daniel W. Robert" Date: Fri, 9 Sep 2022 15:14:44 -0400 Subject: [PATCH] Refactor to use :has() selector. Instead of directly targeting the Featured Items blocks, we can use the `:has()` selector to omit blocks that contain a child div with the `has-background-dim` class in the editor. Since browser support is not to where we need at the time of publishing this, we can also add a temp fallback with `@supports`. --- inc/customizer/class-storefront-customizer.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/inc/customizer/class-storefront-customizer.php b/inc/customizer/class-storefront-customizer.php index 2b00f6299..e4e5aa2dd 100644 --- a/inc/customizer/class-storefront-customizer.php +++ b/inc/customizer/class-storefront-customizer.php @@ -1254,9 +1254,15 @@ public function block_editor_customizer_css() { /* WP <=5.3 */ .editor-styles-wrapper .editor-block-list__block, /* WP >=5.4 */ - .editor-styles-wrapper .block-editor-block-list__block:not(.wp-block-woocommerce-featured-product):not(.wp-block-woocommerce-featured-category) { + .editor-styles-wrapper .block-editor-block-list__block:not(:has(div.has-background-dim)) { color: ' . $storefront_theme_mods['text_color'] . '; } + /* This following ruleset is a fallback for browsers that do not support the :has() selector. It can be removed once support reaches our requirements. */ + @supports not (selector(:has(*))) { + .editor-styles-wrapper .block-editor-block-list__block:not(.wp-block-woocommerce-featured-product, .wp-block-woocommerce-featured-category) { + color: ' . $storefront_theme_mods['text_color'] . '; + } + } .editor-styles-wrapper a, .wp-block-freeform.block-library-rich-text__tinymce a {