The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in the bug tracker.
Social Icons block: Applied colors now dynamically update based on theme.json and Global Styles
Let’s take the example of the Twenty Twenty-Three theme, where the icon color is set to “Base” and the background color to “Secondary.” The icons’ frontend markup would include inline styles like this:
As you can see, the inline styles reflect the hardcoded hex code values for the base and secondary colors defined in Twenty Twenty-Three’s theme.json file, which are #ffffff and #345C00 respectively.
This approach caused issues when modifying the color palette in Global Styles, manually changing the theme.json file, or selecting different theme style variations. The icon colors did not update whenever the values for base or secondary were changed.
This problem is clearly demonstrated in the following video. Despite choosing different style variations, which have their own values for base or secondary, the icon colors remain fixed at #ffffff and #345C00.
To address this, WordPress 6.3 introduces CSSCSSCascading Style Sheets. classes to the Social Icons block that correspond to the selected color values. These classes are used all over WordPress and are automatically generated based on the color palette set in the theme.json file. They follow the format:
It’s important to note that these classes will not be applied if a user selects a custom color.
With the application of these CSS classes, any changes made to the base or secondary colors in Global Styles or theme.json will be automatically reflected in the Social Icons block. Here’s an updated example of the code (scroll to the right to view the classes):
While these CSS classes take precedence over the hardcoded hex values, it’s important to mention that the hardcoded values are still retained. This design ensures that if a user switches to a theme that doesn’t support the base or secondary colors, the icons will still display correctly using the original hardcoded hex values.
The following video shows that the Social Icons block now updates as the user changes the theme style variation in Global Styles.
Finally, it’s worth noting that this change won’t require any action from theme developers or users unless some custom functionality has been implemented. The rendering of the Social Icons block is handled through PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, meaning that if any updates are made to the color palette defined in theme.json and the icon or background color is set to one of the colors from that palette, the icons will automatically update to reflect the changes.
For additional context and to review the technical implementation of this change, please see #51020.