Editor: Correctly apply Button block styles for classic themes

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific.

This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity.

Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes.

Merges [https://github.com/WordPress/gutenberg/pull/44731 Gutenberg PR 44731] into trunk.

Follow-up to [54358].
Props scruffian, cbravobernal, sabernhardt, audrasjb.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54687


git-svn-id: http://core.svn.wordpress.org/trunk@54239 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Bernhard Reiter
2022-10-25 12:19:18 +00:00
parent a921157f3a
commit bbb40de012
8 changed files with 76 additions and 13 deletions

View File

@@ -3658,16 +3658,48 @@ function _wp_theme_json_webfonts_handler() {
}
/**
* Loads classic theme styles on classic themes.
* Loads classic theme styles on classic themes in the frontend.
*
* This is needed for backwards compatibility for button blocks specifically.
*
* @since 6.1.0
*/
function wp_enqueue_classic_theme_styles() {
if ( ! wp_is_block_theme() ) {
if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
$suffix = wp_scripts_get_suffix();
wp_register_style( 'classic-theme-styles', "/wp-includes/css/dist/block-library/classic$suffix.css", array(), true );
wp_register_style( 'classic-theme-styles', '/' . WPINC . "/css/classic-themes$suffix.css", array(), true );
wp_enqueue_style( 'classic-theme-styles' );
}
}
/**
* Loads classic theme styles on classic themes in the editor.
*
* This is needed for backwards compatibility for button blocks specifically.
*
* @since 6.1.0
*
* @param array $editor_settings The array of editor settings.
* @return array A filtered array of editor settings.
*/
function wp_add_editor_classic_theme_styles( $editor_settings ) {
if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
return $editor_settings;
}
$suffix = wp_scripts_get_suffix();
$classic_theme_styles = ABSPATH . WPINC . "/css/classic-themes$suffix.css";
// This follows the pattern of get_block_editor_theme_styles,
// but we can't use get_block_editor_theme_styles directly as it
// only handles external files or theme files.
$classic_theme_styles_settings = array(
'css' => file_get_contents( $classic_theme_styles ),
'__unstableType' => 'core',
'isGlobalStyles' => false,
);
// Add these settings to the start of the array so that themes can override them.
array_unshift( $editor_settings['styles'], $classic_theme_styles_settings );
return $editor_settings;
}