Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#63908 new defect (bug)

Style concatenation may duplicate inline styles

Reported by: jonsurrell's profile jonsurrell 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.

Change History (1)

#1 @westonruter
5 months ago

This would be fixed by eliminating concatenation: #57548

Note: See TracTickets for help on using tickets.