Bundled Themes: Button blocks not respecting settings

[laurelfulford]

(Updated from just focusing on Twenty Seventeen).

In most of the older default themes (all but Twenty Ten), the button blocks do not have the correct default styles. The Button block should default to the "Rounded" styles, and have options to display it as "Squared" or "Outline".

The button default is styled after each theme's buttons; most have slightly rounded corners, so slight that they're hard to distinguish from the "Squared" version.

This issue came up in the forums for Twenty Seventeen -- some of the issue described there (colours and outline button styles, not being applied) is already covered in #45426:

​https://wordpress.org/support/topic/wp-5-0-editor-button-styles-lost-broken/

​https://wordpress.org/support/topic/button-block-formatting-change-v-18-0/

[laurelfulford]

Twenty Seventeen - customized buttons in the editor

[laurelfulford]

Twenty Seventeen - same customized buttons on front-end (outlined is white on white)

[laurelfulford]

Confirming that the colour issues appear to be resolved with the patch for #45426, excluding the background for the outlined version -- that patch will need to be updated to make sure that case is covered.

The remaining issue here is the shape -- the default button should be a more pronounced rounded shape, to differentiate from the square option. Right now it's just a 2px border radius, which isn't very visually different.

@davidakennedy I'd appreciate a second opinion on this one, since this theme (and some other defaults) don't have a very rounded default button shape. That means when someone switches it to the 'square' style, it pretty much looks the same. But at the same time, making the rounded corners more pronounced now will impact existing sites :\

[davidakennedy]

Hey @laurelfulford, correct me if I'm wrong here:

• The default button style should be round, round enough to be noticeable. Most default themes aren’t that way.
• If we changed the button styles now, it would be only for Gutenberg buttons, not all buttons in the themes' designs, right?

Although, I'm not thrilled about changing designs once it's out there, I think if we could scope it to Gutenberg-only block buttons, that would be okay. I'd rather have things match consistently than not for people.

[laurelfulford]

Thanks @davidakennedy!

The default button style should be round, round enough to be noticeable. Most default themes aren’t that way.

Correct! It's even called 'rounded' in the editor UI (the options are "Rounded", "Squared" and "Outline")

If we changed the button styles now, it would be only for Gutenberg buttons, not all buttons in the themes' designs, right?

Yes -- and it would just be specifically for the button block, so changes wouldn't even affect other blocks that have buttons, like the file block.

Although, I'm not thrilled about changing designs once it's out there, I think if we could scope it to Gutenberg-only block buttons, that would be okay. I'd rather have things match consistently than not for people.

This is the way I feel, too :) I don't like the idea of it changing now, but at the same time, the controls don't really make any sense -- for most of the default themes, the buttons have the slightest border radius, barely distinguishable from the "Squared" option. So you have two options that pretty much look the same.

Since the CSS changes will be minimal across all the themes, I'm going to update this ticket cover them all, and will circle back with some screenshots.

[laurelfulford]

Twenty Seventeen - current "rounded" and "squared"

[laurelfulford]

Twenty Sixteen - current "rounded" and "squared"

[laurelfulford]

Twenty Fifteen - current "rounded" and "squared"

[laurelfulford]

Twenty Fourteen - current "rounded" and "squared"

[laurelfulford]

Twenty Thirteen - current "rounded" and "squared"

[laurelfulford]

Twenty Twelve - current "rounded" and "squared"

[laurelfulford]

Twenty Eleven - current "rounded" and "squared"

[laurelfulford]

Twenty Seventeen - "rounded" and "squared" after patch

[laurelfulford]

Twenty Sixteen - "rounded" and "squared" after patch

[laurelfulford]

Twenty Fifteen - "rounded" and "squared" after patch

[laurelfulford]

Twenty Fourteen - "rounded" and "squared" after patch

[laurelfulford]

Twenty Thirteen - "rounded" and "squared" after patch

[laurelfulford]

Twenty Twelve - "rounded" and "squared" after patch

[laurelfulford]

Twenty Eleven - "rounded" and "squared" after patch

[laurelfulford]

45541.patch​ basically removes the theme's original button radius from the button block, allowing it to fall back to the block-based editor default (super rounded), and basically behave in a more expected fashion.

There's also a small fix for Twenty Twelve, which, in the editor styles, repeated the button block selector where a file block selector should've been.

[allancole]

Twenty Sixteen outline-style button jumps on hover.

[laurelfulford]

Thanks for testing, @allancole!

It looks like there may be an issue with how the patch applied here. The font-family and text-transform also aren't correct (they should be sans-serif, and uppercase).

But retesting the patch, the border-radius updates aren't applying to the right spot for me -- there's fuzz, and the styles are often applied to the file block. I think because the other button fixes I patched have been committed. So I'm going to clean this one up and re-upload!

[laurelfulford]

45541.1.patch​ cleans up the fuzz in the original patch, and tidies up a couple issues I noticed with the outline style.

[laurelfulford]

In 44381:

Bundled Themes: Make sure button blocks respect settings.

When the original block editor styles were added to the existing default themes, the button blocks were styled to match how each theme styled the button tag.

However, the styles should respect the block editor's default style, "Rounded", and allow switching to the other styles, like "Outlined" and "Square".

Fixes #45541.

[SergeyBiryukov]

Reopening for merging to the 5.0 branch.

[SergeyBiryukov]

In 44430:

Bundled Themes: Make sure button blocks respect settings.

When the original block editor styles were added to the existing default themes, the button blocks were styled to match how each theme styled the button tag.

However, the styles should respect the block editor's default style, "Rounded", and allow switching to the other styles, like "Outlined" and "Square".

Props laurelfulford.
Merges [44381] to the 5.0 branch.
Fixes #45541.