Block Supports: Prevent Additional CSS duplication inside Query Loop by Mustafabharmal · Pull Request #11859 · WordPress/wordpress-develop

Mustafabharmal · 2026-05-19T10:28:32Z

Trac ticket: https://core.trac.wordpress.org/ticket/65268

What

When a block inside a Query Loop has Additional CSS, wp_add_inline_style was called once per post in the loop, duplicating the same CSS N times.

Why

wp_render_custom_css_support_styles hooks render_block_data, which fires for every block render. wp_unique_id_from_values produces the same hash for the same block template data on every loop iteration, so the same CSS gets injected repeatedly.

How

Added a static $enqueued_class_names array. The first time a class name is seen the CSS is enqueued; subsequent renders skip it.

Gutenberg PR: WordPress/gutenberg#78282

github-actions · 2026-05-19T10:28:42Z

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props mustafabharmal, westonruter, wildworks, mukesh27, masteradhoc.

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

github-actions · 2026-05-19T10:31:56Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

mukeshpanchal27

Can you add unit tests that verify the changes?

westonruter · 2026-06-07T07:13:18Z

We should add a test for this as well.

t-hamano · 2026-06-07T07:14:11Z

+		 * Track which class names have already had their CSS enqueued to prevent
+		 * duplicate styles when the same block is rendered multiple times inside
+		 * a Query Loop (render_block_data fires once per loop iteration).


Suggested change

* Track which class names have already had their CSS enqueued to prevent

* duplicate styles when the same block is rendered multiple times inside

* a Query Loop (render_block_data fires once per loop iteration).

* Skip CSS that has already been added. Blocks with identical attributes

* share the same class name and processed CSS via wp_unique_id_from_values(),

* so the same style would otherwise be enqueued more than once (e.g. inside

* a Query Loop or when blocks share identical custom CSS).

Since this issue is not limited to the Query Loop block, I recommend updating this comments to be more accurate.

For example, create content like the following:

 <p class="has-custom-css">Hello World</p>   <p class="has-custom-css">Hello World</p>   <p class="has-custom-css">Hello World</p>   <p class="has-custom-css">Hello World</p> 

This PR will eliminate the duplicate CSS.

Before:

<style id="wp-block-custom-css-inline-css"> :root :where(.wp-custom-css-38db0572){background: red;} :root :where(.wp-custom-css-38db0572){background: red;} :root :where(.wp-custom-css-38db0572){background: red;} :root :where(.wp-custom-css-38db0572){background: red;} </style>

After:

<style id="wp-block-custom-css-inline-css"> :root :where(.wp-custom-css-38db0572){background: red;} </style>

Good call, although I suggest {@see wp_unique_id_from_values()} to link the reference.

Applied in 8e767a4

masteradhoc · 2026-06-23T15:57:27Z

@Mustafabharmal Could you add some unit tests for this PR please? After the commit we can check as well if the failing check is working again. We'd like to get this a step further to potentially include it in WP 7.0.1

Thanks for your help here!

t-hamano

LGTM! I would like to commit this later.

t-hamano · 2026-07-06T02:58:18Z

-		wp_add_inline_style( 'wp-block-custom-css', $processed_css );
+		$handle = 'wp-block-custom-css';
+		if ( ! wp_style_is( $handle, 'registered' ) ) {
+			wp_register_style( $handle, false, array( 'global-styles' ) );


I have a slight concern about this code. What happens if a consumer intentionally deregister global-styles? In that case, global-styles would be forcibly registereded only when a block with custom CSS exists on the page, which might go against the consumer's intent. Shouldn't custom CSS operate independently of global styles?

However, since this logic was not introduced in this PR, it is not a blocker. We may be able to consider a fix in a follow-up.

westonruter · 2026-07-06T03:00:58Z

LGTM! I would like to commit this later.

Go for it.

Unblocking request changes as unit tests have been added.

t-hamano · 2026-07-06T03:22:32Z

@pento, it appears that unnecessary changes were added due to the force push.

mukeshpanchal27 · 2026-07-06T03:31:44Z

@pento, it appears that unnecessary changes were added due to the force push.

+1

mukeshpanchal27 · 2026-07-06T03:33:03Z

+		"ext-ftp": "*",
+		"ext-mysqli": "*",
+		"ext-ssh2": "*"


I added this in trunk via a13c8a2

Something seems to have gone wrong in the repository. It looks like all open PRs were force-pushed by panto.

There may be an issue with the automation or repository configuration. Is anyone checking that?

I've asked: https://wordpress.slack.com/archives/C18723MQ8/p1783309883628639

mukeshpanchal27 · 2026-07-06T03:36:38Z

+		/**
+		 * Skip CSS that has already been added. Blocks with identical attributes
+		 * share the same class name and processed CSS via {@see wp_unique_id_from_values()},
+		 * so the same style would otherwise be enqueued more than once (e.g. inside
+		 * a Query Loop or when blocks share identical custom CSS).
 		 */


Suggested change

/**

* Skip CSS that has already been added. Blocks with identical attributes

* share the same class name and processed CSS via {@see wp_unique_id_from_values()},

* so the same style would otherwise be enqueued more than once (e.g. inside

* a Query Loop or when blocks share identical custom CSS).

*/

/*

* Skip CSS that has already been added. Blocks with identical attributes

* share the same class name and processed CSS via {@see wp_unique_id_from_values()},

* so the same style would otherwise be enqueued more than once (e.g. inside

* a Query Loop or when blocks share identical custom CSS).

*/

Nit - Use Multi-line comments https://developer.wordpress.org/coding-standards/inline-documentation-standards/php/#5-2-multi-line-comments

The docblock style was intentional so that the inline @see tag is parsed.

Oh, I see. Let's put it back

Co-authored-by: t-hamano <wildworks@git.wordpress.org>

…yle at end of test

…gnment In addition to being simpler, this ensures PHPStan is able to statically-analyze the return value.

t-hamano · 2026-07-06T08:07:11Z

I'm not entirely sure of the cause, but when I checked out the latest trunk locally and rebased this branch on top of it, the unintended changes seem to have disappeared.

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

mukeshpanchal27 · 2026-07-06T09:36:15Z

-		 * Register and add inline style for block custom CSS.
-		 * The style depends on global-styles to ensure custom CSS loads after
-		 * and can override global styles.
+		/**


Suggested change

/**

/*

Multi-line comment

#11859 (comment)

mukeshpanchal27 previously requested changes May 19, 2026

View reviewed changes

Comment thread src/wp-includes/block-supports/custom-css.php Outdated

Comment thread src/wp-includes/block-supports/custom-css.php Outdated

westonruter requested changes May 19, 2026

View reviewed changes

Comment thread src/wp-includes/block-supports/custom-css.php Outdated

westonruter mentioned this pull request May 19, 2026

Block Supports: Prevent Additional CSS duplication inside Query Loop WordPress/gutenberg#78282

Open

t-hamano reviewed Jun 7, 2026

View reviewed changes

t-hamano mentioned this pull request Jun 10, 2026

Block Supports: Prevent Additional CSS duplication inside Query Loop #12117

Closed

westonruter approved these changes Jul 4, 2026

View reviewed changes

westonruter requested a review from t-hamano July 4, 2026 01:15

t-hamano approved these changes Jul 6, 2026

View reviewed changes

pento force-pushed the trunk branch from 3af2d27 to 64ede28 Compare July 6, 2026 03:10

mukeshpanchal27 reviewed Jul 6, 2026

View reviewed changes

Mustafabharmal and others added 10 commits July 6, 2026 16:58

Block Supports: Prevent Additional CSS duplication inside Query Loop

4a92c05

Reformat block comment indentation in custom-css.php

1d6d46c

Refactor: custom CSS handling to prevent duplicate styles in Query Loop

f7b4679

add: testcase for the issue

fd01377

Update comment

25ebd8c

Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Add return type for wp_render_custom_css_support_styles()

ef001a3

Refine test logic

c78ddac

Unset styles resistry at set_up/tear_down instead of deregistering st…

9d785fe

…yle at end of test

Eliminate delimiter from being in capture group

68a7ac7

Eliminate unnecessary _wp_array_set() in favor of simple array assi…

aa8abc4

…gnment In addition to being simpler, this ensures PHPStan is able to statically-analyze the return value.

t-hamano force-pushed the fix/65268-prevent-additional-css-duplication-query-loop branch from 8aabf1e to aa8abc4 Compare July 6, 2026 08:04

Fix PHPDoc comment format

d151e2f

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

t-hamano reviewed Jul 6, 2026

View reviewed changes

Comment thread src/wp-includes/block-supports/custom-css.php Outdated

Revert to the previous Dockblock style

a081dfd

mukeshpanchal27 reviewed Jul 6, 2026

View reviewed changes

Uh oh!

Conversation

Mustafabharmal commented May 19, 2026

What

Why

How

Uh oh!

github-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 19, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

westonruter commented Jun 7, 2026

Uh oh!

t-hamano Jun 7, 2026 • edited by westonruter Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

masteradhoc commented Jun 23, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter commented Jul 6, 2026

Uh oh!

t-hamano commented Jul 6, 2026

Uh oh!

mukeshpanchal27 commented Jul 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Jul 6, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions Bot commented May 19, 2026 •

edited

Loading

t-hamano Jun 7, 2026 •

edited by westonruter

Loading