Add button hover styles

[jffng]

Description

This is the simplest way I can think of to achieve the design target for button hover styles. I'm not sure it is a good idea to add them though, because strange combinations can occur if the user makes button color customizations at a global level. In other words, if I change the background or text color of buttons globally, these hover styles will still apply. The same is true of #163.

Screenshots

Kapture.2021-10-26.at.15.07.09.mp4

Testing Instructions

• Add a button, verify the hover styles apply
• Change the button padding globally and in a post, verify the hover styles apply correctly

[carolinan]

Have you seen the post @aristath wrote about how to load the block styles only when the block is used?
https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/
I think that would be a good method to use.

Question
Of the custom styles in theme.json, I think only the hover style needs to be custom, the rest could be under
blocks.button or blocks.button.elements.links? I am only wondering why this was preferred.

[carolinan]

(It would be good to document implementation choices, it would make a good article and future reference.)

[jffng]

I think that would be a good method to use.

👍

Of the custom styles in theme.json, I think only the hover style needs to be custom, the rest could be under
blocks.button or blocks.button.elements.links? I am only wondering why this was preferred.

Good question. I removed typography and some other custom styles that were not needed. The rest are placed under custom because the CSS needs to access the values, to maintain consistent spacing / dimensions across hover and non-hover states, default vs outline vs color customized buttons. If they are placed under styles.blocks.button, the styles are compiled (no CSS variable is created) and added to the class targeting the button. Also the styles are applied to all buttons (regardless of whether they are the outline style or have color customizations), and in the case of borders and colors, we don't actually want that.

[kjellr]

@jffng how much of this approach (if anything) do you think could be migrated to Gutenberg. Maybe even as something that gets opted into?

[jffng]

how much of this approach (if anything) do you think could be migrated to Gutenberg.

Ideally all of it, eventually?

We might be able to start by just adding the ability to set the background color on hover in Gutenberg.

[carolinan]

Unpopular opinion: unregister the outline style 🤐

[kjellr]

Just noting that in on trunk, the outline buttons have black borders and text. But in this PR, the border is green while the text is black.

(Neither of those seems correct to me — I think the outline should use green for both the text and border by default.)

[kjellr]

Closing in favor of #275.