WordPress.org

Make WordPress Core

Changeset 51200


Ignore:
Timestamp:
06/22/2021 01:32:42 PM (3 months 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/edit-form-blocks.php

    r51158 r51200  
    1919 * @global WP_Post      $post             Global post object.
    2020 * @global string       $title
    21  * @global array        $editor_styles
    2221 * @global array        $wp_meta_boxes
    2322 */
    24 global $post_type, $post_type_object, $post, $title, $editor_styles, $wp_meta_boxes;
     23global $post_type, $post_type_object, $post, $title, $wp_meta_boxes;
    2524
    2625$block_editor_context = new WP_Block_Editor_Context( array( 'post' => $post ) );
     
    129128) : $available_templates;
    130129
    131 // Editor Styles.
    132 $styles = array(
    133     array(
    134         'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
    135         '__unstableType' => 'core',
    136     ),
    137 );
    138 if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
    139     foreach ( $editor_styles as $style ) {
    140         if ( preg_match( '~^(https?:)?//~', $style ) ) {
    141             $response = wp_remote_get( $style );
    142             if ( ! is_wp_error( $response ) ) {
    143                 $styles[] = array(
    144                     'css'            => wp_remote_retrieve_body( $response ),
    145                     '__unstableType' => 'theme',
    146                 );
    147             }
    148         } else {
    149             $file = get_theme_file_path( $style );
    150             if ( is_file( $file ) ) {
    151                 $styles[] = array(
    152                     'css'            => file_get_contents( $file ),
    153                     'baseURL'        => get_theme_file_uri( $style ),
    154                     '__unstableType' => 'theme',
    155                 );
    156             }
    157         }
    158     }
    159 }
    160 
    161130// Lock settings.
    162131$user_id = wp_check_post_lock( $post->ID );
     
    213182    'bodyPlaceholder'                      => $body_placeholder,
    214183    'autosaveInterval'                     => AUTOSAVE_INTERVAL,
    215     'styles'                               => $styles,
     184    'styles'                               => get_block_editor_theme_styles(),
    216185    'richEditingEnabled'                   => user_can_richedit(),
    217186    'postLock'                             => $lock_details,
  • trunk/src/wp-admin/widgets-form-blocks.php

    r51149 r51200  
    2626
    2727$editor_settings = get_block_editor_settings(
    28     get_legacy_widget_block_editor_settings(),
     28    array_merge( get_legacy_widget_block_editor_settings(), array( 'styles' => get_block_editor_theme_styles() ) ),
    2929    $block_editor_context
    3030);
  • trunk/src/wp-includes/block-editor.php

    r51149 r51200  
    465465    );
    466466}
     467
     468/**
     469 * Creates an array of theme styles to load into the block editor.
     470 *
     471 * @since 5.8.0
     472 *
     473 * @global array $editor_styles
     474 *
     475 * @return array An array of theme styles for the block editor. Includes default font family
     476 *               style and theme stylesheets.
     477 */
     478function get_block_editor_theme_styles() {
     479    global $editor_styles;
     480
     481    $styles = array(
     482        array(
     483            'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
     484            '__unstableType' => 'core',
     485        ),
     486    );
     487    if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
     488        foreach ( $editor_styles as $style ) {
     489            if ( preg_match( '~^(https?:)?//~', $style ) ) {
     490                $response = wp_remote_get( $style );
     491                if ( ! is_wp_error( $response ) ) {
     492                    $styles[] = array(
     493                        'css'            => wp_remote_retrieve_body( $response ),
     494                        '__unstableType' => 'theme',
     495                    );
     496                }
     497            } else {
     498                $file = get_theme_file_path( $style );
     499                if ( is_file( $file ) ) {
     500                    $styles[] = array(
     501                        'css'            => file_get_contents( $file ),
     502                        'baseURL'        => get_theme_file_uri( $style ),
     503                        '__unstableType' => 'theme',
     504                    );
     505                }
     506            }
     507        }
     508    }
     509
     510    return $styles;
     511}
  • trunk/tests/phpunit/tests/blocks/block-editor.php

    r51149 r51200  
    430430        $this->assertContains( '"\/wp\/v2\/types"', $after );
    431431    }
     432
     433    /**
     434     * @ticket 53344
     435     */
     436    function test_get_block_editor_theme_styles() {
     437        $theme_styles = get_block_editor_theme_styles();
     438        $this->assertCount( 1, $theme_styles );
     439        $this->assertSameSets(
     440            array(
     441                'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
     442                '__unstableType' => 'core',
     443            ),
     444            $theme_styles[0]
     445        );
     446    }
    432447}
Note: See TracChangeset for help on using the changeset viewer.