Repository navigation
Classic themes and appearance-tools issues and blockers #56131
Description
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?)
Activity
andrewserong commentedon Nov 15, 2023
@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-toolsfeature in Classic themes, in case that helps us hone in on resolving blockers. Apologies if there are prior issues already covering these topics!tellthemachines commentedon Nov 15, 2023
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 commentedon Nov 15, 2023
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 commentedon Nov 15, 2023
I also don't think the two panels is a problem, and does not need to be a priority.
andrewserong commentedon Nov 15, 2023
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 commentedon Nov 27, 2023
Tiny update:
This issue has been resolved by #56536
andrewserong commentedon Dec 5, 2023
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 commentedon Dec 5, 2023
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 commentedon Dec 5, 2023
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 commentedon Dec 5, 2023
Hi @NIC-V8M
This repository is not for support.
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 commentedon Dec 5, 2023
Thank
Thank you for your help!
sabernhardt commentedon Dec 13, 2023
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 commentedon Dec 19, 2023
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?1 remaining item
tellthemachines commentedon Dec 19, 2023
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 commentedon Dec 19, 2023
Great, sounds worth pursuing then!
tellthemachines commentedon Dec 19, 2023
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 commentedon Dec 19, 2023
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 commentedon Dec 20, 2023
Given that most of these issues are now fixed, I opened a new Trac ticket to reenable appearance-tools support in core.
tellthemachines commentedon Jan 11, 2024
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 commentedon Jan 11, 2024
Amazing work, folks 👏🏼
getdave commentedon Jan 18, 2024
👋 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 commentedon Jan 18, 2024
@getdave correct, and all related PHP changes are already in core.
tellthemachines commentedon Feb 19, 2024
Dev note:
Support for Appearance Tools in classic themes
Appearance tools is a collection of design tools for editing blocks. It includes:
When appearance tools are enabled, these controls will be made available in blocks that support them.
In block themes,
appearanceToolscan be enabled in theme.json settings. And as of WP 6.5, they can be enabled in classic themes without theme.json viaadd_theme_support( ‘appearance-tools’).If the theme also defines an
editor-color-palette, that palette will be used for border color.