TT1 Blocks: Button Block: Migrate CSS to theme.json

[scruffian]

The code is here.

From #82

[pbking]

Some bits I've learned

In order for Gutenberg to leverage the changes to theme.json found in #137 first Gutenberg needs to be changed.

The BUTTON block consists of a DIV element that wraps an A.
.wp-block-button .wp-block-button__link {
They tried to change it but it doesn't seem to have worked out.

The bits that pick up the color configuration in the theme.json and make use of them in other blocks (such as group) appear to only operate on the outermost element of the block. (Classes and styles are added only there).

The button doesn't make use of the same mechanism that blocks like the GROUP block use, it handles it on it's own. Called out copypasta which is sad indeed.

The button block makes use of an __experimentalSelector that is used by the additional color/radius code to apply the class/style changes to the > a rather than the outermost HTML element.

So either

• the button needs to support the theme.json file
• the button needs to be re-re-worked to support the existing color block-support
• the color block-support needs to be changed to support the __experimentalSelector.

Additionally, WordPress/gutenberg#25791 might take care of the border radius but it likely will have the same problems that color has had. (I have not yet evaluated it.)

This isn't an exhaustive list of what needs to be considered for changes to the button as the CSS for the theme covers the additional selectors and I'm not sure how that matters in regards to Gutenberg and the button block:

.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,

[kjellr]

the CSS for the theme covers the additional selectors and I'm not sure how that matters in regards to Gutenberg and the button block

This brings up an interesting question actually. The reason these extra selectors are there is so that additional buttons can pick up the same styles. For example, the button element in the Comments Form block, or any third-party block that includes a form button.

I'm not sure the best way to ensure that those blocks pick up the same styles as the default Button Block (but they should).

[scruffian]

I'm not sure the best way to ensure that those blocks pick up the same styles as the default Button Block (but they should).

Shouldn't they also implement their buttons as Button Blocks?

[scruffian]

It looks like it might be time to revisit the Button changes in #21266. @youknowriad do you think its worth giving that another go? Is there a better approach now?

[kjellr]

Shouldn't they also implement their buttons as Button Blocks?

That would be great, but right now I don't think they do.

[scruffian]

I created an issue for it here: WordPress/gutenberg#27740