Changeset 54688

Timestamp:

10/25/2022 01:43:49 PM (23 months ago)

Author:

Bernhard Reiter

Message:

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 ​Gutenberg PR 44731 into trunk.

Follow-up to [54358].
Props scruffian, cbravobernal, sabernhardt, audrasjb.
Merges [54687] to the 6.1 branch.
See #56467.

Location:

branches/6.1/src

Files:

• wp-content/themes/twentytwelve/css/editor-blocks.css (modified) (1 diff)
• wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css (modified) (3 diffs)
• wp-content/themes/twentytwenty/assets/css/editor-style-block.css (modified) (3 diffs)
• wp-includes/css/classic-themes.css (added)
• wp-includes/default-filters.php (modified) (2 diffs)
• wp-includes/script-loader.php (modified) (2 diffs)

branches/6.1/src/wp-content/themes/twentytwelve/css/editor-blocks.css

@@ -370 +370 @@
     background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
     background-repeat: repeat-x;
+    color: #7c7c7c;
 }
 

branches/6.1/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

@@ -921 +921 @@
 /* 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;
@@ -938 +938 @@
 }
 
+.editor-styles-wrapper .wp-block-button__link:hover,
+.editor-styles-wrapper .wp-block-file__button:hover {
+    text-decoration: underline;
+}
+
 /* BUTTON STYLE: OUTLINE */
 
@@ -1302 +1307 @@
     /* 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;
     }

branches/6.1/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

@@ -925 +925 @@
 /* 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;
@@ -942 +942 @@
 }
 
+.editor-styles-wrapper .wp-block-button__link:hover,
+.editor-styles-wrapper .wp-block-file__button:hover {
+    text-decoration: underline;
+}
+
 /* BUTTON STYLE: OUTLINE */
 
@@ -1306 +1311 @@
     /* 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;
     }

branches/6.1/src/wp-includes/default-filters.php

@@ -561 +561 @@
 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 );
@@ -573 +572 @@
 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.

branches/6.1/src/wp-includes/script-loader.php

@@ -3659 +3659 @@
 
 /**
- * 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.
@@ -3666 +3666 @@
  */
 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;
+}