WordPress.org

Make WordPress Core


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

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

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.
Fixes #45044.

File:
1 edited

Legend:

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

    r41756 r43799  
    125125    add_editor_style( array( 'css/editor-style.css', twentysixteen_fonts_url() ) );
    126126
     127    // Load regular editor styles into the new block-based editor.
     128    add_theme_support( 'editor-styles' );
     129
     130    // Load default block styles.
     131    add_theme_support( 'wp-block-styles' );
     132
     133    // Add support for custom color scheme.
     134    add_theme_support( 'editor-color-palette', array(
     135        array(
     136            'name'  => __( 'Dark Gray', 'twentysixteen' ),
     137            'slug'  => 'dark-gray',
     138            'color' => '#1a1a1a',
     139        ),
     140        array(
     141            'name'  => __( 'Medium Gray', 'twentysixteen' ),
     142            'slug'  => 'medium-gray',
     143            'color' => '#686868',
     144        ),
     145        array(
     146            'name'  => __( 'Light Gray', 'twentysixteen' ),
     147            'slug'  => 'light-gray',
     148            'color' => '#e5e5e5',
     149        ),
     150        array(
     151            'name'  => __( 'White', 'twentysixteen' ),
     152            'slug'  => 'white',
     153            'color' => '#fff',
     154        ),
     155        array(
     156            'name'  => __( 'Blue Gray', 'twentysixteen' ),
     157            'slug'  => 'blue-gray',
     158            'color' => '#4d545c',
     159        ),
     160        array(
     161            'name'  => __( 'Bright Blue', 'twentysixteen' ),
     162            'slug'  => 'bright-blue',
     163            'color' => '#007acc',
     164        ),
     165        array(
     166            'name'  => __( 'Light Blue', 'twentysixteen' ),
     167            'slug'  => 'light-blue',
     168            'color' => '#9adffd',
     169        ),
     170        array(
     171            'name'  => __( 'Dark Brown', 'twentysixteen' ),
     172            'slug'  => 'dark-brown',
     173            'color' => '#402b30',
     174        ),
     175        array(
     176            'name'  => __( 'Medium Brown', 'twentysixteen' ),
     177            'slug'  => 'medium-brown',
     178            'color' => '#774e24',
     179        ),
     180        array(
     181            'name'  => __( 'Dark Red', 'twentysixteen' ),
     182            'slug'  => 'dark-red',
     183            'color' => '#640c1f',
     184        ),
     185        array(
     186            'name'  => __( 'Bright Red', 'twentysixteen' ),
     187            'slug'  => 'bright-red',
     188            'color' => '#ff675f',
     189        ),
     190        array(
     191            'name'  => __( 'Yellow', 'twentysixteen' ),
     192            'slug'  => 'yellow',
     193            'color' => '#ffef8e',
     194        ),
     195    ) );
     196
    127197    // Indicate widget sidebars can use selective refresh in the Customizer.
    128198    add_theme_support( 'customize-selective-refresh-widgets' );
     
    253323    wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
    254324
     325    // Theme block stylesheet.
     326    wp_enqueue_style( 'twentysixteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentysixteen-style' ), '20181018' );
     327
    255328    // Load the Internet Explorer specific stylesheet.
    256329    wp_enqueue_style( 'twentysixteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentysixteen-style' ), '20160816' );
     
    287360}
    288361add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );
     362
     363/**
     364 * Enqueue editor styles for Gutenberg
     365 *
     366 * @since Twenty Sixteen 1.6
     367 */
     368function twentysixteen_block_editor_styles() {
     369    // Block styles.
     370    wp_enqueue_style( 'twentysixteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     371    // Add custom fonts.
     372    wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null );
     373}
     374add_action( 'enqueue_block_editor_assets', 'twentysixteen_block_editor_styles' );
    289375
    290376/**
     
    428514    $args['smallest'] = 1;
    429515    $args['unit']     = 'em';
    430     $args['format']   = 'list'; 
     516    $args['format']   = 'list';
    431517
    432518    return $args;
Note: See TracChangeset for help on using the changeset viewer.