Social Icons block: Applied colors now dynamically update based on theme.json and Global Styles

The Social Icons blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. provides options to set both an “Icon color” and an “Icon background color”. In versions prior to WordPress 6.3, the selected colors were hardcoded as hex code values within the block, even if you chose a color from the theme palette defined in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML..

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:

<li style="color: #ffffff; background-color: #345C00;" class="wp-social-link wp-social-link-facebook wp-block-social-link">
    <a rel=" noopener nofollow" target="_blank" href="https://#" class="wp-block-social-link-anchor">
        <svg width="24" height="24">
            ...
        </svg>
        <span class="wp-block-social-link-label">Facebook</span>
    </a>
</li>

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 CSSCSS Cascading 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:

• has-[color_slug]-color
• has-[color_slug]-background-color

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):

<li style="color: #ffffff; background-color: #345C00;" class="wp-social-link wp-social-link-facebook wp-block-social-link has-base-color has-secondary-background-color">
    <a rel=" noopener nofollow" target="_blank" href="https://#" class="wp-block-social-link-anchor">
        <svg width="24" height="24">
            ...
        </svg>
        <span class="wp-block-social-link-label">Facebook</span>
    </a>
</li>

Each CSS class corresponds to a specific color variable:

.has-base-color {
    color: var(--wp--preset--color--base) !important;
}

.has-secondary-background-color {
    background-color: var(--wp--preset--color--secondary) !important;
}

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 PHPPHP The 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.

Props to @leonugraha, @juanmaguitar, and @mburridge for review.

#6-3, #dev-notes, #dev-notes6-3