WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 9 months 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:
PR Number:

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 10 months ago.
Twenty Seventeen - customized buttons in the editor
twenty-seventeen-buttons-front-end.png (28.5 KB) - added by laurelfulford 10 months 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 10 months ago.
Twenty Seventeen - current "rounded" and "squared"
Twenty Sixteen - rounded and squared.png (16.7 KB) - added by laurelfulford 10 months ago.
Twenty Sixteen - current "rounded" and "squared"
Twenty Fifteen - rounded and squared.png (15.6 KB) - added by laurelfulford 10 months ago.
Twenty Fifteen - current "rounded" and "squared"
Twenty Fourteen - rounded and squared.png (13.6 KB) - added by laurelfulford 10 months ago.
Twenty Fourteen - current "rounded" and "squared"
Twenty Thirteen - rounded and squared.png (16.3 KB) - added by laurelfulford 10 months ago.
Twenty Thirteen - current "rounded" and "squared"
Twenty Twelve - rounded and squared.png (11.6 KB) - added by laurelfulford 10 months ago.
Twenty Twelve - current "rounded" and "squared"
Twerty Eleven - rounded and squared.png (16.4 KB) - added by laurelfulford 10 months ago.
Twenty Eleven - current "rounded" and "squared"
45541.patch (7.4 KB) - added by laurelfulford 10 months ago.
twenty-seventeen-rounded-button-after.png (8.8 KB) - added by laurelfulford 10 months ago.
Twenty Seventeen - "rounded" and "squared" after patch
twenty-sixteen-rounded-button-after.png (9.4 KB) - added by laurelfulford 10 months ago.
Twenty Sixteen - "rounded" and "squared" after patch
twenty-fifteen-rounded-button-after.png (9.2 KB) - added by laurelfulford 10 months ago.
Twenty Fifteen - "rounded" and "squared" after patch
twenty-fourteen-rounded-button-after.png (7.8 KB) - added by laurelfulford 10 months ago.
Twenty Fourteen - "rounded" and "squared" after patch
twenty-thirteen-rounded-button-after.png (9.1 KB) - added by laurelfulford 10 months ago.
Twenty Thirteen - "rounded" and "squared" after patch
twenty-twelve-rounded-button-after.png (6.6 KB) - added by laurelfulford 10 months ago.
Twenty Twelve - "rounded" and "squared" after patch
twenty-eleven-rounded-button-after.png (9.4 KB) - added by laurelfulford 10 months ago.
Twenty Eleven - "rounded" and "squared" after patch
twenty-sixteen-outline-button-hover.gif (2.3 MB) - added by allancole 10 months ago.
Twenty Sixteen outline-style button jumps on hover.
45541.1.patch (15.0 KB) - added by laurelfulford 10 months ago.

Change History (33)

@laurelfulford
10 months ago

Twenty Seventeen - customized buttons in the editor

@laurelfulford
10 months ago

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

#1 @laurelfulford
10 months ago

  • Keywords has-screenshots added; needs-screenshots removed

#2 @laurelfulford
10 months 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
10 months 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
10 months 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
10 months ago

Twenty Seventeen - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Sixteen - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Fifteen - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Fourteen - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Thirteen - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Twelve - current "rounded" and "squared"

@laurelfulford
10 months ago

Twenty Eleven - current "rounded" and "squared"

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

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

#5 @laurelfulford
10 months 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
10 months ago

  • Milestone changed from 5.0.1 to 5.0.2

@allancole
10 months ago

Twenty Sixteen outline-style button jumps on hover.

#7 @laurelfulford
10 months 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
10 months ago

  • Keywords needs-refresh added; needs-testing removed

#9 @laurelfulford
10 months 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
10 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#11 @netweb
10 months ago

  • Keywords commit added

#12 @laurelfulford
10 months 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
9 months ago

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

Reopening for merging to the 5.0 branch.

#14 @SergeyBiryukov
9 months 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.