Make WordPress Core

Opened 4 years ago

Last modified 7 days ago

#51236 new defect (bug)

Twenty Sixteen: Quotes don't inherit group color settings

Reported by: melchoyce's profile melchoyce Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-testing-info
Focuses: css Cc:

Description

If you have a quote inside of a group block, the group block's text color settings are not carried into the quote.

Attachments (1)

Screen Shot 2020-09-03 at 4.39.40 PM.png (221.3 KB) - added by melchoyce 4 years ago.

Download all attachments as: .zip

Change History (5)

#1 @sabernhardt
3 years ago

  • Focuses css added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Quote and Pullquote blocks do not have the text color of their container block (Group/Columns), both in the editor and on the front-end.

The Cover block does not have its own text color setting, but the darker text does not work against dark backgrounds.

#2 @poena
7 days ago

I am testing this on WordPress 6.7.1.

The cite text color is also wrong.
On the front, the block quote cite is #1a1a1a
In the editor, it is currentColor, which is #686868.

The theme is adding the style for the cite to the class .wp-block-quote__citation.
This CSS is overwritten by the WordPress editor styles. The editor adds the style to the element, not the class: .wp-block-quote cite

This ticket was mentioned in PR #7928 on WordPress/wordpress-develop by @poena.


7 days ago
#3

  • Keywords has-patch added; needs-patch removed

The purpose of this change is to ensure that the quote block and the quote block cite inherits the text color from the parent block, if:

  • The parent has a text color set in the block settings, and
  • The quote block does not have a text color set in the block settings.

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

#4 @poena
7 days ago

  • Keywords has-testing-info added

Testing instructions for PR 7928:

Activate Twenty Sixteen
Create a new post.

Insert a quote block, and save. Confirm that the colors are the same in the block editor and the front. The cite should have a darker color than the text.

Change the text color of the quote block, and save. Confirm that the colors are the same in the block editor and the front.

Change the text color of the paragraph inside the quote block, and save. Confirm that the colors are the same in the block editor and the front. The paragraph should have a different color than the cite.

--

Add a group block and change it's text color.
Insert a quote block inside the group, and save. Confirm that the colors are the same in the block editor and the front. The color you added to the group block should be the one that is used.

Change the text color of the quote block, and save. Confirm that the colors are the same in the block editor and the front. The color you added to the quote block should be the one that is used.

Change the text color of the paragraph inside the quote block, and save. Confirm that the colors are the same in the block editor and the front. The paragraph should have a different color than the cite.

Note: See TracTickets for help on using tickets.