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

[mrfoxtalbot]

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.

[mrfoxtalbot]

Custom Colors do not apply to blocks inside widget areas

[sabernhardt]

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

[sabernhardt]

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.

2. 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.

[system909]

@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;

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

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

[pavanpatil1]

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?

[karmatosed]

Changing this to needs testing to make sure that happens before consideration.