Fix reactions buttons inheriting theme background on classic themes#2996
Merged
Fix reactions buttons inheriting theme background on classic themes#2996
Conversation
Twenty Twenty-One applies global button styles (dark background, custom text color) to all <button> elements via selectors like button:not(.has-background). Adding has-text-color and has-background classes tells the theme these buttons already manage their own colors. Also removes wp-element-button from the action button to prevent Twenty Twenty-Five from applying its button styles.
github-actions
bot
added
[Block] Reactions
[Feature] Reactions
[Focus] Editor
There was a problem hiding this comment.
Pull request overview
Adjusts the Reactions block’s button markup to avoid inheriting aggressive global button styles from certain classic/block themes by using WordPress’ standard has-text-color / has-background “escape hatch” classes and avoiding wp-element-button styling.
Changes:
- Add
has-text-colorandhas-backgroundclasses to the frontend-rendered reaction label and action buttons. - Remove
wp-element-buttonfrom the frontend-rendered reaction action buttons to avoid block-theme generated button styles. - Add a changelog entry for the fix.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/reactions/render.php | Updates server-rendered button class names to avoid theme button style overrides. |
| build/reactions/render.php | Generated build output reflecting the render markup change. |
| .github/changelog/fix-reactions-theme-background-override | Changelog entry documenting the patch fix. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes reaction block buttons picking up aggressive global
buttonstyles from classic themes like Twenty Twenty-One.Proposed changes:
has-text-colorandhas-backgroundclasses to.reaction-labeland.reaction-action-buttonso that TT1's:not(.has-background)/:not(.has-text-color)guards skip them — the same escape hatch WordPress themes use for blocks that manage their own colors.wp-element-buttonfrom.reaction-action-buttonto prevent block themes (TT5) from applying their generated button styles.Other information:
Testing instructions:
wp theme activate twentytwentyone)Changelog entry
Changelog Entry Details
Significance
Type
Message
Fix reactions block buttons inheriting theme background color on classic themes.