Make WordPress Core

Changeset 54688


Ignore:
Timestamp:
10/25/2022 01:43:49 PM (19 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:
1 added
5 edited

Legend:

Unmodified
Added
Removed
  • branches/6.1/src/wp-content/themes/twentytwelve/css/editor-blocks.css

    r48459 r54688  
    370370    background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
    371371    background-repeat: repeat-x;
     372    color: #7c7c7c;
    372373}
    373374
  • branches/6.1/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    r54418 r54688  
    921921/* Block: Button ----------------------------- */
    922922
    923 .editor-styles-wrapper .wp-block-button__link,
    924 .editor-styles-wrapper .wp-block-file__button {
     923:root .editor-styles-wrapper .wp-block-button__link,
     924:root .editor-styles-wrapper .wp-block-file__button {
    925925    background: #cd2653;
    926926    border-radius: 0;
     
    938938}
    939939
     940.editor-styles-wrapper .wp-block-button__link:hover,
     941.editor-styles-wrapper .wp-block-file__button:hover {
     942    text-decoration: underline;
     943}
     944
    940945/* BUTTON STYLE: OUTLINE */
    941946
     
    13021307    /* BLOCK: BUTTON */
    13031308
    1304     .editor-styles-wrapper .wp-block-button__link,
    1305     .editor-styles-wrapper .wp-block-file__button {
     1309    :root .editor-styles-wrapper .wp-block-button__link,
     1310    :root .editor-styles-wrapper .wp-block-file__button {
    13061311        font-size: 17px;
    13071312    }
  • branches/6.1/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

    r54418 r54688  
    925925/* Block: Button ----------------------------- */
    926926
    927 .editor-styles-wrapper .wp-block-button__link,
    928 .editor-styles-wrapper .wp-block-file__button {
     927:root .editor-styles-wrapper .wp-block-button__link,
     928:root .editor-styles-wrapper .wp-block-file__button {
    929929    background: #cd2653;
    930930    border-radius: 0;
     
    942942}
    943943
     944.editor-styles-wrapper .wp-block-button__link:hover,
     945.editor-styles-wrapper .wp-block-file__button:hover {
     946    text-decoration: underline;
     947}
     948
    944949/* BUTTON STYLE: OUTLINE */
    945950
     
    13061311    /* BLOCK: BUTTON */
    13071312
    1308     .editor-styles-wrapper .wp-block-button__link,
    1309     .editor-styles-wrapper .wp-block-file__button {
     1313    :root .editor-styles-wrapper .wp-block-button__link,
     1314    :root .editor-styles-wrapper .wp-block-file__button {
    13101315        font-size: 17px;
    13111316    }
  • branches/6.1/src/wp-includes/default-filters.php

    r54497 r54688  
    561561add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
    562562add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
    563 add_action( 'admin_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
    564563add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
    565564add_action( 'enqueue_block_assets', 'enqueue_block_styles_assets', 30 );
     
    573572add_filter( 'customize_controls_print_styles', 'wp_resource_hints', 1 );
    574573add_action( 'admin_head', 'wp_check_widget_editor_deps' );
     574add_filter( 'block_editor_settings_all', 'wp_add_editor_classic_theme_styles' );
    575575
    576576// 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

    r54501 r54688  
    36593659
    36603660/**
    3661  * Loads classic theme styles on classic themes.
     3661 * Loads classic theme styles on classic themes in the frontend.
    36623662 *
    36633663 * This is needed for backwards compatibility for button blocks specifically.
     
    36663666 */
    36673667function wp_enqueue_classic_theme_styles() {
    3668     if ( ! wp_is_block_theme() ) {
     3668    if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
    36693669        $suffix = wp_scripts_get_suffix();
    3670         wp_register_style( 'classic-theme-styles', "/wp-includes/css/dist/block-library/classic$suffix.css", array(), true );
     3670        wp_register_style( 'classic-theme-styles', '/' . WPINC . "/css/classic-themes$suffix.css", array(), true );
    36713671        wp_enqueue_style( 'classic-theme-styles' );
    36723672    }
    36733673}
     3674
     3675/**
     3676 * Loads classic theme styles on classic themes in the editor.
     3677 *
     3678 * This is needed for backwards compatibility for button blocks specifically.
     3679 *
     3680 * @since 6.1.0
     3681 *
     3682 * @param array $editor_settings The array of editor settings.
     3683 * @return array A filtered array of editor settings.
     3684 */
     3685function wp_add_editor_classic_theme_styles( $editor_settings ) {
     3686    if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
     3687        return $editor_settings;
     3688    }
     3689    $suffix = wp_scripts_get_suffix();
     3690    $classic_theme_styles = ABSPATH . WPINC . "/css/classic-themes$suffix.css";
     3691
     3692    // This follows the pattern of get_block_editor_theme_styles,
     3693    // but we can't use get_block_editor_theme_styles directly as it
     3694    // only handles external files or theme files.
     3695    $classic_theme_styles_settings = array(
     3696        'css'            => file_get_contents( $classic_theme_styles ),
     3697        '__unstableType' => 'core',
     3698        'isGlobalStyles' => false,
     3699    );
     3700
     3701    // Add these settings to the start of the array so that themes can override them.
     3702    array_unshift( $editor_settings['styles'], $classic_theme_styles_settings );
     3703
     3704    return $editor_settings;
     3705}
Note: See TracChangeset for help on using the changeset viewer.