Add link color and border theme_support #47675

carolinan · 2023-02-02T07:59:42Z

What?

Updated February 8 2023.

The PR adds theme supports for link color and borders.

Why?

There is no way for themes to enabled these two features without theme.json (Theme.json can not be added to all classic themes without friction).
By using separate theme supports, theme developers can select which feature to support.
The default theme Twenty Twenty-One supported the previous link color theme support which was removed in 5.9. Following that, there have been bug reports on core trac about the link colors in the theme.

I have chosen to add all border settings as one theme support. This is different from how the settings in theme.json works.
In theme.json you enable the color, width, style and radius individually, please comment if you feel these should be separate theme supports.

Closes 41857
Alternative to 47451

Related:
core 57460 Backport: appearance-tools theme_support
core 56487 Bundled themes: opt-in to appearance tools

Testing Instructions

In your WordPress install, make sure that WP_DEBUG_DISPLAY, WP_DEBUG are set to true.
Activate Twenty Twenty-One.
You should see a doing it wrong message about experimental-link-color.
In your code editor, open functions.php in Twenty Twenty-One.
Around line 333, remove
add_theme_support( 'experimental-link-color' );

And add:

add_theme_support( 'link-color' );
add_theme_support( 'border' );

On refresh, the doing it wrong notice should no longer show.

Create a new post.
Add a group block with a paragraph inside. Add a link to the paragraph.
Confirm that the paragraph has a link color setting. Select a custom link color and confirm that it works.
(Palette colors will not work on the front, that is a separate issue)
Add a border to the group, test the different border style, width, and color. (select a custom color with the color picker)
and confirm that it works.

There are known bugs in Twenty Twenty-One that needs to be solved, you do not need to test them as part of this PR,
the main goal is to confirm that the controls are available.

carolinan · 2023-02-02T08:00:48Z

lib/class-wp-theme-json-resolver-gutenberg.php

@@ -323,6 +323,26 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 			if ( current_theme_supports( 'appearance-tools' ) ) {
 				$theme_support_data['settings']['appearanceTools'] = true;
 			}
+
+			// Allow themes to enable link colors via theme_support.
+			if ( current_theme_supports( 'link-color' ) ) {


I considered "being nice" and include the previous name, experimental-link-color in this condition.
What do you think?

carolinan · 2023-02-03T08:26:26Z

Only one theme in the theme directory uses the appearance-tools theme support.
https://wpdirectory.net/search/01GRB604V9CJQGP77A4H4V5VPK
But we don't have stats for themes outside the directory.

Mamaduka · 2023-02-03T10:01:33Z

An alternative option could be to allow more granular control via the appearance-tools second argument. If no argument is provided, we use the current behavior - appearanceTools: true.

New usage example:

add_theme_support( 'appearance-tools', array(
    'link-color' => true,
    'border'  => true,
) );

What do you think?

carolinan · 2023-02-03T10:13:24Z

We could do that, it would be a smaller code change too.
We would only be removing something that is already broken.

My only remaining concern would be that the theme support would have the same name as the theme.json setting, but not include the same features. This would be confusing. I am not sure documentation would be enough, because there would be an expectation that they match.

Mamaduka · 2023-02-03T13:19:09Z

My only remaining concern would be that the theme support would have the same name as the theme.json setting, but not include the same features.

Adding just add_theme_support( 'appearance-tools' ) in the theme will enable the same features as the theme.json equivalent. This way, we can avoid breaking BC. As I understand, this feature flag was introduced in WP 6.1.

Using arguments will allow us only to enable specific features.

scruffian · 2023-02-03T15:55:51Z

Next steps would be: Revert the appearance-tools addition to core, merge the two new theme_supports instead.

I'm not sure about this. I think we should still keep an easy way to opt in to everything by default, otherwise themers are going to have to go and update their themes every time we add a new support.

scruffian · 2023-02-03T15:56:53Z

Only one theme in the theme directory uses the appearance-tools theme support.

What about the appearance tools setting in theme.json? I think a lot of themes use that.

scruffian · 2023-02-03T16:00:02Z

Using arguments will allow us only to enable specific features.

This seems OK. We could even do a similar thing in theme.json:

    "settings": {
        "appearanceTools": {
            'link-color' => true,
            'border'  => true,
        },    
    },

carolinan · 2023-02-03T16:31:05Z

There seems to be some confusion here still.
If a theme without theme.json adds the add_theme_support( 'appearance-tools' );
The block gap is enabled but the setting does not work.
So unless that is fixed we should not keep it in core.
We should not let them opt-in to something we know doesn't work.

carolinan · 2023-02-03T16:34:28Z

The support was never added to WP 6.1, only Gutenberg.
It was added to 6.2 alpha about two weeks ago.

scruffian · 2023-02-06T12:32:13Z

Thanks for clearing that up @carolinan

carolinan · 2023-02-07T02:14:55Z

I was asked to create a new trac ticket for the bug with the appearance tools, and because we have ran out of time for enhancements, the ticket is for reverting without a replacement:
https://core.trac.wordpress.org/ticket/57649

Mamaduka · 2023-02-07T04:39:34Z

Thank you, @carolinan!

I think reverting the feature makes sense. It was only introduced in 6.2 alpha and isn't working correctly across the board.

Let's try and ship a more stable appearance-tools 👍

ndiego · 2023-02-07T12:43:46Z

@carolinan given the comments above, can this get punted to 6.3 on the project board?

carolinan · 2023-02-07T15:44:46Z

@carolinan given the comments above, can this get punted to 6.3 on the project board?

Yes please

carolinan · 2023-02-08T05:28:16Z

Using arguments will allow us only to enable specific features.

This seems OK. We could even do a similar thing in theme.json:
    "settings": {
        "appearanceTools": {
            'link-color' => true,
            'border'  => true,
        },    
    },

@scruffian Could you open a separate issue for that? Still seems like a good idea to me.

scruffian · 2023-02-09T12:56:57Z

Done here: #47925

carolinan · 2023-06-21T10:00:41Z

@WordPress/block-themers Would there be more interest in this if I split the border and link control theme support into two PR's?

carolinan · 2023-06-22T03:54:32Z

Then I will close this PR; You can find the two new PR's linked above.

Add link color and border theme_support

d149ca8

carolinan commented Feb 2, 2023

View reviewed changes

CS, remove white space

556c857

carolinan marked this pull request as ready for review February 2, 2023 08:08

carolinan requested review from spacedmonkey, nerrad, ajitbohra, ryanwelcher, juanmaguitar and fabiankaegy as code owners February 2, 2023 08:08

carolinan requested review from scruffian, pbking and mikachan February 2, 2023 08:09

scruffian mentioned this pull request Feb 9, 2023

Theme.json: Add granular control to appearance tools #47925

Open

t-hamano mentioned this pull request Mar 3, 2023

theme.jsonの導入 loos/arkhe#98

Open

carolinan and others added 2 commits May 3, 2023 08:42

Merge branch 'trunk' into add/border-link-color-theme-support

5486162

Merge branch 'trunk' into add/border-link-color-theme-support

b73e80d

carolinan requested a review from ndiego as a code owner June 14, 2023 08:29

This was referenced Jun 22, 2023

Add link color theme_support #51775

Merged

Add border theme_support #51777

Merged

carolinan closed this Jun 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add link color and border theme_support #47675

Add link color and border theme_support #47675

carolinan commented Feb 2, 2023 •

edited

Loading

carolinan Feb 2, 2023

carolinan commented Feb 3, 2023

Mamaduka commented Feb 3, 2023

carolinan commented Feb 3, 2023

Mamaduka commented Feb 3, 2023

scruffian commented Feb 3, 2023

scruffian commented Feb 3, 2023

scruffian commented Feb 3, 2023

carolinan commented Feb 3, 2023 •

edited

Loading

carolinan commented Feb 3, 2023 •

edited

Loading

scruffian commented Feb 6, 2023

carolinan commented Feb 7, 2023

Mamaduka commented Feb 7, 2023

ndiego commented Feb 7, 2023

carolinan commented Feb 7, 2023

carolinan commented Feb 8, 2023 •

edited

Loading

scruffian commented Feb 9, 2023

carolinan commented Jun 21, 2023

carolinan commented Jun 22, 2023

Add link color and border theme_support #47675

Add link color and border theme_support #47675

Conversation

carolinan commented Feb 2, 2023 • edited Loading

What?

Why?

Testing Instructions

carolinan Feb 2, 2023

Choose a reason for hiding this comment

carolinan commented Feb 3, 2023

Mamaduka commented Feb 3, 2023

carolinan commented Feb 3, 2023

Mamaduka commented Feb 3, 2023

scruffian commented Feb 3, 2023

scruffian commented Feb 3, 2023

scruffian commented Feb 3, 2023

carolinan commented Feb 3, 2023 • edited Loading

carolinan commented Feb 3, 2023 • edited Loading

scruffian commented Feb 6, 2023

carolinan commented Feb 7, 2023

Mamaduka commented Feb 7, 2023

ndiego commented Feb 7, 2023

carolinan commented Feb 7, 2023

carolinan commented Feb 8, 2023 • edited Loading

scruffian commented Feb 9, 2023

carolinan commented Jun 21, 2023

carolinan commented Jun 22, 2023

carolinan commented Feb 2, 2023 •

edited

Loading

carolinan commented Feb 3, 2023 •

edited

Loading

carolinan commented Feb 3, 2023 •

edited

Loading

carolinan commented Feb 8, 2023 •

edited

Loading