Bundled themes: opt-in to appearance tools

[jffng]

Core themes are not getting the latest design tools in the editor because they require the theme to opt in.

Previously it was only possible to opt-in via a setting in theme.json, but a theme support check was recently added: ​https://github.com/WordPress/gutenberg/pull/43337.

I think we should add this theme support to bundled themes:

add_theme_support( 'appearance-tools' );

This will allow themes to use editor features like setting the border styles and spacing, as well future enhancements. I am not sure how far back we should go, but I think at least TT1 and TT.

Trac ticket: https://core.trac.wordpress.org/ticket/56487

[poena]

What testing is needed to approve this PR?

First, I think this would be easier to test, and give us more time to test, if the new theme support could be back ported from Gutenberg to core as early as possible.
@bernhard-reiter

How can we notify contributors to this ticket, when the theme support is available for testing?

I am mostly wondering about possibly conflicting CSS that is already in the themes,
Are there conflicts that are considered acceptable?

I also expect that this PR would solve other reported bundled theme issues:
https://core.trac.wordpress.org/ticket/56075

[poena]

I am testing with 6.1-alpha-54269 since the beta was delayed, and the theme support is not available. Is ​https://github.com/WordPress/gutenberg/pull/43337 not going to be in 6.1?

[jffng]

Hmm, it looks like the PR was not backported, cc @pbking.

Since the actual features this flag enables are already included in Core, could it be included in time for the next beta?

[pbking]

Commented on the github issue: ​https://github.com/WordPress/gutenberg/pull/43337):

We found that, mostly due to the fact that this enables block gap in layout blocks with a default value that the spacing and padding of all of the themes changed due to enabling this feature. As far as I know/understand there's no way to limit what features are enabled and since that feature effects a site without user action makes it feel like a dangerous option to use.

I'm hesitant recommending that we enable this feature on core bundled themes; at least not without careful evaluation of each when it's enabled. A better scenario would be more fine-grained control of the features... adding a theme.json file would be the tool for that job (but that also causes layout changes to a theme which is why the theme_support option was explored).

We could maybe get this in, but I think any theme that enables this should have some careful evaluation and maybe the timing isn't great.

[poena]

A problem is that since 5.9, the link color option is not available at all for non FSE themes, and this causes a regression in themes that enabled the now removed link color theme support including TT1.
This feature would re-enable the link color setting and solve that regression.

[hellofromTonya]

Could this go into 6.1? ​The backport that enabled the theme support within Core is marked as a feature. This ticket is marked as an enhancement. 6.1 is in feature freeze, meaning no new features or enhancements.

Could the backport and this ticket be reclassified to deal with the regression? I defer that decision to the 6.1 Core Tech Leads @davidbaumwald @mikeschroder @jeffpaul.

[poena]

I don't think that there has been enough time to test the feature with the default themes.
What @pbking pbking mentioned about the spacing is absolutely a concern.

My preference would be to:
Add the theme_support itself as a WordPress feature in 6.1.
Punt the adding of the theme_support in the default themes to a future release, to allow testing (this ticket).

[davidbaumwald]

@hellofromTonya Thanks for the ping. In reading the discussion above it seems that testing is needed for each theme before adding the support. I really respect @poena's opinion as she's much more plugged in to FSE development.

Moving this to 6.2.

[JeffPaul]

I would be curious, too, if adding the theme_support in 6.1 and fixing this for TT1 as the most recent non-FSE theme might be sufficient to resolve the regression here in 6.1?

[priethor]

Replying to hellofromTonya:

Could this go into 6.1? ​The backport that enabled the theme support within Core is marked as a feature. This ticket is marked as an enhancement. 6.1 is in feature freeze, meaning no new features or enhancements.

Could the backport and this ticket be reclassified to deal with the regression? I defer that decision to the 6.1 Core Tech Leads @davidbaumwald @mikeschroder @jeffpaul.

I also think this would be a good path forward. The goal is not to add new functionality at this stage but to fix the missing functionality that is causing the regressions @poena mentions above. Let's reconsider the original labeling of the ticket; we are in the Beta period, and fixing these regressions seem in place.

[costdev]

Genuine question, as I'm unaware of the full extent of potential regressions:

Which is worse?

1. Potential regressions in bundled themes if this is done now and testing turns out to be insufficient. (2¢: Punt)
2. The known regression since 5.9. (2¢: Reclassify)

[priethor]

Closing the loop here with the ​outcome of the discussion on the Slack 6.1 release channel as shared by @annezazu:

After some testing by a few themers this week across the project, it’s clear though that more testing is needed and it’s best to punt this effort to 6.2. This is because, while it might fix some known regressions, it also is likely to open up many more at this point without more testing.

[SergeyBiryukov]

#56891 was marked as a duplicate.

[audrasjb]

FWIW, Appearance tools are now available for Classic Themes [55067].

[poena]

These are the new block settings that need to be tested so that they do not conflict with the theme css:

• border: color, radius, style, width
• color: link
  • TT1: During testing I found problems with the links, already reported in #56075.

• spacing:
  • blockGap: TT & TT1: Both themes have problems with block gap for the standard group block both in the editor and front. Block gap works well with group block row and stack variations, buttons, columns and navigation blocks.

• margin *Already supported in TT1 but not in TT
• padding. *Already supported in TT1 but not in TT

• typography:
  • lineHeight *Already supported in TT1 but not in TT

Issues reported upstream:
Post terms link color ​https://github.com/WordPress/gutenberg/issues/47233
Media & Text block link color: ​https://github.com/WordPress/gutenberg/issues/47209

[poena]

Block Gap Testing Instructions

With WordPress 6.2 alpha:
Enable the appearance-tools theme support in your test theme.
In the block editor, add a group block with three paragraphs.
In the Dimensions panel in the block settings sidebar, set block spacing to seven.
Take note if the space between the paragraphs changes.
Save and view the space on the front.

Testing results:

In emptytheme (block theme), the block gap correctly increases the spacing.

CSS applied to paragraph one:

.wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

CSS applied to paragraph two:

.wp-block-group.wp-container-1.wp-block-group.wp-container-1 > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
	margin-block-end: 0;
}

CSS applied to paragraph three:

.wp-block-group.wp-container-1.wp-block-group.wp-container-1 > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
	margin-block-end: 0;
}

Twenty Twenty: The block gap does not work on the default group.
CSS applied to the inner container:

wp-block-group.wp-container-2 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

Paragraph one, Paragraph two, Paragraph three:
No wp-container-2 CSS is applied.

Twenty Twenty-One: The block gap does not work on the default group.
CSS applied to the inner container:

wp-block-group.wp-container-2 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

Paragraph one, Paragraph two, Paragraph three:
No wp-container-2 CSS is applied.

Twenty Sixteen ( tested for comparison )
CSS applied to the inner container:

wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

Paragraph one, Paragraph two, Paragraph three:
No wp-container-1 CSS is applied.

Hello Elementor ( tested for comparison ): The block gap does not work on the default group.
CSS applied to the inner container:

wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

Paragraph one, Paragraph two, Paragraph three:
No wp-container-1 CSS is applied.

Conclusion

The broken block gap for the default group block is not a problem with the themes, but with the block gap not supporting the old format of the group block which has the inner container.
​Upstream issue

[poena]

Border colors testing instructions

With WordPress 6.2 alpha:
First, enable the appearance-tools theme support in your test theme.

The following blocks have support for border:
Table, Search, Read More, Pullquote, Post Featured Image
Image, Group, Comments Title, Columns, Column, Code, Avatar
Partial support: Button

Create a new post and add one each of these blocks, or
copy paste the sample content below (you will need to replace the images)

<!-- wp:table {"style":{"border":{"color":"#f7b5f9","style":"dotted","width":"7px"}}} -->
<figure class="wp-block-table"><table class="has-border-color" style="border-color:#f7b5f9;border-style:dotted;border-width:7px"><tbody><tr><td>table cell 1</td><td>table cell 2</td></tr><tr><td>table cell 3</td><td>table cell 4</td></tr></tbody></table><figcaption class="wp-element-caption">this border should be dotted and have a pink custom color</figcaption></figure>
<!-- /wp:table -->

<!-- wp:table {"style":{"border":{"style":"dashed","width":"7px"}},"borderColor":"accent"} -->
<figure class="wp-block-table"><table class="has-border-color has-accent-border-color" style="border-style:dashed;border-width:7px"><tbody><tr><td>table cell 1</td><td>table cell 2</td></tr><tr><td>table cell 3</td><td>table cell 4</td></tr></tbody></table><figcaption class="wp-element-caption">this border should be dashed and have the red accent color in twenty twenty.</figcaption></figure>
<!-- /wp:table -->

<!-- wp:search {"label":"This border should be applied to the input and button separately, and have the red accent color in Twenty Twenty, be 6px wide and have a border radius of 5px","buttonText":"Search","style":{"border":{"width":"6px","radius":"5px"}},"borderColor":"accent"} /-->

<!-- wp:read-more {"content":"This is the read more block with a custom text. It should have a dark grey 1px solid border with a border radius of 50px.","style":{"border":{"radius":"50px","width":"1px"}},"borderColor":"secondary"} /-->

<!-- wp:pullquote {"style":{"border":{"radius":"4em","width":"2px","style":"dotted"}},"borderColor":"primary"} -->
<figure class="wp-block-pullquote has-border-color has-primary-border-color" style="border-style:dotted;border-width:2px;border-radius:4em"><blockquote><p>This pull quote should have a black 2px dotted border with a border radius of 1 rem.</p><cite>Citation</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>This image should have a solid 10 px custom light blue border</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2075,"sizeSlug":"full","linkDestination":"none","style":{"border":{"color":"#b5cbe6","width":"10px"}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://localhost:10013/wp-content/uploads/2023/01/wapuu-themes-by-carolina-baloon-250-1.png" alt="" class="has-border-color wp-image-2075" style="border-color:#b5cbe6;border-width:10px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This featured image should have a solid 10 px custom light blue border</p>
<!-- /wp:paragraph -->

<!-- wp:post-featured-image {"style":{"border":{"color":"#aadaf7","width":"10px","radius":"4px"}}} /-->

<!-- wp:group {"style":{"border":{"width":"1px","radius":"8px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-width:1px;border-radius:8px"><!-- wp:paragraph -->
<p>Group block with paragraph inside. 1px solid black, 8px border radius</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"1px","color":"var:preset|color|primary"},"bottom":{"width":"0px","style":"none"},"left":{"width":"1px","color":"var:preset|color|primary"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-style:none;border-top-width:0px;border-right-color:var(--wp--preset--color--primary);border-right-width:1px;border-bottom-style:none;border-bottom-width:0px;border-left-color:var(--wp--preset--color--primary);border-left-width:1px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Group block with centered paragraph inside.<br>1px solid black on left and right.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>The outer columns block should have a solid 10px grey border ( the color "subtle background" in Twenty Twenty) . The middle column has its own border:</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"style":{"border":{"width":"10px"}},"borderColor":"subtle-background"} -->
<div class="wp-block-columns has-border-color has-subtle-background-border-color" style="border-width:10px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>column 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"border":{"width":"3px","style":"solid"}},"borderColor":"primary"} -->
<div class="wp-block-column has-border-color has-primary-border-color" style="border-style:solid;border-width:3px"><!-- wp:paragraph -->
<p>column 2 with 3px solid border</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>column 3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:code {"style":{"border":{"color":"#30cb57","width":"1.5em"}}} -->
<pre class="wp-block-code has-border-color" style="border-color:#30cb57;border-width:1.5em"><code>This code block has a border by default. The setting should override it with: Solid green 1.5 em.</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This avatar block has a solid 14 px dark blue with a border radius of 2 em. Except for the bottom border that should be 2px.</p>
<!-- /wp:paragraph -->

<!-- wp:avatar {"style":{"border":{"radius":"2em","top":{"color":"var:preset|color|primary","width":"14px"},"right":{"radius":"2em","color":"#2138bb","width":"14px"},"bottom":{"radius":"2em","color":"#2138bb","width":"2px"},"left":{"radius":"2em","color":"#2138bb","width":"14px"}}}} /-->

<!-- wp:paragraph -->
<p>Twenty Twenty buttons has no border radius by default. The setting should override it:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"4px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:4px">Button one 4px</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"border":{"radius":"40px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:40px">Button two 40px</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Test results

Twenty Twenty:

Table -Works on the front. In the editor, the color is not applied.
Search -Works in the editor. On the front, the wrong color is used on the input field, the correct color is used on the submit button.
Read More -Works well.
Pullquote -Works well
Post Featured Image -Works in the editor. No border is visible on the front. The border width and color is present inline in the style attribute, but there is no border style.
Image -Works well
Group -Works well
Comments Title
Column and column -Works in the editor. On the front, the borders have the wrong colors.
Code -Works well
Avatar -Works in the editor but on the front, only the border radius is applied. The border style, color and width are also not in the style attribute. The wrapper is missing a "has-border-x" CSS class.
Button -works well

Twenty Twenty-One

Update: Only custom colors are working. Not palette colors.
Same issues with post featured image and avatar as in Twenty Twenty.

Emptytheme (block theme), tested for comparison:
The post featured image works on the front because of this style:

html :where([style*=border-width]) {
    border-style: solid;
}

Avatar -As in Twenty Twenty, on the front only the border-radius is applied.

Conclusion

There are minor issues in both themes, that should be tested further and addressed in the theme.

In both themes, there is an img border:none style on the featured image that has a higher specificity than the border style that the block library outputs.

The image and featured image blocks are missing the border style control
which should be available in the border panel in the editor. ​Upstream issue

​Avatar upstream issue.

[poena]

Twenty Twenty Add border color support

[poena]

In patch 56487-tt-border I have updated the following in Twenty Twenty:

• Added the has-color-name-border-color classes for the palette colors.
• Added a border style to the featured image. This is a temporary fix because it is not likely that the bug behind it will be solved upstream for 6.2
• Changed the specificity of the table borders, to make sure the theme styles are not overwritten by the block library.

Testing instructions:

With WordPress 6.2 alpha:
Apply the patch.
Activate Twenty Twenty.
Please add the following blocks:

Featured image, with and without border.
Expected result: No border should be visible unless added via the block's border settings.

Table blocks without border color, with palette border color, and with custom border color.
Confirm that all colors work correctly in the editor.
Save and view the front: Confirm that the colors are correct and match the editor.

Next please open the Customizer and change the background color to black.
Confirm that the default border color has been adjusted.
Go back to the block editor.
Confirm that the default border color has been adjusted against the dark background color and matches the front.

Columns block: Please add one color to the columns, and another color to one of the inner column blocks.
Add some content to the columns as well, otherwise the borders are collapsed.

Confirm that both custom colors and palette colors work in the editor and front.
Expected result: The palette colors should be visible on the front (this is the fix :) ) and the editor and front should match.

[poena]

Twenty Twenty-One border colors

[poena]

In patch 56487-tt1-border I have updated the following in Twenty Twenty-One:
Added the has-color-name-border-color classes for the palette colors.
Added a border style to the featured image block.
The .scss files are built.

This patch can be tested using the same instructions as in comment 23.

[robinwpdeveloper]

Test Report

This report validates that the indicated patch doesn't address the issue.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/56487/56487-tt-border.diff

Environment

• OS: macOS 11.2.3
• Web Server: Nginx
• PHP: 7.4.30
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 109.0.5414.119
• Theme: Twenty Twenty
• Active Plugins:
  • No Plugins activated

Actual Results

Normal and Black background:
✅ Featured image (Editor and Frontend)
❌ Table Blocks (Editor - Not working; Frontend - Working)
✅ Columns (Editor and Frontend)

Additional Notes

• I wonder why column block contents are not well aligned (2 columns at first; Then add inner column to the first column) : ​https://d.pr/i/iKBvo2

Supplemental Artifacts

Featured Image and Table Blocks (Black Background):
Editor - ​https://d.pr/i/zOHI6o
Frontend - ​https://d.pr/i/oYx2eB

Columns (Black Background):
Editor - ​https://d.pr/i/vHAxKL
Frontend - ​https://d.pr/i/iKBvo2

[poena]

There is no resolution for the upstreams block gap issue, and since this update is an enhancement, we need to remove it from the 6.2 milestone.
I will also add the needs-refresh keyword based on the test result above.

[isabel_brison]

I just opened #60118 to add theme support for appearance tools back into core. Hopefully once that's addressed this ticket can be picked up again!

[karmatosed]

@poena I wanted to revisit this one now to see where it would be desirable to go. To recap:

• https://core.trac.wordpress.org/ticket/60118 is closed.

[poena]

I want this ticket to remain open. Enabling theme support for the bundled themes would be a big improvement for users and help make the older themes relevant.
In my opinion, the way to do it is to add theme support gradually. Work on borders has already started in #55974. The spacing is another area that would need a significant amount of testing.