Twenty Twelve: Button blocks inside widget areas don't apply theme preset 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.

[SirLouen]

Reproduction Report

Description

This report can't validate whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twelve 4.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Importer 0.8.4

Reproduction Steps

Two options

First option

1. Use this import by @sabernhardt and import using Tools > Import > WordPress Importer > Run Importer
2. Edit the new post created called Twenty Twelve buttons
3. Go to the source code edit, and copy the code
4. Go to Appearance > Widgets
5. Create a new block and paste the copied code in the Main Sidebar area
6. ❌ Custom colors are reproduced identically to main post

Second option

1. In Appearance > Widgets > Just create a button in the Main Sidebar area with custom colors
2. ❌ Custom colors are shown both in editor an in the frontend.

Actual Results

1. ❌ Error condition doesn't occurs (can't be reproduced).

Additional Notes

• Many members have tested in different ways and no one seem to be able to reproduce the issue
• For this reason I believe that, unless someone provides better and exact reproductions steps, this is a worksforme candidate.

[sabernhardt]

set of Button blocks inside a Group, in page content and main sidebar, with WordPress 6.8.2

[sabernhardt]

revised set of Button blocks, inside a Group block

[sabernhardt]

To be more precise, the theme preset colors do not work in the widget areas. For example, any Button blocks with a Light Gray or Blue background color would fall back to the classic themes' ​dark gray color.

I edited the set of blocks and saved it as a text file.

• All the Code and Buttons blocks are inside a Group block because widgets have significant space between each other.
• The 'new link' reference points to new.example.com so it does not show the :visited style if you accidentally click it.
• It does not include the options of the default text color against a dark background color because the theme defines a light background, and people who want a dark background should set their own text color.
• The set still does not include gradients, but feel free to experiment with those.

[sabernhardt]

1. Create a new Page (or a post).
2. Add a short title.
3. Paste the set of blocks from twenty-twelve-buttons-inside-group.txt​.
4. Ensure that the page's comments are closed.
5. Publish the page.
6. Open Appearance → Widgets (in another tab).
7. Add a Paragraph block in the Main Sidebar, and paste the set of blocks in the Paragraph.
8. Click Update and wait for it to finish saving.
9. Visit the page on the front end.
10. Click one of the "visited link" Button blocks to show the :visited styling. The Button blocks should not have a distinction for visited links.
11. Compare each Button link between the page content and the main sidebar.
    • In addition to the default state, check the :hover, :focus and :active states for each link (note that the 'no href' links are not focusable).
    • To position the sidebar blocks near their post content counterparts, you could add these styles in the Customizer's Additional CSS:

      .widget-area .widget p {
      	padding: 0 0 4px;
      }
      .widget .wp-block-group .wp-block-code {
      	margin-top: 1.714285714rem;
      	min-height: calc(1.714285714rem + 24px);
      }
      

12. To check the blocks in the front page widget areas, you could paste the set of blocks in each widget area and set the page's template to Front Page Template.

[manishchopra]

Reproduction Report

Description

This report validates that the issue is reproduced.

Environment

• WordPress: 6.8.2
• PHP: 8.3.25-dev
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 140.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twelve 4.6
• MU Plugins:
  • rewrite.php
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).
2. ❌ Theme preset colors do not apply in the widget areas: Buttons inside the sidebar widgets do not reflect the expected theme color presets.
3. ❌ Hover effect missing in sidebar: When hovering over buttons/links inside the sidebar, the color does not change, unlike in the main page content where hover styling works.

Additional Notes

• The discrepancy between button behavior in content vs. widget areas can makes it inconsistent for users.

Supplemental Artifacts