WordPress.org

Make WordPress Core

Changeset 44139


Ignore:
Timestamp:
12/14/2018 01:50:30 AM (3 years ago)
Author:
desrosj
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, davidakennedy.

Merges [43794] to trunk.

Fixes #45039.

Location:
trunk
Files:
2 edited
2 copied

Legend:

Unmodified
Added
Removed
  • trunk

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

    r43571 r44139  
    8383        // This theme styles the visual editor with editor-style.css to match the theme style.
    8484        add_editor_style();
     85
     86        // Load regular editor styles into the new block-based editor.
     87        add_theme_support( 'editor-styles' );
     88
     89        // Load default block styles.
     90        add_theme_support( 'wp-block-styles' );
     91
     92        // Add support for custom color scheme.
     93        add_theme_support(
     94            'editor-color-palette',
     95            array(
     96                array(
     97                    'name'  => __( 'Blue', 'twentyeleven' ),
     98                    'slug'  => 'blue',
     99                    'color' => '#1982d1',
     100                ),
     101                array(
     102                    'name'  => __( 'Black', 'twentyeleven' ),
     103                    'slug'  => 'black',
     104                    'color' => '#000',
     105                ),
     106                array(
     107                    'name'  => __( 'Dark Gray', 'twentyeleven' ),
     108                    'slug'  => 'dark-gray',
     109                    'color' => '#373737',
     110                ),
     111                array(
     112                    'name'  => __( 'Medium Gray', 'twentyeleven' ),
     113                    'slug'  => 'medium-gray',
     114                    'color' => '#666',
     115                ),
     116                array(
     117                    'name'  => __( 'Light Gray', 'twentyeleven' ),
     118                    'slug'  => 'light-gray',
     119                    'color' => '#e2e2e2',
     120                ),
     121                array(
     122                    'name'  => __( 'White', 'twentyeleven' ),
     123                    'slug'  => 'white',
     124                    'color' => '#fff',
     125                ),
     126            )
     127        );
    85128
    86129        // Load up our theme options page and related code.
     
    240283endif; // twentyeleven_setup
    241284
     285/**
     286 * Enqueue scripts and styles for front end.
     287 *
     288 * @since Twenty Eleven 2.9
     289 */
     290function twentyeleven_scripts_styles() {
     291    // Theme block stylesheet.
     292    wp_enqueue_style( 'twentyeleven-block-style', get_template_directory_uri() . '/blocks.css', array(), '20181018' );
     293}
     294add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' );
     295
     296/**
     297 * Enqueue editor styles for Gutenberg
     298 *
     299 * @since Twenty Eleven 2.9
     300 */
     301function twentyeleven_block_editor_styles() {
     302    // Block styles.
     303    wp_enqueue_style( 'twentyeleven-block-editor-style', get_template_directory_uri() . '/editor-blocks.css' );
     304}
     305add_action( 'enqueue_block_editor_assets', 'twentyeleven_block_editor_styles' );
     306
    242307if ( ! function_exists( 'twentyeleven_header_style' ) ) :
    243308    /**
Note: See TracChangeset for help on using the changeset viewer.