![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 2 months ago
Closed 12 days ago
#65268 closed defect (bug) (fixed)
Block Supports: Prevent Additional CSS duplication inside Query Loop
| Reported by: | mustafabharmal | Owned by: | wildworks |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Editor | Version: | 7.0 |
| Severity: | normal | Keywords: | has-patch gutenberg-merge changes-requested has-unit-tests |
| Cc: | Focuses: |
Description
When using the Additional CSS feature on a block inside a Query Loop, the generated CSS is inserted once for every rendered post/item in the loop. This causes the same CSS rules to be duplicated N times in the page output.
Root cause: gutenberg_render_custom_css_support_styles is hooked to render_block_data, which fires once per block render. Inside a Query Loop the same block template renders once per post, so wp_add_inline_style is called N times with the same CSS content.
Since wp_unique_id_from_values produces the same hash for the same block data, each loop iteration generates the same $class_name and the same $processed_css.
Fix: Use a static variable to track already-enqueued class names so subsequent loop iterations skip the redundant wp_add_inline_style call.
Gutenberg issue: https://github.com/WordPress/gutenberg/issues/78278
Gutenberg PR: https://github.com/WordPress/gutenberg/pull/78282
Change History (18)
This ticket was mentioned in PR #11859 on WordPress/wordpress-develop by @mustafabharmal.
2 months ago
#2
#4
@
2 months ago
Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.
#5
@
2 months ago
- Component General → Editor
I'm unclear if this is a regression in 7.0 or not. Leaving trunk as the version for now.
@westonruter commented on PR #11859:
6 weeks ago
#6
We should add a test for this as well.
This ticket was mentioned in PR #12117 on WordPress/wordpress-develop by @anupkankale.
6 weeks ago
#8
- Keywords has-unit-tests added; needs-unit-tests removed
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. This was because wp_unique_id_from_values produces the same hash for the same block data on every loop iteration.
This fix adds a static $enqueued_class_names array to track already-enqueued class names so subsequent loop iterations skip the redundant wp_add_inline_style call.
Props mustafabharmal, westonruter.
Fixes #65268.
Trac ticket:
## Use of AI Tools
@wildworks commented on PR #12117:
6 weeks ago
#9
Thank you for the PR. However, we already have an ongoing PR for this: https://github.com/WordPress/wordpress-develop/pull/11859
@masteradhoc commented on PR #11859:
4 weeks ago
#10
@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!
This ticket was mentioned in Slack in #core by cbravobernal. View the logs.
3 weeks ago
@westonruter commented on PR #11859:
2 weeks ago
#14
LGTM! I would like to commit this later.
Go for it.
@wildworks commented on PR #11859:
2 weeks ago
#15
@pento, it appears that unnecessary changes were added due to the force push.
@mukesh27 commented on PR #11859:
13 days ago
#16
@pento, it appears that unnecessary changes were added due to the force push.
+1
@wildworks commented on PR #11859:
13 days ago
#17
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.
Trac ticket: https://core.trac.wordpress.org/ticket/65268
## What
When a block inside a Query Loop has Additional CSS,
wp_add_inline_stylewas called once per post in the loop, duplicating the same CSS N times.## Why
wp_render_custom_css_support_styleshooksrender_block_data, which fires for every block render.wp_unique_id_from_valuesproduces 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_namesarray. The first time a class name is seen the CSS is enqueued; subsequent renders skip it.Gutenberg PR: https://github.com/WordPress/gutenberg/pull/78282