WordPress.org

Make WordPress Core

Opened 6 weeks ago

Closed 10 days ago

#45541 closed defect (bug) (fixed)

Bundled Themes: Button blocks not respecting settings

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch needs-testing commit fixed-major
Focuses: Cc:

Description (last modified by 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/

Attachments (19)

twenty-seventeen-buttons-editor.png (40.8 KB) - added by laurelfulford 6 weeks ago.
Twenty Seventeen - customized buttons in the editor
twenty-seventeen-buttons-front-end.png (28.5 KB) - added by laurelfulford 6 weeks ago.
Twenty Seventeen - same customized buttons on front-end (outlined is white on white)
Twenty Seventeen - rounded and squared.png (15.1 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - current "rounded" and "squared"
Twenty Sixteen - rounded and squared.png (16.7 KB) - added by laurelfulford 5 weeks ago.
Twenty Sixteen - current "rounded" and "squared"
Twenty Fifteen - rounded and squared.png (15.6 KB) - added by laurelfulford 5 weeks ago.
Twenty Fifteen - current "rounded" and "squared"
Twenty Fourteen - rounded and squared.png (13.6 KB) - added by laurelfulford 5 weeks ago.
Twenty Fourteen - current "rounded" and "squared"
Twenty Thirteen - rounded and squared.png (16.3 KB) - added by laurelfulford 5 weeks ago.
Twenty Thirteen - current "rounded" and "squared"
Twenty Twelve - rounded and squared.png (11.6 KB) - added by laurelfulford 5 weeks ago.
Twenty Twelve - current "rounded" and "squared"
Twerty Eleven - rounded and squared.png (16.4 KB) - added by laurelfulford 5 weeks ago.
Twenty Eleven - current "rounded" and "squared"
45541.patch (7.4 KB) - added by laurelfulford 5 weeks ago.
twenty-seventeen-rounded-button-after.png (8.8 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - "rounded" and "squared" after patch
twenty-sixteen-rounded-button-after.png (9.4 KB) - added by laurelfulford 5 weeks ago.
Twenty Sixteen - "rounded" and "squared" after patch
twenty-fifteen-rounded-button-after.png (9.2 KB) - added by laurelfulford 5 weeks ago.
Twenty Fifteen - "rounded" and "squared" after patch
twenty-fourteen-rounded-button-after.png (7.8 KB) - added by laurelfulford 5 weeks ago.
Twenty Fourteen - "rounded" and "squared" after patch
twenty-thirteen-rounded-button-after.png (9.1 KB) - added by laurelfulford 5 weeks ago.
Twenty Thirteen - "rounded" and "squared" after patch
twenty-twelve-rounded-button-after.png (6.6 KB) - added by laurelfulford 5 weeks ago.
Twenty Twelve - "rounded" and "squared" after patch
twenty-eleven-rounded-button-after.png (9.4 KB) - added by laurelfulford 5 weeks ago.
Twenty Eleven - "rounded" and "squared" after patch
twenty-sixteen-outline-button-hover.gif (2.3 MB) - added by allancole 5 weeks ago.
Twenty Sixteen outline-style button jumps on hover.
45541.1.patch (15.0 KB) - added by laurelfulford 5 weeks ago.

Change History (33)

@laurelfulford
6 weeks ago

Twenty Seventeen - customized buttons in the editor

@laurelfulford
6 weeks ago

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

#1 @laurelfulford
6 weeks ago

  • Keywords has-screenshots added; needs-screenshots removed

#2 @laurelfulford
5 weeks ago

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 :\

#3 @davidakennedy
5 weeks ago

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.

#4 @laurelfulford
5 weeks ago

  • Description modified (diff)
  • Summary changed from Twenty Seventeen: Button blocks not respecting settings to Bundled Themes: Button blocks not respecting settings

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
5 weeks ago

Twenty Seventeen - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Sixteen - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Fifteen - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Fourteen - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Thirteen - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Twelve - current "rounded" and "squared"

@laurelfulford
5 weeks ago

Twenty Eleven - current "rounded" and "squared"

@laurelfulford
5 weeks ago

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

#5 @laurelfulford
5 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

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.

#6 @pento
5 weeks ago

  • Milestone changed from 5.0.1 to 5.0.2

@allancole
5 weeks ago

Twenty Sixteen outline-style button jumps on hover.

#7 @laurelfulford
5 weeks ago

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!

#8 @laurelfulford
5 weeks ago

  • Keywords needs-refresh added; needs-testing removed

#9 @laurelfulford
5 weeks ago

  • Keywords needs-testing added; needs-refresh removed

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

#10 @pento
5 weeks ago

  • Milestone changed from 5.0.2 to 5.0.3

#11 @netweb
2 weeks ago

  • Keywords commit added

#12 @laurelfulford
2 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#13 @SergeyBiryukov
10 days ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for merging to the 5.0 branch.

#14 @SergeyBiryukov
10 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.