Classic themes and appearance-tools issues and blockers

[andrewserong]

There have been a few efforts to enable appearance-tools in Classic themes, with work more recently explored in #47451 and #56130 to unblock this feature. This issue is to gather together to-do list items for points of friction, things to test, or things to resolve in order for the feature to feel stable and useful to use (and to be able to be made available in core). If there is already an issue that's tracking this, we can close this one out.

Tasks / points of friction

To test, add add_theme_support( 'appearance-tools' ); to a Classic theme.

• Block gap does not work for groups in classic themes #47386
• Extra wrapper on wide/full aligned blocks interferes with sticky position styles
• Background color in groups applies to inner container and overrides background image
• Extra spaces in the UI appear between color and background color controls for the Group block
• Border with preset color does not show correctly on site front end due to preset CSS for border not being output
• Duotone filters are empty in the inspector controls for Image and Cover blocks

Deprioritised issues (things noticed during testing but that aren't blockers)

• The Group block now has settings/styles tabs with the position controls on their own in settings (should they be grouped?)

PRs / WIPs

• Fix block gap in group blocks in classic themes #47451
• Add layout classes to legacy Group inner container #56130
• Design Tools: Fix last ToolsPanelItem styling #56536

[andrewserong]

@carolinan just a ping for visibility. I thought I'd write up a tracking issue just to capture some of the points of friction for the appearance-tools feature in Classic themes, in case that helps us hone in on resolving blockers. Apologies if there are prior issues already covering these topics!

[tellthemachines]

Thanks for writing this up @andrewserong !

One other thing I noticed is preset CSS for border color isn't being output, so if we add a border with a preset color it doesn't show the color correctly in the front end.

[carolinan]

I strongly recommend not testing this in the default themes, because they have known issues with conflicting CSS.
Instead test on theme that has no css, but a custom color palette.

[carolinan]

I also don't think the two panels is a problem, and does not need to be a priority.

[andrewserong]

Thanks for confirming @carolinan, that's helpful feedback! I've moved the two panels issue to a section in the issue description for deprioritised issues — that way if anyone else notices it we've got it recorded that it's not a blocker to proceeding 🙂

[andrewserong]

Tiny update:

Extra spaces in the UI appear between color and background color controls for the Group block

This issue has been resolved by #56536

[andrewserong]

Just noticed another point of friction while testing. Opting in to appearance tools enables the Duotone controls at the individual block level. That appears to be working fine for me when adjusting via the block toolbar, but there are not filters available, so the UI in the inspector sidebar appears empty for both the Image and Cover blocks:

As you can see, the toolbar version appears to work fine:

[tellthemachines]

That appears to be working fine for me when adjusting via the block toolbar, but there are not filters available, so the UI in the inspector sidebar appears empty for both the Image and Cover blocks

It would be nice if both toolbar and sidebar had the same UI 😄 perhaps the sidebar could optionally render same as toolbar if there are no filters defined?

[NIC-V8M]

I am new to this, so please forgive me if this is not the right 'thread.' I am having issues with the Block editor itself. I am forced to use the classic editor. the moment I start with the Block editor, it sends an error message: 'Updating failed. The response is not a valid JSON response.'. When I turn off Spectra, everything else does work. The only metric I can go off what might have happened was the WordPress update 2.5-3 weeks ago. Ever since then, I run into this issue.

On occurrence, I am unable to save it as a draft, so work that has been done is lost ( formatting in particular )

Please advise or refer me to the correct thread if needed. I would appreciate any help I can get. Thank you

[carolinan]

Hi @NIC-V8M
This repository is not for support.

When I turn off Spectra, everything else does work.

Please bring this up with the developers of Spectra, it sounds like it has not been updated to work with the latest WordPress version.

[NIC-V8M]

Thank

Hi @NIC-V8M This repository is not for support.

When I turn off Spectra, everything else does work.

Please bring this up with the developers of Spectra, it sounds like it has not been updated to work with the latest WordPress version.

Thank you for your help!

[sabernhardt]

recommend not testing this in the default themes

I disagree. Many other themes could have the same problems as Core's themes (Trac 56487 lists some). If you notice anything wrong, one theme's issues might not be a blocker for adding the support to other themes, but please determine why you can ignore it.

[tellthemachines]

Background color in groups applies to inner container and overrides background image

I did a bit of testing when working on #56743 and it seems like this is a theme-specific issue. TT1 has theme styles that make the background color apply to the inner container. If we wanted to add something to core to override this type of theme style when the container has a background image, we could potentially do something like [style*='background-image] [class*=__inner-container] { background-color: transparent }. I think there's a classic theme editor compat stylesheet somewhere that this could be added to. Would it be worth trying?

[andrewserong]

I think there's a classic theme editor compat stylesheet somewhere that this could be added to. Would it be worth trying?

One limitation is that one of the features of being able to set a background image is that it should also work with background color so that folks can use transparent background images (i.e. textures and so on such as from https://www.transparenttextures.com/) that intentionally expose the background color. So I'm not sure if setting the background-color to transparent will quite work, unless in the case of TT1, the outer wrapper's background color is still being applied, too? 🤔 (In which case, maybe it is worth trying!)

[tellthemachines]

unless in the case of TT1, the outer wrapper's background color is still being applied, too? 🤔 (In which case, maybe it is worth trying!)

The background color is still applied to the outer wrapper in TT1. I don't imagine any theme would want to change that, given that Rows and Stacks don't have an inner wrapper. In any case, even if the theme were only applying the background color to the inner container, transparent background images would still look broken because the color would be applied on top of them, which is worse than not having any color at all 😅

[andrewserong]

Great, sounds worth pursuing then!

[tellthemachines]

I looked into the background color issue a bit and there doesn't seem to be anywhere it can be added that will allow it to be output for classic themes only, on the editor and front end. The only option seems to be to add it in the block's style.scss, which isn't the best because it will then be output for all themes even if they don't need it (which the vast majority won't).

It might be better to leave this as a wontfix, especially because themes that do have custom styles should be responsible for ensuring their compatibility with appearance tools support.

[andrewserong]

It might be better to leave this as a wontfix, especially because themes that do have custom styles should be responsible for ensuring their compatibility with appearance tools support.

Sounds reasonable to me, we can add it as one of the many items for Classic themes to consider when opting in to appearance-tools 👍

[tellthemachines]

Given that most of these issues are now fixed, I opened a new Trac ticket to reenable appearance-tools support in core.

[tellthemachines]

All the sync PRs for the issues tracked here have been committed and appearance-tools support is now enabled in core trunk. I'm going to go ahead and close this issue. Thanks everyone!

[annezazu]

Amazing work, folks 👏🏼

[getdave]

👋 Hello team. As this Issue is closed can I assume the feature will make it into 6.5 as per the roadmap? Thanks in advance 🙏

[tellthemachines]

@getdave correct, and all related PHP changes are already in core.

[tellthemachines]

Dev note:

Support for Appearance Tools in classic themes

Appearance tools is a collection of design tools for editing blocks. It includes:

• Background image
• Background size
• Border color, radius, style and width
• Element colors: link, heading, button and caption
• Aspect ratio
• Minimum height
• Sticky position
• Block gap
• Margin
• Padding
• Line height

When appearance tools are enabled, these controls will be made available in blocks that support them.

In block themes, appearanceTools can be enabled in theme.json settings. And as of WP 6.5, they can be enabled in classic themes without theme.json via add_theme_support( ‘appearance-tools’).

If the theme also defines an editor-color-palette, that palette will be used for border color.