Changeset 51200

Timestamp:

06/22/2021 01:32:42 PM (3 years ago)

Author:

desrosj

Message:

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.

Location:

trunk

Files:

• src/wp-admin/edit-form-blocks.php (modified) (3 diffs)
• src/wp-admin/widgets-form-blocks.php (modified) (1 diff)
• src/wp-includes/block-editor.php (modified) (1 diff)
• tests/phpunit/tests/blocks/block-editor.php (modified) (1 diff)

trunk/src/wp-admin/edit-form-blocks.php

@@ -19 +19 @@
  * @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 ) );
@@ -129 +128 @@
 ) : $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 );
@@ -213 +182 @@
     'bodyPlaceholder'                      => $body_placeholder,
     'autosaveInterval'                     => AUTOSAVE_INTERVAL,
-    'styles'                               => $styles,
+    'styles'                               => get_block_editor_theme_styles(),
     'richEditingEnabled'                   => user_can_richedit(),
     'postLock'                             => $lock_details,

trunk/src/wp-admin/widgets-form-blocks.php

@@ -26 +26 @@
 
 $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
 );

trunk/src/wp-includes/block-editor.php

@@ -465 +465 @@
     );
 }
+
+/**
+ * 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;
+}

trunk/tests/phpunit/tests/blocks/block-editor.php

@@ -430 +430 @@
         $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]
+        );
+    }
 }