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.
Built from https://develop.svn.wordpress.org/trunk@51200


git-svn-id: http://core.svn.wordpress.org/trunk@50809 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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(

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
 );
 

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;
+}

wp-includes/blocks/legacy-widget.php

@@ -24,13 +24,14 @@ function render_block_core_legacy_widget( $attributes ) {
 		return '';
 	}
 
-	if ( method_exists( $wp_widget_factory, 'get_widget_object' ) ) {
+	$id_base = $attributes['idBase'];
-		$widget_object = $wp_widget_factory->get_widget_object( $attributes['idBase'] );
+	if ( method_exists( $wp_widget_factory, 'get_widget_key' ) ) {
+		$widget_key = $wp_widget_factory->get_widget_key( $id_base );
 	} else {
-		$widget_object = gutenberg_get_widget_object( $attributes['idBase'] );
+		$widget_key = gutenberg_get_widget_key( $id_base );
 	}
 
-	if ( ! $widget_object ) {
+	if ( ! $widget_key ) {
 		return '';
 	}
 
@@ -45,7 +46,7 @@ function render_block_core_legacy_widget( $attributes ) {
 	}
 
 	ob_start();
-	the_widget( get_class( $widget_object ), $instance );
+	the_widget( $widget_key, $instance );
 	return ob_get_clean();
 }
 
@@ -90,7 +91,6 @@ function handle_legacy_widget_preview_iframe() {
 		<style>
 			/* Reset theme styles */
 			html, body, #page, #content {
-				background: #FFF !important;
 				padding: 0 !important;
 				margin: 0 !important;
 			}
@@ -114,7 +114,7 @@ function handle_legacy_widget_preview_iframe() {
 	exit;
 }
 
-// Ensure handle_legacy_widget_preview_iframe() is called after Core's
+// Use admin_init instead of init to ensure get_current_screen function is already available.
-// register_block_core_legacy_widget() (priority = 10) and after Gutenberg's
+// This isn't strictly required, but enables better compatibility with existing plugins.
-// register_block_core_legacy_widget() (priority = 20).
+// See: https://github.com/WordPress/gutenberg/issues/32624.
-add_action( 'init', 'handle_legacy_widget_preview_iframe', 21 );
+add_action( 'admin_init', 'handle_legacy_widget_preview_iframe', 20 );

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-beta2-51199';
+$wp_version = '5.8-beta2-51200';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.