WordPress.org
Get WordPress

Make WordPress Core

Changeset 44144


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

Merges [43797] to trunk.

Fixes #45042.

Location:
trunk
Files:
2 edited
2 copied

Legend:

Unmodified
Added
Removed

  • trunk

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

    r43571 r44144  
    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(
     81            'editor-color-palette',
     82            array(
     83                array(
     84                    'name'  => __( 'Green', 'twentyfourteen' ),
     85                    'slug'  => 'green',
     86                    'color' => '#24890d',
     87                ),
     88                array(
     89                    'name'  => __( 'Black', 'twentyfourteen' ),
     90                    'slug'  => 'black',
     91                    'color' => '#000',
     92                ),
     93                array(
     94                    'name'  => __( 'Dark Gray', 'twentyfourteen' ),
     95                    'slug'  => 'dark-gray',
     96                    'color' => '#2b2b2b',
     97                ),
     98                array(
     99                    'name'  => __( 'Medium Gray', 'twentyfourteen' ),
     100                    'slug'  => 'medium-gray',
     101                    'color' => '#767676',
     102                ),
     103                array(
     104                    'name'  => __( 'Light Gray', 'twentyfourteen' ),
     105                    'slug'  => 'light-gray',
     106                    'color' => '#f5f5f5',
     107                ),
     108                array(
     109                    'name'  => __( 'White', 'twentyfourteen' ),
     110                    'slug'  => 'white',
     111                    'color' => '#fff',
     112                ),
     113            )
     114        );
    72115
    73116        // Add RSS feed links to <head> for posts and comments.
    … …  
    273316    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
    274317
     318    // Theme block stylesheet.
     319    wp_enqueue_style( 'twentyfourteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfourteen-style' ), '20181018' );
     320
    275321    // Load the Internet Explorer specific stylesheet.
    276322    wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' );
    … …  
    339385}
    340386add_filter( 'wp_resource_hints', 'twentyfourteen_resource_hints', 10, 2 );
     387
     388/**
     389 * Enqueue editor styles for Gutenberg
     390 *
     391 * @since Twenty Fourteen 2.3
     392 */
     393function twentyfourteen_block_editor_styles() {
     394    // Block styles.
     395    wp_enqueue_style( 'twentyfourteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     396    // Add custom fonts.
     397    wp_enqueue_style( 'twentyfourteen-fonts', twentyfourteen_font_url(), array(), null );
     398}
     399add_action( 'enqueue_block_editor_assets', 'twentyfourteen_block_editor_styles' );
    341400
    342401if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) :
Note: See TracChangeset for help on using the changeset viewer.