Textbook: Tag Cloud widget has no colored backgrounds if nested in a Group block

[jp-imagines]

Quick summary

On the Textbook theme, the Tag Cloud widget displays each tag with a colored background based on frequency. When the Tag Cloud widget is inside a Group block, this formatting completely disappears.

Steps to reproduce

1. Activate the Textbook theme on your site.
2. Add a Tag Cloud widget into the Sidebar widget area from either Appearance > Widgets or in the Customizer.
3. Save changes. View the live site, and make note of the colored backgrounds on the tag cloud widget tags.
4. Return to either widget editor.
5. Select the Tag Cloud widget. In the hovering toolbar, use the additional settings kabob menu > "Group."
6. Save changes. Again view the live site.

What you expected to happen

Tag cloud should display colored backgrounds behind each tag:

What actually happened

The colored backgrounds and other formatting (text size, uppercase/capitalization, etc.) are stripped.

Context

4578775-zen

Simple, Atomic or both?

No response

Theme-specific issue?

Textbook theme. Not sure if other themes are affected.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

The only workaround is to ungroup the Tag Cloud block. In some circumstances, this might be acceptable. If the Group block is being used for any formatting/styling, that might not be a valid workaround.

[Greatdane]

@jp-imagines Are the colored backgrounds added elsewhere? I changed to the textbook theme, but even out of a group block I see no colored background?

[jp-imagines]

@Greatdane It appears on the theme demo site as well: https://textbookdemo.wordpress.com/

And I found the corresponding styling for the colored backgrounds in the theme's CSS:

.site-content #secondary .widget_tag_cloud div a:nth-of-type(3n+1),
 .site-content #secondary .wp_widget_tag_cloud div a:nth-of-type(3n+1) {
   background: #26866d;
   color: #FFF;
 }
 
 .site-content #secondary .widget_tag_cloud div a:nth-of-type(3n+2),
 .site-content #secondary .wp_widget_tag_cloud div a:nth-of-type(3n+2) {
   background: #604d88;
   color: #FFF;
 }
 
 .site-content #secondary .widget_tag_cloud div a:nth-of-type(3n+3),
 .site-content #secondary .wp_widget_tag_cloud div a:nth-of-type(3n+3) {
   background: #ce4639;
   color: #FFF;
 }

Based on that, it looks like it only applies in the sidebar widget area (#secondary). The footer widget area doesn't get the same treatment. I've added that into the original report.

[mrfoxtalbot]

Another case in 8196047-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4578775-zen
• [ ] 8196047-zen