WordPress.org
Get WordPress

Make WordPress Core

Changeset 43795


Ignore:
Timestamp:
10/22/2018 11:17:55 PM (6 years ago)
Author:
davidakennedy
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.
Fixes #45040.

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

Legend:

Unmodified
Added
Removed

  • branches/5.0/src/wp-content/themes/twentytwelve/functions.php

    r41756 r43795  
    5555    add_editor_style();
    5656
     57    // Load regular editor styles into the new block-based editor.
     58    add_theme_support( 'editor-styles' );
     59
     60    // Load default block styles.
     61    add_theme_support( 'wp-block-styles' );
     62
     63    // Add support for custom color scheme.
     64    add_theme_support( 'editor-color-palette', array(
     65        array(
     66            'name'  => __( 'Blue', 'twentytwelve' ),
     67            'slug'  => 'blue',
     68            'color' => '#21759b',
     69        ),
     70        array(
     71            'name'  => __( 'Dark Gray', 'twentytwelve' ),
     72            'slug'  => 'dark-gray',
     73            'color' => '#444',
     74        ),
     75        array(
     76            'name'  => __( 'Medium Gray', 'twentytwelve' ),
     77            'slug'  => 'medium-gray',
     78            'color' => '#9f9f9f',
     79        ),
     80        array(
     81            'name'  => __( 'Light Gray', 'twentytwelve' ),
     82            'slug'  => 'light-gray',
     83            'color' => '#e6e6e6',
     84        ),
     85        array(
     86            'name'  => __( 'White', 'twentytwelve' ),
     87            'slug'  => 'white',
     88            'color' => '#fff',
     89        ),
     90    ) );
     91
    5792    // Adds RSS feed links to <head> for posts and comments.
    5893    add_theme_support( 'automatic-feed-links' );
    … …  
    152187    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
    153188
     189    // Theme block stylesheet.
     190    wp_enqueue_style( 'twentytwelve-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentytwelve-style' ), '20181018' );
     191
    154192    // Loads the Internet Explorer specific stylesheet.
    155193    wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
    … …  
    157195}
    158196add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
     197
     198/**
     199 * Enqueue editor styles for Gutenberg
     200 *
     201 * @since Twenty Twelve 2.6
     202 */
     203function twentytwelve_block_editor_styles() {
     204    // Block styles.
     205    wp_enqueue_style( 'twentytwelve-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     206    // Add custom fonts.
     207    wp_enqueue_style( 'twentytwelve-fonts', twentytwelve_get_font_url(), array(), null );
     208}
     209add_action( 'enqueue_block_editor_assets', 'twentytwelve_block_editor_styles' );
    159210
    160211/**
Note: See TracChangeset for help on using the changeset viewer.