From 88eb88841642ade9c1ee90b9c58ca31226898b59 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 17 Oct 2022 12:26:56 +0100 Subject: [PATCH 01/11] Backport: Gutenberg 44731 --- src/wp-includes/default-filters.php | 2 +- src/wp-includes/script-loader.php | 32 ++++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index 1d69c809e0ce6..e9ca31f5f7908 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -560,7 +560,6 @@ 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( '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/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 6f844cbc7e984..8f9e420d3cf98 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3658,7 +3658,7 @@ 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. * @@ -3671,3 +3671,33 @@ function wp_enqueue_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_is_block_theme() ) { + return $editor_settings; + } + $suffix = wp_scripts_get_suffix(); + $classic_theme_styles = "/wp-includes/css/dist/block-library/classic$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. + $editor_settings['styles'][] = array( + 'css' => file_get_contents( $classic_theme_styles ), + 'baseURL' => get_theme_file_uri( $classic_theme_styles ), + '__unstableType' => 'theme', + 'isGlobalStyles' => false, + ); + + return $editor_settings; +} From 4fbe1816ae66f637b413f4977cd352368554b666 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 18 Oct 2022 10:40:00 +0100 Subject: [PATCH 02/11] Pick changes from Gutenberg 45063 --- src/wp-includes/script-loader.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 8f9e420d3cf98..60bc5a37b6b02 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3665,7 +3665,7 @@ function _wp_theme_json_webfonts_handler() { * @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_enqueue_style( 'classic-theme-styles' ); @@ -3683,7 +3683,7 @@ function wp_enqueue_classic_theme_styles() { * @return array A filtered array of editor settings. */ function wp_add_editor_classic_theme_styles( $editor_settings ) { - if ( wp_is_block_theme() ) { + if ( WP_Theme_JSON_Resolver::theme_has_support() ) { return $editor_settings; } $suffix = wp_scripts_get_suffix(); From 96efadd294d149b68c6d442400af3826ed67f256 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 17 Oct 2022 21:22:00 +0200 Subject: [PATCH 03/11] Fix path --- src/wp-includes/script-loader.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 60bc5a37b6b02..fa789abb75216 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3687,13 +3687,13 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { return $editor_settings; } $suffix = wp_scripts_get_suffix(); - $classic_theme_styles = "/wp-includes/css/dist/block-library/classic$suffix.css"; + $classic_theme_styles = "/css/dist/block-library/classic$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. $editor_settings['styles'][] = array( - 'css' => file_get_contents( $classic_theme_styles ), + 'css' => file_get_contents( __DIR__ . $classic_theme_styles ), 'baseURL' => get_theme_file_uri( $classic_theme_styles ), '__unstableType' => 'theme', 'isGlobalStyles' => false, From 01361386c6bf0287a6904a0ab789828d676fa60b Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 17 Oct 2022 21:22:17 +0200 Subject: [PATCH 04/11] Remove baseURL --- src/wp-includes/script-loader.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index fa789abb75216..88b44300df0b8 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3694,7 +3694,6 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { // only handles external files or theme files. $editor_settings['styles'][] = array( 'css' => file_get_contents( __DIR__ . $classic_theme_styles ), - 'baseURL' => get_theme_file_uri( $classic_theme_styles ), '__unstableType' => 'theme', 'isGlobalStyles' => false, ); From 3ac78f502db467491a0fd17ffc21ffddc3462a98 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 17 Oct 2022 21:22:40 +0200 Subject: [PATCH 05/11] Simplify --- src/wp-includes/script-loader.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 88b44300df0b8..593ad4aec93f2 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3687,13 +3687,13 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { return $editor_settings; } $suffix = wp_scripts_get_suffix(); - $classic_theme_styles = "/css/dist/block-library/classic$suffix.css"; + $classic_theme_styles = __DIR__ . "/css/dist/block-library/classic$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. $editor_settings['styles'][] = array( - 'css' => file_get_contents( __DIR__ . $classic_theme_styles ), + 'css' => file_get_contents( $classic_theme_styles ), '__unstableType' => 'theme', 'isGlobalStyles' => false, ); From 865ce5445920a3602a5f61067836435d155173b8 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 17 Oct 2022 23:09:25 +0200 Subject: [PATCH 06/11] Set __unstableType to core --- src/wp-includes/script-loader.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 593ad4aec93f2..f394804fbfa09 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3694,7 +3694,7 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { // only handles external files or theme files. $editor_settings['styles'][] = array( 'css' => file_get_contents( $classic_theme_styles ), - '__unstableType' => 'theme', + '__unstableType' => 'core', 'isGlobalStyles' => false, ); From 2878b543e5c3f5f7015d07f09035a9d27807c485 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 18 Oct 2022 15:51:32 +0100 Subject: [PATCH 07/11] add core settings to the start of the array so themes can override them --- .../themes/twentytwenty/assets/css/editor-style-classic.css | 6 ++++++ src/wp-includes/script-loader.php | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css index d471b3723382c..cba1ead2f68eb 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css @@ -518,6 +518,8 @@ body#tinymce.wp-editor.content button, body#tinymce.wp-editor.content .faux-button, body#tinymce.wp-editor.content .wp-block-button__link, body#tinymce.wp-editor.content .wp-block-file__button, +.wp-block-button__link, +.wp-block-file__button, body#tinymce.wp-editor.content input[type="button"], body#tinymce.wp-editor.content input[type="reset"], body#tinymce.wp-editor.content input[type="submit"] { @@ -548,6 +550,10 @@ body#tinymce.wp-editor.content .wp-block-button__link:focus, body#tinymce.wp-editor.content .wp-block-button__link:hover, body#tinymce.wp-editor.content .wp-block-file__button:focus, body#tinymce.wp-editor.content .wp-block-file__button:hover, +.wp-block-button__link:focus, +.wp-block-button__link:hover, +.wp-block-file__button:focus, +.wp-block-file__button:hover, body#tinymce.wp-editor.content input[type="button"]:focus, body#tinymce.wp-editor.content input[type="button"]:hover, body#tinymce.wp-editor.content input[type="reset"]:focus, diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index f394804fbfa09..7b79d9d1817a9 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3692,11 +3692,14 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { // 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. - $editor_settings['styles'][] = array( + $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; } From 48b9f9e9aa86582fa8238306fa2457fd2113e2c6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Oct 2022 11:51:32 +0100 Subject: [PATCH 08/11] Add classic theme styles as a static file not in a package --- src/wp-includes/css/classic-themes.css | 18 ++++++++++++++++++ src/wp-includes/script-loader.php | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/wp-includes/css/classic-themes.css diff --git a/src/wp-includes/css/classic-themes.css b/src/wp-includes/css/classic-themes.css new file mode 100644 index 0000000000000..d77a25a3b95a4 --- /dev/null +++ b/src/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/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 7b79d9d1817a9..fd1bf4b6fa93b 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3667,7 +3667,7 @@ function _wp_theme_json_webfonts_handler() { function wp_enqueue_classic_theme_styles() { 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' ); } } @@ -3687,7 +3687,7 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) { return $editor_settings; } $suffix = wp_scripts_get_suffix(); - $classic_theme_styles = __DIR__ . "/css/dist/block-library/classic$suffix.css"; + $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 From 98d03a54b2f3445fd04b783d37a593d0f2a2475b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 19 Oct 2022 14:09:24 +0100 Subject: [PATCH 09/11] add a button text color for the editor --- src/wp-content/themes/twentytwelve/css/editor-blocks.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-content/themes/twentytwelve/css/editor-blocks.css b/src/wp-content/themes/twentytwelve/css/editor-blocks.css index d9efec32d59b7..29eb1f7ede596 100644 --- a/src/wp-content/themes/twentytwelve/css/editor-blocks.css +++ b/src/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 */ From 4f17c05c4c1d12095aca3564d929c1523cb064bd Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 21 Oct 2022 11:25:59 +0100 Subject: [PATCH 10/11] revert changes to the classic editor styles and update block editor styles --- .../twentytwenty/assets/css/editor-style-block.css | 13 +++++++++---- .../assets/css/editor-style-classic.css | 6 ------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css index 8b62985520683..18e83281076db 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/src/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/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css index cba1ead2f68eb..d471b3723382c 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css @@ -518,8 +518,6 @@ body#tinymce.wp-editor.content button, body#tinymce.wp-editor.content .faux-button, body#tinymce.wp-editor.content .wp-block-button__link, body#tinymce.wp-editor.content .wp-block-file__button, -.wp-block-button__link, -.wp-block-file__button, body#tinymce.wp-editor.content input[type="button"], body#tinymce.wp-editor.content input[type="reset"], body#tinymce.wp-editor.content input[type="submit"] { @@ -550,10 +548,6 @@ body#tinymce.wp-editor.content .wp-block-button__link:focus, body#tinymce.wp-editor.content .wp-block-button__link:hover, body#tinymce.wp-editor.content .wp-block-file__button:focus, body#tinymce.wp-editor.content .wp-block-file__button:hover, -.wp-block-button__link:focus, -.wp-block-button__link:hover, -.wp-block-file__button:focus, -.wp-block-file__button:hover, body#tinymce.wp-editor.content input[type="button"]:focus, body#tinymce.wp-editor.content input[type="button"]:hover, body#tinymce.wp-editor.content input[type="reset"]:focus, From 0b9b6284ea83a5af5c4fcd149b9130d76774f6d8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 21 Oct 2022 11:29:30 +0100 Subject: [PATCH 11/11] update RTL --- .../assets/css/editor-style-block-rtl.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css index 063075bf1ab31..2c3192b00fcd1 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css +++ b/src/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; }