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
This commit is contained in:
desrosj 2021-06-22 13:33:58 +00:00
parent ab25191895
commit 5259b18f50
5 changed files with 59 additions and 45 deletions

View File

@ -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(

View File

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

View File

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

View File

@ -24,13 +24,14 @@ function render_block_core_legacy_widget( $attributes ) {
return '';
}
if ( method_exists( $wp_widget_factory, 'get_widget_object' ) ) {
$widget_object = $wp_widget_factory->get_widget_object( $attributes['idBase'] );
$id_base = $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
// register_block_core_legacy_widget() (priority = 10) and after Gutenberg's
// register_block_core_legacy_widget() (priority = 20).
add_action( 'init', 'handle_legacy_widget_preview_iframe', 21 );
// Use admin_init instead of init to ensure get_current_screen function is already available.
// This isn't strictly required, but enables better compatibility with existing plugins.
// See: https://github.com/WordPress/gutenberg/issues/32624.
add_action( 'admin_init', 'handle_legacy_widget_preview_iframe', 20 );

View File

@ -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.