WordPress.org

Make WordPress Core

Changeset 43797


Ignore:
Timestamp:
10/23/2018 12:10:28 AM (3 years ago)
Author:
davidakennedy
Message:

Twenty Fourteen: 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 Fourteen.

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.
  • Add theme support for editor-color-palette, to load a color palette based on the theme’s color scheme into the block-based editor.

Props laurelfulford, crunnells, ianbelanger.
Fixes #45042.

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

Legend:

Unmodified
Added
Removed

  • branches/5.0/src/wp-content/themes/twentyfourteen/functions.php

    r41756 r43797  
    7070    // This theme styles the visual editor to resemble the theme style.
    7171    add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url(), 'genericons/genericons.css' ) );
     72
     73    // Load regular editor styles into the new block-based editor.
     74    add_theme_support( 'editor-styles' );
     75
     76    // Load default block styles.
     77    add_theme_support( 'wp-block-styles' );
     78
     79    // Add support for custom color scheme.
     80    add_theme_support( 'editor-color-palette', array(
     81        array(
     82            'name'  => __( 'Green', 'twentyfourteen' ),
     83            'slug'  => 'green',
     84            'color' => '#24890d',
     85        ),
     86        array(
     87            'name'  => __( 'Black', 'twentyfourteen' ),
     88            'slug'  => 'black',
     89            'color' => '#000',
     90        ),
     91        array(
     92            'name'  => __( 'Dark Gray', 'twentyfourteen' ),
     93            'slug'  => 'dark-gray',
     94            'color' => '#2b2b2b',
     95        ),
     96        array(
     97            'name'  => __( 'Medium Gray', 'twentyfourteen' ),
     98            'slug'  => 'medium-gray',
     99            'color' => '#767676',
     100        ),
     101        array(
     102            'name'  => __( 'Light Gray', 'twentyfourteen' ),
     103            'slug'  => 'light-gray',
     104            'color' => '#f5f5f5',
     105        ),
     106        array(
     107            'name'  => __( 'White', 'twentyfourteen' ),
     108            'slug'  => 'white',
     109            'color' => '#fff',
     110        ),
     111    ) );
    72112
    73113    // Add RSS feed links to <head> for posts and comments.
    … …  
    240280    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
    241281
     282    // Theme block stylesheet.
     283    wp_enqueue_style( 'twentyfourteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfourteen-style' ), '20181018' );
     284
    242285    // Load the Internet Explorer specific stylesheet.
    243286    wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' );
    … …  
    302345}
    303346add_filter( 'wp_resource_hints', 'twentyfourteen_resource_hints', 10, 2 );
     347
     348/**
     349 * Enqueue editor styles for Gutenberg
     350 *
     351 * @since Twenty Fourteen 2.3
     352 */
     353function twentyfourteen_block_editor_styles() {
     354    // Block styles.
     355    wp_enqueue_style( 'twentyfourteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     356    // Add custom fonts.
     357    wp_enqueue_style( 'twentyfourteen-fonts', twentyfourteen_font_url(), array(), null );
     358}
     359add_action( 'enqueue_block_editor_assets', 'twentyfourteen_block_editor_styles' );
    304360
    305361if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) :
Note: See TracChangeset for help on using the changeset viewer.