Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 19 months ago

#51223 closed defect (bug) (fixed)

Twenty Thirteen: Button block not inheriting editor colors

Reported by: melchoyce's profile melchoyce Owned by: davidbaumwald's profile 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 3 years ago.
Buttons in the editor
Screen Shot 2020-09-02 at 2.13.50 PM.png (43.3 KB) - added by melchoyce 3 years ago.
Buttons on the front-end

Download all attachments as: .zip

Change History (14)

@melchoyce
3 years ago

Buttons in the editor

@melchoyce
3 years ago

Buttons on the front-end

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


3 years ago
#1

  • 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
3 years ago

The PR works for me 👍

ryelle commented on PR #993:


3 years ago
#3

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.

kjellr commented on PR #993:


3 years ago
#4

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

scruffian commented on PR #993:


3 years ago
#5

LGTM, just one comment about i18n...

ryelle commented on PR #993:


3 years ago
#6

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

kjellr commented on PR #993:


3 years ago
#7

@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

ryelle commented on PR #993:


3 years ago
#8

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
3 years 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
3 years ago

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

#11 @ryelle
3 years 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.

kjellr commented on PR #993:


19 months ago
#12

I'm not sure if this one is still valid. I'm unable to maintain it, would someone else mind adopting the PR?

Note: See TracTickets for help on using tickets.