WordPress.org

Make WordPress Core

Changeset 43794


Ignore:
Timestamp:
10/22/2018 11:02:44 PM (13 months ago)
Author:
davidakennedy
Message:

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

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, laurelfulford.
Fixes #45039.

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

Legend:

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

    r41756 r43794  
    8282    // This theme styles the visual editor with editor-style.css to match the theme style.
    8383    add_editor_style();
     84
     85    // Load regular editor styles into the new block-based editor.
     86    add_theme_support( 'editor-styles' );
     87
     88    // Load default block styles.
     89    add_theme_support( 'wp-block-styles' );
     90
     91    // Add support for custom color scheme.
     92    add_theme_support( 'editor-color-palette', array(
     93        array(
     94            'name'  => __( 'Blue', 'twentyeleven' ),
     95            'slug'  => 'blue',
     96            'color' => '#1982d1',
     97        ),
     98        array(
     99            'name'  => __( 'Black', 'twentyeleven' ),
     100            'slug'  => 'black',
     101            'color' => '#000',
     102        ),
     103        array(
     104            'name'  => __( 'Dark Gray', 'twentyeleven' ),
     105            'slug'  => 'dark-gray',
     106            'color' => '#373737',
     107        ),
     108        array(
     109            'name'  => __( 'Medium Gray', 'twentyeleven' ),
     110            'slug'  => 'medium-gray',
     111            'color' => '#666',
     112        ),
     113        array(
     114            'name'  => __( 'Light Gray', 'twentyeleven' ),
     115            'slug'  => 'light-gray',
     116            'color' => '#e2e2e2',
     117        ),
     118        array(
     119            'name'  => __( 'White', 'twentyeleven' ),
     120            'slug'  => 'white',
     121            'color' => '#fff',
     122        )
     123    ) );
    84124
    85125    // Load up our theme options page and related code.
     
    233273endif; // twentyeleven_setup
    234274
     275/**
     276 * Enqueue scripts and styles for front end.
     277 *
     278 * @since Twenty Eleven 2.9
     279 */
     280function twentyeleven_scripts_styles() {
     281    // Theme block stylesheet.
     282    wp_enqueue_style( 'twentyeleven-block-style', get_template_directory_uri() . '/blocks.css', array(), '20181018' );
     283}
     284add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' );
     285
     286/**
     287 * Enqueue editor styles for Gutenberg
     288 *
     289 * @since Twenty Eleven 2.9
     290 */
     291function twentyeleven_block_editor_styles() {
     292    // Block styles.
     293    wp_enqueue_style( 'twentyeleven-block-editor-style', get_template_directory_uri() . '/editor-blocks.css' );
     294}
     295add_action( 'enqueue_block_editor_assets', 'twentyeleven_block_editor_styles' );
     296
    235297if ( ! function_exists( 'twentyeleven_header_style' ) ) :
    236298/**
Note: See TracChangeset for help on using the changeset viewer.