WordPress.org

Make WordPress Core

Changeset 44145


Ignore:
Timestamp:
12/14/2018 02:12:04 AM (10 months ago)
Author:
desrosj
Message:

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

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 [43798] to trunk.

Fixes #45043.

Location:
trunk
Files:
2 edited
2 copied

Legend:

Unmodified
Added
Removed
  • trunk

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

    r43571 r44145  
    172172        add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );
    173173
     174        // Load regular editor styles into the new block-based editor.
     175        add_theme_support( 'editor-styles' );
     176
     177        // Load default block styles.
     178        add_theme_support( 'wp-block-styles' );
     179
     180        // Add support for custom color scheme.
     181        add_theme_support(
     182            'editor-color-palette',
     183            array(
     184                array(
     185                    'name'  => __( 'Dark Gray', 'twentyfifteen' ),
     186                    'slug'  => 'dark-gray',
     187                    'color' => '#111',
     188                ),
     189                array(
     190                    'name'  => __( 'Light Gray', 'twentyfifteen' ),
     191                    'slug'  => 'light-gray',
     192                    'color' => '#f1f1f1',
     193                ),
     194                array(
     195                    'name'  => __( 'White', 'twentyfifteen' ),
     196                    'slug'  => 'white',
     197                    'color' => '#fff',
     198                ),
     199                array(
     200                    'name'  => __( 'Yellow', 'twentyfifteen' ),
     201                    'slug'  => 'yellow',
     202                    'color' => '#f4ca16',
     203                ),
     204                array(
     205                    'name'  => __( 'Dark Brown', 'twentyfifteen' ),
     206                    'slug'  => 'dark-brown',
     207                    'color' => '#352712',
     208                ),
     209                array(
     210                    'name'  => __( 'Medium Pink', 'twentyfifteen' ),
     211                    'slug'  => 'medium-pink',
     212                    'color' => '#e53b51',
     213                ),
     214                array(
     215                    'name'  => __( 'Light Pink', 'twentyfifteen' ),
     216                    'slug'  => 'light-pink',
     217                    'color' => '#ffe5d1',
     218                ),
     219                array(
     220                    'name'  => __( 'Dark Purple', 'twentyfifteen' ),
     221                    'slug'  => 'dark-purple',
     222                    'color' => '#2e2256',
     223                ),
     224                array(
     225                    'name'  => __( 'Purple', 'twentyfifteen' ),
     226                    'slug'  => 'purple',
     227                    'color' => '#674970',
     228                ),
     229                array(
     230                    'name'  => __( 'Blue Gray', 'twentyfifteen' ),
     231                    'slug'  => 'blue-gray',
     232                    'color' => '#22313f',
     233                ),
     234                array(
     235                    'name'  => __( 'Bright Blue', 'twentyfifteen' ),
     236                    'slug'  => 'bright-blue',
     237                    'color' => '#55c3dc',
     238                ),
     239                array(
     240                    'name'  => __( 'Light Blue', 'twentyfifteen' ),
     241                    'slug'  => 'light-blue',
     242                    'color' => '#e9f2f9',
     243                ),
     244            )
     245        );
     246
    174247        // Indicate widget sidebars can use selective refresh in the Customizer.
    175248        add_theme_support( 'customize-selective-refresh-widgets' );
     
    294367    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    295368
     369    // Theme block stylesheet.
     370    wp_enqueue_style( 'twentyfifteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfifteen-style' ), '20181018' );
     371
    296372    // Load the Internet Explorer specific stylesheet.
    297373    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
     
    323399}
    324400add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
     401
     402/**
     403 * Enqueue editor styles for Gutenberg
     404 *
     405 * @since Twenty Fifteen 2.1
     406 */
     407function twentyfifteen_block_editor_styles() {
     408    // Block styles.
     409    wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     410    // Add custom fonts.
     411    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
     412}
     413add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' );
     414
    325415
    326416/**
Note: See TracChangeset for help on using the changeset viewer.