WordPress.org

Make WordPress Core

Changeset 43812


Ignore:
Timestamp:
10/24/2018 12:35:51 AM (10 months ago)
Author:
pento
Message:

Styles: Add helper functions for loading block styles.

Blocks are able to register styles that used in the editor and the frontend, or only in the editor. These functions ensure the correct styles are loaded in the correct place.

See #45065.

Location:
branches/5.0
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-includes/default-filters.php

    r43807 r43812  
    496496add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
    497497add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
     498add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
     499add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
     500add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
     501add_action( 'enqueue_block_editor_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
    498502add_action( 'admin_print_scripts-index.php', 'wp_localize_community_events' );
    499503add_filter( 'wp_print_scripts', 'wp_just_in_time_script_localization' );
  • branches/5.0/src/wp-includes/script-loader.php

    r43803 r43812  
    21792179    }
    21802180}
     2181
     2182/**
     2183 * Handles the enqueueing of block scripts and styles that are common to both
     2184 * the editor and the front-end.
     2185 *
     2186 * @since 5.0.0
     2187 *
     2188 * @global WP_Screen $current_screen
     2189 */
     2190function wp_common_block_scripts_and_styles() {
     2191    global $current_screen;
     2192
     2193    if ( is_admin() && ! $current_screen->is_block_editor() ) {
     2194        return;
     2195    }
     2196
     2197    wp_enqueue_style( 'wp-block-library' );
     2198
     2199    if ( current_theme_supports( 'wp-block-styles' ) ) {
     2200        wp_enqueue_style( 'wp-block-library-theme' );
     2201    }
     2202
     2203    /**
     2204     * Fires after enqueuing block assets for both editor and front-end.
     2205     *
     2206     * Call `add_action` on any hook before 'wp_enqueue_scripts'.
     2207     *
     2208     * In the function call you supply, simply use `wp_enqueue_script` and
     2209     * `wp_enqueue_style` to add your functionality to the Gutenberg editor.
     2210     *
     2211     * @since 5.0.0
     2212     */
     2213      do_action( 'enqueue_block_assets' );
     2214}
     2215
     2216/**
     2217 * Enqueues registered block scripts and styles, depending on current rendered
     2218 * context (only enqueuing editor scripts while in context of the editor).
     2219 *
     2220 * @since 5.0.0
     2221 *
     2222 * @global WP_Screen $current_screen
     2223 */
     2224function wp_enqueue_registered_block_scripts_and_styles() {
     2225    global $current_screen;
     2226
     2227    $is_editor = ( is_admin() && $current_screen->is_block_editor() );
     2228
     2229    $block_registry = WP_Block_Type_Registry::get_instance();
     2230    foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
     2231        // Front-end styles.
     2232        if ( ! empty( $block_type->style ) ) {
     2233            wp_enqueue_style( $block_type->style );
     2234        }
     2235
     2236        // Front-end script.
     2237        if ( ! empty( $block_type->script ) ) {
     2238            wp_enqueue_script( $block_type->script );
     2239        }
     2240
     2241        // Editor styles.
     2242        if ( $is_editor && ! empty( $block_type->editor_style ) ) {
     2243            wp_enqueue_style( $block_type->editor_style );
     2244        }
     2245
     2246        // Editor script.
     2247        if ( $is_editor && ! empty( $block_type->editor_script ) ) {
     2248            wp_enqueue_script( $block_type->editor_script );
     2249        }
     2250    }
     2251}
  • branches/5.0/tests/phpunit/tests/dependencies/styles.php

    r36649 r43812  
    55 */
    66class Tests_Dependencies_Styles extends WP_UnitTestCase {
    7     var $old_wp_styles;
     7    private $old_wp_styles;
     8    private $old_wp_scripts;
    89
    910    function setUp() {
    1011        parent::setUp();
    11         if ( empty( $GLOBALS['wp_styles'] ) )
     12
     13        if ( empty( $GLOBALS['wp_styles'] ) ) {
    1214            $GLOBALS['wp_styles'] = null;
     15        }
     16
    1317        $this->old_wp_styles = $GLOBALS['wp_styles'];
     18
     19        if ( empty( $GLOBALS['wp_scripts'] ) ) {
     20            $GLOBALS['wp_scripts'] = null;
     21        }
     22
     23        $this->old_wp_styles = $GLOBALS['wp_scripts'];
     24
    1425        remove_action( 'wp_default_styles', 'wp_default_styles' );
    1526        remove_action( 'wp_print_styles', 'print_emoji_styles' );
     27
    1628        $GLOBALS['wp_styles'] = new WP_Styles();
    1729        $GLOBALS['wp_styles']->default_version = get_bloginfo( 'version' );
     30
     31        $GLOBALS['wp_scripts'] = new WP_Scripts();
     32        $GLOBALS['wp_scripts']->default_version = get_bloginfo( 'version' );
    1833    }
    1934
    2035    function tearDown() {
    2136        $GLOBALS['wp_styles'] = $this->old_wp_styles;
     37        $GLOBALS['wp_scripts'] = $this->old_wp_scripts;
     38
    2239        add_action( 'wp_default_styles', 'wp_default_styles' );
    2340        add_action( 'wp_print_styles', 'print_emoji_styles' );
     41
     42        if ( current_theme_supports( 'wp-block-styles' ) ) {
     43            remove_theme_support( 'wp-block-styles' );
     44        }
     45
    2446        parent::tearDown();
    2547    }
     
    299321        );
    300322    }
     323
     324    /**
     325     * Tests that visual block styles are enqueued in the editor even when there is not theme support for 'wp-block-styles'.
     326     *
     327     * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
     328     */
     329    function test_block_styles_for_editing_without_theme_support() {
     330        // Confirm we are without theme support by default.
     331        $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
     332
     333        wp_default_styles( $GLOBALS['wp_styles'] );
     334
     335        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     336        wp_enqueue_style( 'wp-edit-blocks' );
     337        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     338    }
     339
     340    /**
     341     * Tests that visual block styles are enqueued when there is theme support for 'wp-block-styles'.
     342     *
     343     * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
     344     */
     345    function test_block_styles_for_editing_with_theme_support() {
     346        add_theme_support( 'wp-block-styles' );
     347
     348        wp_default_styles( $GLOBALS['wp_styles'] );
     349
     350        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     351        wp_common_block_scripts_and_styles();
     352        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     353    }
     354
     355    /**
     356     * Tests that visual block styles are not enqueued for viewing when there is no theme support for 'wp-block-styles'.
     357     *
     358     * Visual block styles should not be enqueued unless a theme opts in.
     359     * This way we avoid style conflicts with existing themes.
     360     */
     361    function test_no_block_styles_for_viewing_without_theme_support() {
     362        // Confirm we are without theme support by default.
     363        $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
     364
     365        wp_default_styles( $GLOBALS['wp_styles'] );
     366
     367        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     368        wp_enqueue_style( 'wp-block-library' );
     369        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     370    }
     371
     372    /**
     373     * Tests that visual block styles are enqueued for viewing when there is theme support for 'wp-block-styles'.
     374     *
     375     * Visual block styles should be enqueued when a theme opts in.
     376     */
     377    function test_block_styles_for_viewing_with_theme_support() {
     378        add_theme_support( 'wp-block-styles' );
     379
     380        wp_default_styles( $GLOBALS['wp_styles'] );
     381
     382        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     383        wp_common_block_scripts_and_styles();
     384        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     385    }
    301386}
Note: See TracChangeset for help on using the changeset viewer.