WordPress.org

Make WordPress Core

Changeset 43800


Ignore:
Timestamp:
10/23/2018 01:25:03 AM (13 months ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Add styles and support for the new block-based editor.

This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Seventeen.

These are the specific changes made to this theme:

  • Add blocks.css, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles.
  • Add editor-blocks.css to style blocks in the editor, to make sure they match the theme’s existing HTML element styles.
  • Add theme support for editor-styles, to pull the existing editor stylesheet into the new editor.
  • Add theme support for wp-block-styles, to load the default block styles on the front end.

Props laurelfulford, ianbelanger, crunnells.
Fixes #45045.

Location:
branches/5.0/src/wp-content/themes/twentyseventeen
Files:
2 added
1 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentyseventeen/functions.php

    r41756 r43800  
    106106     */
    107107    add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );
     108
     109    // Load regular editor styles into the new block-based editor.
     110    add_theme_support( 'editor-styles' );
     111
     112    // Load default block styles.
     113    add_theme_support( 'wp-block-styles' );
    108114
    109115    // Define and register starter content to showcase the theme on new sites.
     
    416422    wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
    417423
     424    // Theme block stylesheet.
     425    wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.0' );
     426
    418427    // Load the dark colorscheme.
    419428    if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
     
    461470
    462471/**
     472 * Enqueue editor styles for Gutenberg
     473 *
     474 * @since Twenty Seventeen 1.8
     475 */
     476function twentyseventeen_block_editor_styles() {
     477    // Block styles.
     478    wp_enqueue_style( 'twentyseventeen-block-editor-style', get_theme_file_uri( '/assets/css/editor-blocks.css' ) );
     479    // Add custom fonts.
     480    wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
     481}
     482add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' );
     483
     484/**
    463485 * Add custom image sizes attribute to enhance responsive image functionality
    464486 * for content images.
Note: See TracChangeset for help on using the changeset viewer.