WordPress.org
Get WordPress

Make WordPress Core

Changeset 44140


Ignore:
Timestamp:
12/14/2018 01:54:15 AM (6 years ago)
Author:
desrosj
Message:

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

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 ianbelanger, crunnells, laurelfulford, davidakennedy.

Merges [43795] to trunk.

Fixes #45040.

Location:
trunk
Files:
2 edited
2 copied

Legend:

Unmodified
Added
Removed

  • trunk

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

    r43571 r44140  
    5555    // This theme styles the visual editor with editor-style.css to match the theme style.
    5656    add_editor_style();
     57
     58    // Load regular editor styles into the new block-based editor.
     59    add_theme_support( 'editor-styles' );
     60
     61    // Load default block styles.
     62    add_theme_support( 'wp-block-styles' );
     63
     64    // Add support for custom color scheme.
     65    add_theme_support(
     66        'editor-color-palette',
     67        array(
     68            array(
     69                'name'  => __( 'Blue', 'twentytwelve' ),
     70                'slug'  => 'blue',
     71                'color' => '#21759b',
     72            ),
     73            array(
     74                'name'  => __( 'Dark Gray', 'twentytwelve' ),
     75                'slug'  => 'dark-gray',
     76                'color' => '#444',
     77            ),
     78            array(
     79                'name'  => __( 'Medium Gray', 'twentytwelve' ),
     80                'slug'  => 'medium-gray',
     81                'color' => '#9f9f9f',
     82            ),
     83            array(
     84                'name'  => __( 'Light Gray', 'twentytwelve' ),
     85                'slug'  => 'light-gray',
     86                'color' => '#e6e6e6',
     87            ),
     88            array(
     89                'name'  => __( 'White', 'twentytwelve' ),
     90                'slug'  => 'white',
     91                'color' => '#fff',
     92            ),
     93        )
     94    );
    5795
    5896    // Adds RSS feed links to <head> for posts and comments.
    … …  
    159197    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
    160198
     199    // Theme block stylesheet.
     200    wp_enqueue_style( 'twentytwelve-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentytwelve-style' ), '20181018' );
     201
    161202    // Loads the Internet Explorer specific stylesheet.
    162203    wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
    … …  
    164205}
    165206add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
     207
     208/**
     209 * Enqueue editor styles for Gutenberg
     210 *
     211 * @since Twenty Twelve 2.6
     212 */
     213function twentytwelve_block_editor_styles() {
     214    // Block styles.
     215    wp_enqueue_style( 'twentytwelve-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     216    // Add custom fonts.
     217    wp_enqueue_style( 'twentytwelve-fonts', twentytwelve_get_font_url(), array(), null );
     218}
     219add_action( 'enqueue_block_editor_assets', 'twentytwelve_block_editor_styles' );
    166220
    167221/**
Note: See TracChangeset for help on using the changeset viewer.