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

@ -369,6 +369,7 @@ p.has-drop-cap:not(:focus)::first-letter {
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6); background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
background-repeat: repeat-x; background-repeat: repeat-x;
color: #7c7c7c;
} }
/* Separator */ /* Separator */

View File

@ -920,8 +920,8 @@ hr.wp-block-separator.is-style-dots::before {
/* Block: Button ----------------------------- */ /* Block: Button ----------------------------- */
.editor-styles-wrapper .wp-block-button__link, :root .editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-block-file__button { :root .editor-styles-wrapper .wp-block-file__button {
background: #cd2653; background: #cd2653;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
@ -937,6 +937,11 @@ hr.wp-block-separator.is-style-dots::before {
line-height: 1.1; line-height: 1.1;
} }
.editor-styles-wrapper .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-file__button:hover {
text-decoration: underline;
}
/* BUTTON STYLE: OUTLINE */ /* BUTTON STYLE: OUTLINE */
.editor-styles-wrapper .is-style-outline .wp-block-button__link, .editor-styles-wrapper .is-style-outline .wp-block-button__link,
@ -1301,8 +1306,8 @@ hr.wp-block-separator.is-style-dots::before {
/* BLOCK: BUTTON */ /* BLOCK: BUTTON */
.editor-styles-wrapper .wp-block-button__link, :root .editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-block-file__button { :root .editor-styles-wrapper .wp-block-file__button {
font-size: 17px; font-size: 17px;
} }

View File

@ -924,8 +924,8 @@ hr.wp-block-separator.is-style-dots::before {
/* Block: Button ----------------------------- */ /* Block: Button ----------------------------- */
.editor-styles-wrapper .wp-block-button__link, :root .editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-block-file__button { :root .editor-styles-wrapper .wp-block-file__button {
background: #cd2653; background: #cd2653;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
@ -941,6 +941,11 @@ hr.wp-block-separator.is-style-dots::before {
line-height: 1.1; line-height: 1.1;
} }
.editor-styles-wrapper .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-file__button:hover {
text-decoration: underline;
}
/* BUTTON STYLE: OUTLINE */ /* BUTTON STYLE: OUTLINE */
.editor-styles-wrapper .is-style-outline .wp-block-button__link, .editor-styles-wrapper .is-style-outline .wp-block-button__link,
@ -1305,8 +1310,8 @@ hr.wp-block-separator.is-style-dots::before {
/* BLOCK: BUTTON */ /* BLOCK: BUTTON */
.editor-styles-wrapper .wp-block-button__link, :root .editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-block-file__button { :root .editor-styles-wrapper .wp-block-file__button {
font-size: 17px; font-size: 17px;
} }

View File

@ -0,0 +1,18 @@
/**
* These rules are needed for backwards compatibility.
* They should match the button element rules in the base theme.json file.
*/
.wp-block-button__link {
color: #ffffff;
background-color: #32373c;
border-radius: 9999px; /* 100% causes an oval, but any explicit but really high value retains the pill shape. */
/* This needs a low specificity so it won't override the rules from the button element if defined in theme.json. */
box-shadow: none;
text-decoration: none;
/* The extra 2px are added to size solids the same as the outline versions.*/
padding: calc(0.667em + 2px) calc(1.333em + 2px);
font-size: 1.125em;
}

View File

@ -0,0 +1,2 @@
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}

View File

@ -560,7 +560,6 @@ add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
add_action( 'wp_enqueue_scripts', 'wp_enqueue_classic_theme_styles' ); add_action( 'wp_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 ); add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' ); add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
add_action( 'admin_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' ); add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
add_action( 'enqueue_block_assets', 'enqueue_block_styles_assets', 30 ); add_action( 'enqueue_block_assets', 'enqueue_block_styles_assets', 30 );
add_action( 'enqueue_block_editor_assets', 'wp_enqueue_registered_block_scripts_and_styles' ); add_action( 'enqueue_block_editor_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
@ -572,6 +571,7 @@ add_filter( 'wp_print_scripts', 'wp_just_in_time_script_localization' );
add_filter( 'print_scripts_array', 'wp_prototype_before_jquery' ); add_filter( 'print_scripts_array', 'wp_prototype_before_jquery' );
add_filter( 'customize_controls_print_styles', 'wp_resource_hints', 1 ); add_filter( 'customize_controls_print_styles', 'wp_resource_hints', 1 );
add_action( 'admin_head', 'wp_check_widget_editor_deps' ); add_action( 'admin_head', 'wp_check_widget_editor_deps' );
add_filter( 'block_editor_settings_all', 'wp_add_editor_classic_theme_styles' );
// Global styles can be enqueued in both the header and the footer. See https://core.trac.wordpress.org/ticket/53494. // Global styles can be enqueued in both the header and the footer. See https://core.trac.wordpress.org/ticket/53494.
add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );

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. * This is needed for backwards compatibility for button blocks specifically.
* *
* @since 6.1.0 * @since 6.1.0
*/ */
function wp_enqueue_classic_theme_styles() { function wp_enqueue_classic_theme_styles() {
if ( ! wp_is_block_theme() ) { if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
$suffix = wp_scripts_get_suffix(); $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' ); 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;
}

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.2-alpha-54686'; $wp_version = '6.2-alpha-54687';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.