WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 7 weeks ago

#51223 closed defect (bug) (fixed)

Twenty Thirteen: Button block not inheriting editor colors

Reported by: melchoyce Owned by: davidbaumwald
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:

Description

The button block is not working correctly in Twenty Thirteen. I've noticed two issues:

  • Filled buttons always inherit the shadow style, so the button always has a drop shadow. This happens both in the editor and on the front-end. This also happens on circular buttons. Because there is a specific button style for a filled button with a box shadow, this feels unepxected.
  • Outlined buttons don't inherit any colors from the editor.

Attaching screenshots to show what I mean.

Attachments (2)

Screen Shot 2020-09-02 at 2.09.28 PM.png (69.7 KB) - added by melchoyce 11 months ago.
Buttons in the editor
Screen Shot 2020-09-02 at 2.13.50 PM.png (43.3 KB) - added by melchoyce 11 months ago.
Buttons on the front-end

Download all attachments as: .zip

Change History (13)

@melchoyce
11 months ago

Buttons in the editor

@melchoyce
11 months ago

Buttons on the front-end

This ticket was mentioned in PR #993 on WordPress/wordpress-develop by kjellr.


6 months ago

  • Keywords has-patch added

Trac ticket: https://core.trac.wordpress.org/ticket/51223

---

This PR corrects the default color of outlined buttons in the editor. Originally, these were dark gray in the editor, and orange in the front end. Now they're orange in both places.

It also adds a new optional "No Shadow" block style which allows users to hide the 3px shadow on buttons if they'd like to. This seemed like a way to sort out the issue as noted in the ticket, while not changing the appearance of buttons on existing sites running this theme.

## Screenshots

Before:
https://i0.wp.com/user-images.githubusercontent.com/1202812/107683623-c78cdf80-6c6f-11eb-91dc-ade62f0d5cf1.png

After:
https://i0.wp.com/user-images.githubusercontent.com/1202812/107683632-c956a300-6c6f-11eb-8059-cee64d796a4d.png
https://i0.wp.com/user-images.githubusercontent.com/1202812/107683640-cbb8fd00-6c6f-11eb-8d58-abea985e64db.png

#2 @melchoyce
6 months ago

The PR works for me 👍

#3 @prbot
5 months ago

ryelle commented on PR #993:

This does fix the color issue on default outline buttons, but I noticed a few other issues while testing:

  • In firefox, I'm seeing dark borders on the buttons (seeing this on trunk too)
  • On the outline button, background colors don't show up on the frontend
  • When using a custom color for an outline button, the button disappears on hover/focus

Editor:
<img width="609" alt="Screen Shot 2021-02-15 at 11 39 52 AM" src="https://user-images.githubusercontent.com/541093/107972943-94ee2a00-6f82-11eb-8ae9-47cf8b1c1d03.png">

Frontend:
<img width="585" alt="Screen Shot 2021-02-15 at 11 39 42 AM" src="https://user-images.githubusercontent.com/541093/107972942-94559380-6f82-11eb-852a-541d6eabd4a1.png">

I'm not sure if you want to go down the rabbit hole of getting custom colors working - I think it would be enough of an improvement to fix the borders & make the outline button color consistent.

#4 @prbot
5 months ago

kjellr commented on PR #993:

Yeah, that's definitely going to be a rabbit hole. I suggest we tackle those issues separately.

#5 @prbot
5 months ago

scruffian commented on PR #993:

LGTM, just one comment about i18n...

#6 @prbot
5 months ago

ryelle commented on PR #993:

@kjellr Did you also fix the border issue in Firefox? (in the screenshots above, the buttons all have dark borders)

#7 @prbot
4 months ago

kjellr commented on PR #993:

@ryelle I can't reproduce those borders anymore — I wonder if they were fixed elsewhere?

I did add a couple extra commits that I think fix these two issues though:

  • On the outline button, background colors don't show up on the frontend
  • When using a custom color for an outline button, the button disappears on hover/focus

#8 @prbot
4 months ago

ryelle commented on PR #993:

I think maybe it was fixed when https://github.com/WordPress/gutenberg/issues/29149 was fixed, I'm also not seeing the issue anymore. Everything looks good 👍

#9 @ryelle
2 months ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 5.8

The PR still looks good, let's get this fix in for 5.8.

#10 @davidbaumwald
2 months ago

  • Owner set to davidbaumwald
  • Status changed from new to accepted

#11 @ryelle
7 weeks ago

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

In 51110:

Twenty Thirteen: Add "No Shadow" style to button block.

This creates a new block style without a shadow, and fixes colors on outline buttons.

Props melchoyce, kjellr, scruffian.
Fixes #51223.

Note: See TracTickets for help on using tickets.