Make WordPress Core

Changeset 44157


Ignore:
Timestamp:
12/14/2018 03:35:55 AM (5 years ago)
Author:
desrosj
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.

Props pento.

Merges [43812] to trunk.

See #45065.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk

  • trunk/src/wp-includes/default-filters.php

    r44118 r44157  
    508508add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
    509509add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
     510add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
     511add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
     512add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
     513add_action( 'enqueue_block_editor_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
    510514add_action( 'admin_print_scripts-index.php', 'wp_localize_community_events' );
    511515add_filter( 'wp_print_scripts', 'wp_just_in_time_script_localization' );
  • trunk/src/wp-includes/script-loader.php

    r44143 r44157  
    24162416    }
    24172417}
     2418
     2419/**
     2420 * Handles the enqueueing of block scripts and styles that are common to both
     2421 * the editor and the front-end.
     2422 *
     2423 * @since 5.0.0
     2424 *
     2425 * @global WP_Screen $current_screen
     2426 */
     2427function wp_common_block_scripts_and_styles() {
     2428    global $current_screen;
     2429
     2430    if ( is_admin() && ! $current_screen->is_block_editor() ) {
     2431        return;
     2432    }
     2433
     2434    wp_enqueue_style( 'wp-block-library' );
     2435
     2436    if ( current_theme_supports( 'wp-block-styles' ) ) {
     2437        wp_enqueue_style( 'wp-block-library-theme' );
     2438    }
     2439
     2440    /**
     2441     * Fires after enqueuing block assets for both editor and front-end.
     2442     *
     2443     * Call `add_action` on any hook before 'wp_enqueue_scripts'.
     2444     *
     2445     * In the function call you supply, simply use `wp_enqueue_script` and
     2446     * `wp_enqueue_style` to add your functionality to the Gutenberg editor.
     2447     *
     2448     * @since 5.0.0
     2449     */
     2450      do_action( 'enqueue_block_assets' );
     2451}
     2452
     2453/**
     2454 * Enqueues registered block scripts and styles, depending on current rendered
     2455 * context (only enqueuing editor scripts while in context of the editor).
     2456 *
     2457 * @since 5.0.0
     2458 *
     2459 * @global WP_Screen $current_screen
     2460 */
     2461function wp_enqueue_registered_block_scripts_and_styles() {
     2462    global $current_screen;
     2463
     2464    $is_editor = ( is_admin() && $current_screen->is_block_editor() );
     2465
     2466    $block_registry = WP_Block_Type_Registry::get_instance();
     2467    foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
     2468        // Front-end styles.
     2469        if ( ! empty( $block_type->style ) ) {
     2470            wp_enqueue_style( $block_type->style );
     2471        }
     2472
     2473        // Front-end script.
     2474        if ( ! empty( $block_type->script ) ) {
     2475            wp_enqueue_script( $block_type->script );
     2476        }
     2477
     2478        // Editor styles.
     2479        if ( $is_editor && ! empty( $block_type->editor_style ) ) {
     2480            wp_enqueue_style( $block_type->editor_style );
     2481        }
     2482
     2483        // Editor script.
     2484        if ( $is_editor && ! empty( $block_type->editor_script ) ) {
     2485            wp_enqueue_script( $block_type->editor_script );
     2486        }
     2487    }
     2488}
  • trunk/tests/phpunit/tests/dependencies/styles.php

    r42343 r44157  
    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();
     12
    1113        if ( empty( $GLOBALS['wp_styles'] ) ) {
    1214            $GLOBALS['wp_styles'] = null;
    1315        }
     16
    1417        $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
    1525        remove_action( 'wp_default_styles', 'wp_default_styles' );
    1626        remove_action( 'wp_print_styles', 'print_emoji_styles' );
     27
    1728        $GLOBALS['wp_styles']                  = new WP_Styles();
    1829        $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' );
    1933    }
    2034
    2135    function tearDown() {
    22         $GLOBALS['wp_styles'] = $this->old_wp_styles;
     36        $GLOBALS['wp_styles']  = $this->old_wp_styles;
     37        $GLOBALS['wp_scripts'] = $this->old_wp_scripts;
     38
    2339        add_action( 'wp_default_styles', 'wp_default_styles' );
    2440        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
    2546        parent::tearDown();
    2647    }
     
    306327        );
    307328    }
     329
     330    /**
     331     * Tests that visual block styles are enqueued in the editor even when there is not theme support for 'wp-block-styles'.
     332     *
     333     * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
     334     */
     335    function test_block_styles_for_editing_without_theme_support() {
     336        // Confirm we are without theme support by default.
     337        $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
     338
     339        wp_default_styles( $GLOBALS['wp_styles'] );
     340
     341        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     342        wp_enqueue_style( 'wp-edit-blocks' );
     343        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     344    }
     345
     346    /**
     347     * Tests that visual block styles are enqueued when there is theme support for 'wp-block-styles'.
     348     *
     349     * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
     350     */
     351    function test_block_styles_for_editing_with_theme_support() {
     352        add_theme_support( 'wp-block-styles' );
     353
     354        wp_default_styles( $GLOBALS['wp_styles'] );
     355
     356        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     357        wp_common_block_scripts_and_styles();
     358        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     359    }
     360
     361    /**
     362     * Tests that visual block styles are not enqueued for viewing when there is no theme support for 'wp-block-styles'.
     363     *
     364     * Visual block styles should not be enqueued unless a theme opts in.
     365     * This way we avoid style conflicts with existing themes.
     366     */
     367    function test_no_block_styles_for_viewing_without_theme_support() {
     368        // Confirm we are without theme support by default.
     369        $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
     370
     371        wp_default_styles( $GLOBALS['wp_styles'] );
     372
     373        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     374        wp_enqueue_style( 'wp-block-library' );
     375        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     376    }
     377
     378    /**
     379     * Tests that visual block styles are enqueued for viewing when there is theme support for 'wp-block-styles'.
     380     *
     381     * Visual block styles should be enqueued when a theme opts in.
     382     */
     383    function test_block_styles_for_viewing_with_theme_support() {
     384        add_theme_support( 'wp-block-styles' );
     385
     386        wp_default_styles( $GLOBALS['wp_styles'] );
     387
     388        $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
     389        wp_common_block_scripts_and_styles();
     390        $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
     391    }
    308392}
Note: See TracChangeset for help on using the changeset viewer.