Blockbase: Fix previewing post editor colors from style variations in child themes

[adamwoodnz]

Fixes #6963

Changes proposed in this Pull Request:

This PR removes the !important from the fallback color rules in the Blockbase stylesheet. The actual colors are defined in theme.json and generated in global styles, and these !important fallbacks cause problems in child themes with style variations loaded, when previewing colors in the post editor. The issue was raised referencing the Attar theme, but it is reproducible with other Blockbase child themes, like Ames.

Please note that these rules do not cause the same issues when the Blockbase theme itself is activated, or in the site editor, or on the frontend.

With a child theme like Attar activated and a style variation selected, the Blockbase theme styles are inlined in the post editor document after the style variation styles, overriding them and causing the color to be set to the Blockbase theme default custom colors:

Lowering the specificity of these rules allows the correct color presets generated from the style variation to be used, as expected.

An alternative fix could be to adjust the loading order, so that the Blockbase stylesheet is inlined before the global styles. I'm not aware of this happening with other non Blockbase themes however.

Screenshots (Theme: Attar, Style variation: Charcoal)

	Before	After
Text
Button

Testing

We need to test both the Blockbase theme and child themes.

1. Activate the Attar theme
2. Under Appearance -> Editor -> Styles, select a style variation and save
3. Edit a post, changing the color of elements using colors from the color palette (should be the colors from the style variation)
4. Observe that the colors are applied in the post editor preview
5. Save and check that the post on the frontend matches the post editor preview
6. Return to the admin and use the site editor to edit a page or template, changing colors
7. Observe that the colors are applied in the site editor preview
8. Save and check that the page on the frontend matches the site editor preview
9. Activate the Blockbase theme and repeat steps 2 - 8

Further regression testing:

• Activate other child themes and repeat steps 2 - 8
• Repeat steps 3 - 8 with Blockbase or a child theme, and no style variation selected

[github-actions]

Preview changes

I've detected changes to the following themes in this PR: Blockbase.
You can preview these changes by following the links below:

• Preview changes for Blockbase

I will update this comment with the latest preview links as you push more changes to this PR.

Note

The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[github-actions]

Theme-Check results

blockbase: No changes required ✅.

💡 RECOMMENDED (1)

• Possible variable $header_pattern found in translation function in inc/block-patterns.php. Translation function calls must not contain PHP variables, use placeholders instead. See Internationalization Guidelines (Opens in a new window). Line 39: $header_patterns = array(Line 48: foreach ( $header_patterns as $header_pattern ) {Line 50: 'blockbase/header-' . $header_pattern,Line 52: 'title' => __( 'Blockbase Header (' . $header_pattern . ')', 'blockbase' ),Line 55: 'content' => file_get_contents (get_theme_file_path( '/parts/header-' . $header_pattern . '.html' )),

⚠️ WARNING (4)

• screenshot.png is 555.6 KB in size. Large file sizes have a negative impact on website performance and loading time. Compress images before using them.
• Found a translation function that has an incorrect number of arguments in the file inc/block-patterns.php. Function __, with the arguments 'Blockbase Header (', ), 'blockbase'. Line 52: 'title' => __( 'Blockbase Header (' . $header_pattern . ')', 'blockbase' ),
• Found a translation function that is missing a text-domain in the file inc/customizer/wp-customize-fonts.php. Function __, with the arguments 'https://wordpress.com/support/custom-fonts/'. Line 13: __( 'https://wordpress.com/support/custom-fonts/' )
• More than one text-domain is being used in this theme. This means the theme will not be compatible with WordPress.org language packs. The domains found are blockbase, ).

---

[mikachan]

These changes fix the issue described in #6963 for me, and I agree with this reasoning:

Lowering the specificity of these rules allows the correct color presets generated from the style variation to be used, as expected.

LGTM 👍