Inconsistent styling experience with default block variations (tested with the core/button block)

[lunule]

What problem does this address?

Not sure if this is a bug report or a feature request, but the styling experience for default Gutenberg blocks with variations is, currently, a living nightmare:

1. Default button element styles can be defined in the theme.json file's styles.elements.button subarray,
2. Default button variation styles (like the ones for the outline variation) can be defined in the theme.json file's styles.blocks.core/button subarray,
3. But, because hover, active, and focus styles are not supported in the theme.json file's styles.blocks.core/button subarray, all these styles should be defined in the theme stylesheet with traditional css.
4. The display in the editor is still modified even with this solution by the core editor styles stylesheet.

What is your proposed solution?

It would be nice to add support for these pseudo-classes as well in the theme.json file's styles.blocks.core/button subarray - so that default variation styling can be fully handled in theme.json.

[carolinan]

Hi

hover, active, and focus styles are not supported in the theme.json file's styles.blocks.core/button subarray

You can work around this with the buttons block:
styles.blocks.core/buttons.elements.button.:hover
But I was unsure if you only meant styling the link states on the button outline variation.

I did not understand what this means:

The display in the editor is still modified even with this solution by the core editor styles stylesheet.

Did you mean that the theme's custom editor stylesheet is not applied? I need clarification on whether you are describing an issue or confirming that the theme stylesheet works as an alternative.

Adding CSS through the theme stylesheet is optional; theme.json also has a CSS field.

[lunule]

Hi @carolinan - thanks for your follow-up. Oh, and a huge thanks for your Full Site Editing website that's an indispensable treasure trove!!

You can work around this with the buttons block:
styles.blocks.core/buttons.elements.button.:hover
But I was unsure if you only meant styling the link states on the button outline variation.

I'm nor sure this would work - if my understanding is correct, with styles.blocks.core/buttons.elements.button.:hover we're kinda at the same place as with styles.elements.button: both of these sections can be used to style hover/active/focus states of the default button variation.

The issue I'm reporting here is about this combo:

• configuring styles for the default button variation, including this variation's hover/active/focus states - this is what I could achive by using the styles.elements.button section;
• configuring styles for the outline button variation - this is what I could achive by using the styles.blocks.core/button section
• configuring styles for the outline button variation's hover/active/focus states - this is what seems to be an impossible mission in theme.json, as none of the above sections support styling of a specific variation's hover/active/focus states.

I did not understand what this means:

The display in the editor is still modified even with this solution by the core editor styles stylesheet.

This is an issue with the state of implementation I could finally use to implement the button styles successfully:

• the default button variation's hover/active/focus states styles are defined in the styles.elements.button section;
• due to the above issue, the outline button variation's hover/active/focus states styles can not be implemented in theme.json
• based on the default button variation's hover/active/focus states styles, Gutenberg "pushes" these styles in the editor, but with a very strange and excessive classing:

.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link {
    /* (...) */
}

So, other that the need to define the outline variation's hover/active/focus states styles in a separate stylesheet, I also had to fix this overwrite issue by copying the same excessive selector definition - because I hate to use the !important property.

Frontend is OK, using the less excessive .is-style-outline .wp-block-button__link selector def works there nicely.

[mleathem]

The same is true for "core/read-more" - hover and focus are NOT supported...
related to: styles.blocks["core/read-more"]

and in this case the workaround from @carolinan will not work.
Since the module implements a link (not a button) - It can be assumed reasonable that there may well be desired different styling for the read-more link and an in content link.