From 31adfecbf36951ec35ff0cbcdf96adfbe26ccaa0 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Tue, 22 Jun 2021 13:32:42 +0000 Subject: [PATCH] Widgets: Add editor styles to the widgets block editor. This updates the widgets screen to load the editor styles in the same way as the post editor. This combined with the package updates in [51198] and [51199] ensures that the blocks added to sidebars more accurately reflect what will be displayed on the front end of the site. Props isabel_brison, noisysocks, andraganescu, audrasjb, jorbin, caseymilne, desrosj. Fixes #53344. See #53388. git-svn-id: https://develop.svn.wordpress.org/trunk@51200 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/edit-form-blocks.php | 35 +--------------- src/wp-admin/widgets-form-blocks.php | 2 +- src/wp-includes/block-editor.php | 45 +++++++++++++++++++++ tests/phpunit/tests/blocks/block-editor.php | 15 +++++++ 4 files changed, 63 insertions(+), 34 deletions(-) diff --git a/src/wp-admin/edit-form-blocks.php b/src/wp-admin/edit-form-blocks.php index e757dc4fe8..3a399c2fcd 100644 --- a/src/wp-admin/edit-form-blocks.php +++ b/src/wp-admin/edit-form-blocks.php @@ -18,10 +18,9 @@ if ( ! defined( 'ABSPATH' ) ) { * @global WP_Post_Type $post_type_object * @global WP_Post $post Global post object. * @global string $title - * @global array $editor_styles * @global array $wp_meta_boxes */ -global $post_type, $post_type_object, $post, $title, $editor_styles, $wp_meta_boxes; +global $post_type, $post_type_object, $post, $title, $wp_meta_boxes; $block_editor_context = new WP_Block_Editor_Context( array( 'post' => $post ) ); @@ -128,36 +127,6 @@ $available_templates = ! empty( $available_templates ) ? array_merge( $available_templates ) : $available_templates; -// Editor Styles. -$styles = array( - array( - 'css' => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }', - '__unstableType' => 'core', - ), -); -if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) { - foreach ( $editor_styles as $style ) { - if ( preg_match( '~^(https?:)?//~', $style ) ) { - $response = wp_remote_get( $style ); - if ( ! is_wp_error( $response ) ) { - $styles[] = array( - 'css' => wp_remote_retrieve_body( $response ), - '__unstableType' => 'theme', - ); - } - } else { - $file = get_theme_file_path( $style ); - if ( is_file( $file ) ) { - $styles[] = array( - 'css' => file_get_contents( $file ), - 'baseURL' => get_theme_file_uri( $style ), - '__unstableType' => 'theme', - ); - } - } - } -} - // Lock settings. $user_id = wp_check_post_lock( $post->ID ); if ( $user_id ) { @@ -212,7 +181,7 @@ $editor_settings = array( 'titlePlaceholder' => apply_filters( 'enter_title_here', __( 'Add title' ), $post ), 'bodyPlaceholder' => $body_placeholder, 'autosaveInterval' => AUTOSAVE_INTERVAL, - 'styles' => $styles, + 'styles' => get_block_editor_theme_styles(), 'richEditingEnabled' => user_can_richedit(), 'postLock' => $lock_details, 'postLockUtils' => array( diff --git a/src/wp-admin/widgets-form-blocks.php b/src/wp-admin/widgets-form-blocks.php index a40b01fd64..6921ff7a15 100644 --- a/src/wp-admin/widgets-form-blocks.php +++ b/src/wp-admin/widgets-form-blocks.php @@ -25,7 +25,7 @@ $preload_paths = array( block_editor_rest_api_preload( $preload_paths, $block_editor_context ); $editor_settings = get_block_editor_settings( - get_legacy_widget_block_editor_settings(), + array_merge( get_legacy_widget_block_editor_settings(), array( 'styles' => get_block_editor_theme_styles() ) ), $block_editor_context ); diff --git a/src/wp-includes/block-editor.php b/src/wp-includes/block-editor.php index 90ba12d096..e0a40e7365 100644 --- a/src/wp-includes/block-editor.php +++ b/src/wp-includes/block-editor.php @@ -464,3 +464,48 @@ function block_editor_rest_api_preload( array $preload_paths, $block_editor_cont 'after' ); } + +/** + * Creates an array of theme styles to load into the block editor. + * + * @since 5.8.0 + * + * @global array $editor_styles + * + * @return array An array of theme styles for the block editor. Includes default font family + * style and theme stylesheets. + */ +function get_block_editor_theme_styles() { + global $editor_styles; + + $styles = array( + array( + 'css' => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }', + '__unstableType' => 'core', + ), + ); + if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) { + foreach ( $editor_styles as $style ) { + if ( preg_match( '~^(https?:)?//~', $style ) ) { + $response = wp_remote_get( $style ); + if ( ! is_wp_error( $response ) ) { + $styles[] = array( + 'css' => wp_remote_retrieve_body( $response ), + '__unstableType' => 'theme', + ); + } + } else { + $file = get_theme_file_path( $style ); + if ( is_file( $file ) ) { + $styles[] = array( + 'css' => file_get_contents( $file ), + 'baseURL' => get_theme_file_uri( $style ), + '__unstableType' => 'theme', + ); + } + } + } + } + + return $styles; +} diff --git a/tests/phpunit/tests/blocks/block-editor.php b/tests/phpunit/tests/blocks/block-editor.php index 5684ea5f2c..42166be6da 100644 --- a/tests/phpunit/tests/blocks/block-editor.php +++ b/tests/phpunit/tests/blocks/block-editor.php @@ -429,4 +429,19 @@ class WP_Test_Block_Editor extends WP_UnitTestCase { $this->assertContains( '"\/wp\/v2\/blocks"', $after ); $this->assertContains( '"\/wp\/v2\/types"', $after ); } + + /** + * @ticket 53344 + */ + function test_get_block_editor_theme_styles() { + $theme_styles = get_block_editor_theme_styles(); + $this->assertCount( 1, $theme_styles ); + $this->assertSameSets( + array( + 'css' => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }', + '__unstableType' => 'core', + ), + $theme_styles[0] + ); + } }