WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 9 days ago

#51223 new defect (bug)

Twenty Thirteen: Button block not inheriting editor colors

Reported by: melchoyce Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
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 6 months ago.
Buttons in the editor
Screen Shot 2020-09-02 at 2.13.50 PM.png (43.3 KB) - added by melchoyce 6 months ago.
Buttons on the front-end

Download all attachments as: .zip

Change History (6)

@melchoyce
6 months ago

Buttons in the editor

@melchoyce
6 months ago

Buttons on the front-end

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


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

The PR works for me 👍

#3 @prbot
10 days 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
9 days ago

kjellr commented on PR #993:

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

Note: See TracTickets for help on using tickets.