Opened 5 months ago
Last modified 5 months ago
#63908 new defect (bug)
Style concatenation may duplicate inline styles
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Script Loader | Keywords: | |
| Focuses: | css | Cc: |
Description
When styles are concatenated with /wp-admin/load-styles.php in multiple batches, inline styles are duplicated across batches.
For example, with this snippet adds inline styles to some core styles:
<?php add_action( 'wp_default_styles', function ( $s ) { wp_add_inline_style( 'revisions', 'wp-example { content: "inline:revisions" }' ); wp_add_inline_style( 'dashicons', 'wp-example { content: "inline:dashicons" }' ); wp_add_inline_style( 'editor-buttons', 'wp-example { content: "inline:editor-buttons" }' ); return $s; } );
I visit /wp-admin/customize.php with the Twenty Twenty theme and SCRIPT_DEBUG set to false (script concatenation is enabled).
Multiple concatenated styles are used. First is a concatenation using wp-admin/load-styles.php for these styles:
dashicons, common, forms, admin-menu, dashboard, list-tables, edit, revisions, media, themes, about, nav-menus, wp-pointer, widgets, site-icon, l10n, buttons, customize-controls, customize-widgets, wp-block-library, classic-theme-styles, wp-components, wp-widgets, wp-preferences, wp-block-editor, wp-reusable-blocks, wp-patterns, wp-editor, wp-reset-editor-styles, wp-block-editor-content, wp-editor-classic-layout-styles, wp-edit-blocks, wp-customize-widgets, wp-block-directory, wp-format-library, customize-nav-menus, media-views, wp-color-picker, code-editor
<link rel='stylesheet' href='…' media='all' /> <style> wp-example { content: "inline:dashicons" }wp-example { content: "inline:revisions" } </style>
The inline styles associated with the styles are output after the stylesheet link.
Later, there is another concatenated styles, oddly this is _only_ for editor-buttons:
<link rel='stylesheet' href='…' media='all' /> <style> wp-example { content: "inline:dashicons" }wp-example { content: "inline:revisions" }wp-example { content: "inline:editor-buttons" } </style>
Notice that the inline styles from the previous concatenated script is included here, plus the additional editor-buttons inline style.
The concatenated inline styles should not be repeated in this block.
Even if editor-button does not have inline styles, the original concatenated inline styles will be output again after the editor-buttons concatenated style link.
This would be fixed by eliminating concatenation: #57548