Skip to content

Commit

Permalink
Refactor to use :has() selector.
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
danielwrobert committed Sep 9, 2022
1 parent ad9d391 commit 4fab27f
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion inc/customizer/class-storefront-customizer.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 4fab27f

Please sign in to comment.