Skip to content

Fix ability to preview Additional CSS changes in the Customizer #70428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

westonruter
Copy link
Member

Adding the Additional CSS from the Customizer to the global styles makes sense, except not in the Customizer preview. This is because wp-includes/js/customize-preview.js is supposed to dynamically update the STYLE#wp-custom-css element with the new stylesheet whenever it changes. So this PR prevents putting the Additional CSS into the global styles when in the Customizer preview context.

This issue was introduced in #58991

Screencast

Before

Screen.Recording.2025-06-14.at.13.28.10.mov

After

Screen.Recording.2025-06-14.at.13.31.21.mov

@westonruter westonruter requested review from tellthemachines and removed request for spacedmonkey June 14, 2025 20:44
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@westonruter westonruter added [Type] Bug An existing feature does not function as intended Needs PHP backport Needs PHP backport to Core CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jun 14, 2025
westonruter added a commit to westonruter/wordpress-develop that referenced this pull request Jun 18, 2025
@westonruter westonruter force-pushed the fix/custom-css-customize-preview branch from 617ca2d to 259b5fc Compare June 18, 2025 00:53
@@ -79,7 +82,7 @@ function gutenberg_enqueue_global_styles() {
*/
function gutenberg_enqueue_global_styles_custom_css() {
_deprecated_function( __FUNCTION__, 'Gutenberg 17.8.0', 'gutenberg_enqueue_global_styles' );
if ( ! wp_is_block_theme() ) {
if ( ! wp_is_block_theme() || is_customize_preview() ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As noted in WordPress/wordpress-develop#9000 (comment):

Actually, I think this change can be undone. It's a deprecated function anyway so it is not used. And the logic here is not right as it should rather be doing something like this:

$custom_css = '';
if ( ! is_customize_preview() ) {
	// Don't enqueue Customizer's custom CSS separately.
	remove_action( 'wp_head', 'wp_custom_css_cb', 101 );

	$custom_css .= wp_get_custom_css();
}

$custom_css .= wp_get_global_styles_custom_css();

But again, given that this function is deprecated it doesn't seem necessary to make this change.

Suggested change
if ( ! wp_is_block_theme() || is_customize_preview() ) {
if ( ! wp_is_block_theme() ) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs PHP backport Needs PHP backport to Core [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant