Make WordPress Core

Opened 22 months ago

Last modified 12 months ago

#56290 new defect (bug)

Twenty Twelve: Button blocks inside widget areas don't apply custom colours

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: needs-testing-info good-first-bug has-patch
Focuses: css Cc:

Description (last modified by sabernhardt)

A similar issue was reported in #45432 but it was only partially fixed.

I have noticed that, while this is fixed for buttons adding to the main content, the problem is still reproducible with buttons added to widget areas.

We would need to reduce the specificity of the selectors on widget areas to prevent this.

Attachments (4)

Screen Shot on 2022-07-27 at 07:26:29.png (140.5 KB) - added by mrfoxtalbot 22 months ago.
Custom Colors do not apply to blocks inside widget areas
fix-buttons-custom-colors.patch (4.2 KB) - added by system909 21 months ago.
twenty-twelve-buttons-post-export.xml (35.3 KB) - added by sabernhardt 21 months ago.
post with various button blocks (copy and paste into widget area)
screencapture-localhost-8889-2022-08-29-twenty-twelve-buttons-2022-09-30-05_59_25.png (867.2 KB) - added by system909 20 months ago.

Download all attachments as: .zip

Change History (11)

@mrfoxtalbot
22 months ago

Custom Colors do not apply to blocks inside widget areas

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


22 months ago

#2 @ironprogrammer
22 months ago

  • Keywords needs-testing-info good-first-bug added

#3 @sabernhardt
22 months ago

  • Description modified (diff)
  • Focuses css added
  • Version changed from 6.0 to 5.8

#4 @system909
21 months ago

  • Keywords has-patch added

@sabernhardt
21 months ago

post with various button blocks (copy and paste into widget area)

#5 @sabernhardt
21 months ago

  1. If anyone has specified a text color for .widget-area .widget a, then .widget-area .widget a:not(.wp-block-button__link) would override their link color in any other widget block (and in widgets that do not use the block editor at all). Removing .widget to make the selector .widget-area a:not(.wp-block-button__link) might work, though.
  1. The .entry-content class was intentionally added in r44194, so we probably cannot simply remove that. I recommend supporting both with and without it:
    .has-blue-color,
    .has-blue-color:visited,
    .entry-content .has-blue-color,
    .entry-content .has-blue-color:visited {
    	color: #21759b;
    }
    

For testing, I made a post with various Button blocks and a Paragraph block with regular text links. To import the XML, go to Tools > Import and choose the WordPress importer. To add these blocks to a Widget area, you could open the post and select "Copy all content" (or "Copy all blocks") from the 3-dot Options menu, and then paste them in a Paragraph block in the Widgets editor. You may need to verify all blocks copied and pasted properly.

Don't worry about the Button blocks with default text color and dark backgrounds; hopefully any users who change the background from light to dark understand that they need to change the text color as well. And the blocks probably should always have a link destination, but I included the 'no href' possibility.

#6 @system909
20 months ago

@sabernhardt
thanks for creating the buttons test case

I imported the XML like you said and add the same content in a widget

  1. all btns have the same style in the post-content and the widget

the only problem that I noticed was that the visited btn with custom color doesn't apply the visited gray text coloring because the custom color is added as an inline style ut it can be fixed by using !important;

  1. I checked both the post page and the index page(homepage) after removing the .entry-content and it didn't cause any problems

https://core.trac.wordpress.org/attachment/ticket/56290/screencapture-localhost-8889-2022-08-29-twenty-twelve-buttons-2022-09-30-05_59_25.png

Please tell me if I missed something with the wrong styling in the test case you provided
and send me the text part of the block of the issue for example

Outline style, default text color, #B4FBB4 custom light background color

#7 @pavanpatil1
12 months ago

Hi,

I have tried to reproduce the issue but the custom color in widget area is visible. Added the screenshot below - https://prnt.sc/THvfxvhU9jgk

Am i missing something here?

Note: See TracTickets for help on using tickets.