WordPress.org

Make WordPress Core

Changeset 44147 for trunk


Ignore:
Timestamp:
12/14/2018 02:17:17 AM (12 months ago)
Author:
desrosj
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, davidkennedy.

Merges [43799] to trunk.

Fixes #45044.

Location:
trunk
Files:
2 edited
2 copied

Legend:

Unmodified
Added
Removed
  • trunk

  • trunk/src/wp-content/themes/twentysixteen/functions.php

    r43606 r44147  
    136136        add_editor_style( array( 'css/editor-style.css', twentysixteen_fonts_url() ) );
    137137
     138        // Load regular editor styles into the new block-based editor.
     139        add_theme_support( 'editor-styles' );
     140
     141        // Load default block styles.
     142        add_theme_support( 'wp-block-styles' );
     143
     144        // Add support for custom color scheme.
     145        add_theme_support(
     146            'editor-color-palette',
     147            array(
     148                array(
     149                    'name'  => __( 'Dark Gray', 'twentysixteen' ),
     150                    'slug'  => 'dark-gray',
     151                    'color' => '#1a1a1a',
     152                ),
     153                array(
     154                    'name'  => __( 'Medium Gray', 'twentysixteen' ),
     155                    'slug'  => 'medium-gray',
     156                    'color' => '#686868',
     157                ),
     158                array(
     159                    'name'  => __( 'Light Gray', 'twentysixteen' ),
     160                    'slug'  => 'light-gray',
     161                    'color' => '#e5e5e5',
     162                ),
     163                array(
     164                    'name'  => __( 'White', 'twentysixteen' ),
     165                    'slug'  => 'white',
     166                    'color' => '#fff',
     167                ),
     168                array(
     169                    'name'  => __( 'Blue Gray', 'twentysixteen' ),
     170                    'slug'  => 'blue-gray',
     171                    'color' => '#4d545c',
     172                ),
     173                array(
     174                    'name'  => __( 'Bright Blue', 'twentysixteen' ),
     175                    'slug'  => 'bright-blue',
     176                    'color' => '#007acc',
     177                ),
     178                array(
     179                    'name'  => __( 'Light Blue', 'twentysixteen' ),
     180                    'slug'  => 'light-blue',
     181                    'color' => '#9adffd',
     182                ),
     183                array(
     184                    'name'  => __( 'Dark Brown', 'twentysixteen' ),
     185                    'slug'  => 'dark-brown',
     186                    'color' => '#402b30',
     187                ),
     188                array(
     189                    'name'  => __( 'Medium Brown', 'twentysixteen' ),
     190                    'slug'  => 'medium-brown',
     191                    'color' => '#774e24',
     192                ),
     193                array(
     194                    'name'  => __( 'Dark Red', 'twentysixteen' ),
     195                    'slug'  => 'dark-red',
     196                    'color' => '#640c1f',
     197                ),
     198                array(
     199                    'name'  => __( 'Bright Red', 'twentysixteen' ),
     200                    'slug'  => 'bright-red',
     201                    'color' => '#ff675f',
     202                ),
     203                array(
     204                    'name'  => __( 'Yellow', 'twentysixteen' ),
     205                    'slug'  => 'yellow',
     206                    'color' => '#ffef8e',
     207                ),
     208            )
     209        );
     210
    138211        // Indicate widget sidebars can use selective refresh in the Customizer.
    139212        add_theme_support( 'customize-selective-refresh-widgets' );
     
    294367    wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
    295368
     369    // Theme block stylesheet.
     370    wp_enqueue_style( 'twentysixteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentysixteen-style' ), '20181018' );
     371
    296372    // Load the Internet Explorer specific stylesheet.
    297373    wp_enqueue_style( 'twentysixteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentysixteen-style' ), '20160816' );
     
    332408}
    333409add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );
     410
     411/**
     412 * Enqueue editor styles for Gutenberg
     413 *
     414 * @since Twenty Sixteen 1.6
     415 */
     416function twentysixteen_block_editor_styles() {
     417    // Block styles.
     418    wp_enqueue_style( 'twentysixteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     419    // Add custom fonts.
     420    wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null );
     421}
     422add_action( 'enqueue_block_editor_assets', 'twentysixteen_block_editor_styles' );
    334423
    335424/**
Note: See TracChangeset for help on using the changeset viewer.