From bbb40de012670768a525193639c0d5e4ea932df7 Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Tue, 25 Oct 2022 12:19:18 +0000 Subject: [PATCH] Editor: Correctly apply Button block styles for classic themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../themes/twentytwelve/css/editor-blocks.css | 1 + .../assets/css/editor-style-block-rtl.css | 13 +++++-- .../assets/css/editor-style-block.css | 13 +++++-- wp-includes/css/classic-themes.css | 18 +++++++++ wp-includes/css/classic-themes.min.css | 2 + wp-includes/default-filters.php | 2 +- wp-includes/script-loader.php | 38 +++++++++++++++++-- wp-includes/version.php | 2 +- 8 files changed, 76 insertions(+), 13 deletions(-) create mode 100644 wp-includes/css/classic-themes.css create mode 100644 wp-includes/css/classic-themes.min.css diff --git a/wp-content/themes/twentytwelve/css/editor-blocks.css b/wp-content/themes/twentytwelve/css/editor-blocks.css index d9efec32d5..29eb1f7ede 100644 --- a/wp-content/themes/twentytwelve/css/editor-blocks.css +++ b/wp-content/themes/twentytwelve/css/editor-blocks.css @@ -369,6 +369,7 @@ p.has-drop-cap:not(:focus)::first-letter { background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6); background-repeat: repeat-x; + color: #7c7c7c; } /* Separator */ diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css index 063075bf1a..2c3192b00f 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css @@ -920,8 +920,8 @@ hr.wp-block-separator.is-style-dots::before { /* Block: Button ----------------------------- */ -.editor-styles-wrapper .wp-block-button__link, -.editor-styles-wrapper .wp-block-file__button { +:root .editor-styles-wrapper .wp-block-button__link, +:root .editor-styles-wrapper .wp-block-file__button { background: #cd2653; border-radius: 0; color: #fff; @@ -937,6 +937,11 @@ hr.wp-block-separator.is-style-dots::before { 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 */ .editor-styles-wrapper .is-style-outline .wp-block-button__link, @@ -1301,8 +1306,8 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: BUTTON */ - .editor-styles-wrapper .wp-block-button__link, - .editor-styles-wrapper .wp-block-file__button { + :root .editor-styles-wrapper .wp-block-button__link, + :root .editor-styles-wrapper .wp-block-file__button { font-size: 17px; } diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css index 8b62985520..18e8328107 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -924,8 +924,8 @@ hr.wp-block-separator.is-style-dots::before { /* Block: Button ----------------------------- */ -.editor-styles-wrapper .wp-block-button__link, -.editor-styles-wrapper .wp-block-file__button { +:root .editor-styles-wrapper .wp-block-button__link, +:root .editor-styles-wrapper .wp-block-file__button { background: #cd2653; border-radius: 0; color: #fff; @@ -941,6 +941,11 @@ hr.wp-block-separator.is-style-dots::before { 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 */ .editor-styles-wrapper .is-style-outline .wp-block-button__link, @@ -1305,8 +1310,8 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: BUTTON */ - .editor-styles-wrapper .wp-block-button__link, - .editor-styles-wrapper .wp-block-file__button { + :root .editor-styles-wrapper .wp-block-button__link, + :root .editor-styles-wrapper .wp-block-file__button { font-size: 17px; } diff --git a/wp-includes/css/classic-themes.css b/wp-includes/css/classic-themes.css new file mode 100644 index 0000000000..d77a25a3b9 --- /dev/null +++ b/wp-includes/css/classic-themes.css @@ -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; +} diff --git a/wp-includes/css/classic-themes.min.css b/wp-includes/css/classic-themes.min.css new file mode 100644 index 0000000000..695cb3c362 --- /dev/null +++ b/wp-includes/css/classic-themes.min.css @@ -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} \ No newline at end of file diff --git a/wp-includes/default-filters.php b/wp-includes/default-filters.php index 1d69c809e0..e9ca31f5f7 100644 --- a/wp-includes/default-filters.php +++ b/wp-includes/default-filters.php @@ -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( '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_enqueue_classic_theme_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_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( 'customize_controls_print_styles', 'wp_resource_hints', 1 ); 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. add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 6f844cbc7e..fd1bf4b6fa 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -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; +} diff --git a/wp-includes/version.php b/wp-includes/version.php index 5b038952fc..05a7c73b0d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @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.