WordPress.org

Make WordPress Core

Changeset 43798


Ignore:
Timestamp:
10/23/2018 12:35:37 AM (11 months ago)
Author:
davidakennedy
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.
Fixes #45043.

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

Legend:

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

    r41756 r43798  
    143143    add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );
    144144
     145    // Load regular editor styles into the new block-based editor.
     146    add_theme_support( 'editor-styles' );
     147
     148    // Load default block styles.
     149    add_theme_support( 'wp-block-styles' );
     150
     151    // Add support for custom color scheme.
     152    add_theme_support( 'editor-color-palette', array(
     153        array(
     154            'name'  => __( 'Dark Gray', 'twentyfifteen' ),
     155            'slug'  => 'dark-gray',
     156            'color' => '#111',
     157        ),
     158        array(
     159            'name'  => __( 'Light Gray', 'twentyfifteen' ),
     160            'slug'  => 'light-gray',
     161            'color' => '#f1f1f1',
     162        ),
     163        array(
     164            'name'  => __( 'White', 'twentyfifteen' ),
     165            'slug'  => 'white',
     166            'color' => '#fff',
     167        ),
     168        array(
     169            'name'  => __( 'Yellow', 'twentyfifteen' ),
     170            'slug'  => 'yellow',
     171            'color' => '#f4ca16',
     172        ),
     173        array(
     174            'name'  => __( 'Dark Brown', 'twentyfifteen' ),
     175            'slug'  => 'dark-brown',
     176            'color' => '#352712',
     177        ),
     178        array(
     179            'name'  => __( 'Medium Pink', 'twentyfifteen' ),
     180            'slug'  => 'medium-pink',
     181            'color' => '#e53b51',
     182        ),
     183        array(
     184            'name'  => __( 'Light Pink', 'twentyfifteen' ),
     185            'slug'  => 'light-pink',
     186            'color' => '#ffe5d1',
     187        ),
     188        array(
     189            'name'  => __( 'Dark Purple', 'twentyfifteen' ),
     190            'slug'  => 'dark-purple',
     191            'color' => '#2e2256',
     192        ),
     193        array(
     194            'name'  => __( 'Purple', 'twentyfifteen' ),
     195            'slug'  => 'purple',
     196            'color' => '#674970',
     197        ),
     198        array(
     199            'name'  => __( 'Blue Gray', 'twentyfifteen' ),
     200            'slug'  => 'blue-gray',
     201            'color' => '#22313f',
     202        ),
     203        array(
     204            'name'  => __( 'Bright Blue', 'twentyfifteen' ),
     205            'slug'  => 'bright-blue',
     206            'color' => '#55c3dc',
     207        ),
     208        array(
     209            'name'  => __( 'Light Blue', 'twentyfifteen' ),
     210            'slug'  => 'light-blue',
     211            'color' => '#e9f2f9',
     212        ),
     213    ) );
     214
    145215    // Indicate widget sidebars can use selective refresh in the Customizer.
    146216    add_theme_support( 'customize-selective-refresh-widgets' );
     
    260330    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    261331
     332    // Theme block stylesheet.
     333    wp_enqueue_style( 'twentyfifteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfifteen-style' ), '20181018' );
     334
    262335    // Load the Internet Explorer specific stylesheet.
    263336    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
     
    285358}
    286359add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
     360
     361/**
     362 * Enqueue editor styles for Gutenberg
     363 *
     364 * @since Twenty Fifteen 2.1
     365 */
     366function twentyfifteen_block_editor_styles() {
     367    // Block styles.
     368    wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     369    // Add custom fonts.
     370    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
     371}
     372add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' );
     373
    287374
    288375/**
Note: See TracChangeset for help on using the changeset viewer.