WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/14/2018 01:58:53 AM (7 years ago)
Author:
desrosj
Message:

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

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.
  • Add theme support and styles for align-wide, to allow wide and full alignment styles on the blocks.

Props laurelfulford, ianbelanger, davidkennedy.

Merges [43796] to trunk.

Fixes #45041.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk

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

    r43571 r44142  
    7676     */
    7777    add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentythirteen_fonts_url() ) );
     78
     79    // Load regular editor styles into the new block-based editor.
     80    add_theme_support( 'editor-styles' );
     81
     82    // Load default block styles.
     83    add_theme_support( 'wp-block-styles' );
     84
     85    // Add support for full and wide align images.
     86    add_theme_support( 'align-wide' );
     87
     88    // Add support for custom color scheme.
     89    add_theme_support(
     90        'editor-color-palette',
     91        array(
     92            array(
     93                'name'  => __( 'Dark Gray', 'twentythirteen' ),
     94                'slug'  => 'dark-gray',
     95                'color' => '#141412',
     96            ),
     97            array(
     98                'name'  => __( 'Red', 'twentythirteen' ),
     99                'slug'  => 'red',
     100                'color' => '#bc360a',
     101            ),
     102            array(
     103                'name'  => __( 'Medium Orange', 'twentythirteen' ),
     104                'slug'  => 'medium-orange',
     105                'color' => '#db572f',
     106            ),
     107            array(
     108                'name'  => __( 'Light Orange', 'twentythirteen' ),
     109                'slug'  => 'light-orange',
     110                'color' => '#ea9629',
     111            ),
     112            array(
     113                'name'  => __( 'Yellow', 'twentythirteen' ),
     114                'slug'  => 'yellow',
     115                'color' => '#fbca3c',
     116            ),
     117            array(
     118                'name'  => __( 'White', 'twentythirteen' ),
     119                'slug'  => 'white',
     120                'color' => '#fff',
     121            ),
     122            array(
     123                'name'  => __( 'Dark Brown', 'twentythirteen' ),
     124                'slug'  => 'dark-brown',
     125                'color' => '#220e10',
     126            ),
     127            array(
     128                'name'  => __( 'Medium Brown', 'twentythirteen' ),
     129                'slug'  => 'medium-brown',
     130                'color' => '#722d19',
     131            ),
     132            array(
     133                'name'  => __( 'Light Brown', 'twentythirteen' ),
     134                'slug'  => 'light-brown',
     135                'color' => '#eadaa6',
     136            ),
     137            array(
     138                'name'  => __( 'Beige', 'twentythirteen' ),
     139                'slug'  => 'beige',
     140                'color' => '#e8e5ce',
     141            ),
     142            array(
     143                'name'  => __( 'Off-white', 'twentythirteen' ),
     144                'slug'  => 'off-white',
     145                'color' => '#f7f5e7',
     146            ),
     147        )
     148    );
    78149
    79150    // Adds RSS feed links to <head> for posts and comments.
    … …  
    209280    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    210281
     282    // Theme block stylesheet.
     283    wp_enqueue_style( 'twentythirteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentythirteen-style' ), '2018-10-18' );
     284
    211285    // Loads the Internet Explorer specific stylesheet.
    212286    wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
    … …  
    239313}
    240314add_filter( 'wp_resource_hints', 'twentythirteen_resource_hints', 10, 2 );
     315
     316/**
     317 * Enqueue editor styles for Gutenberg
     318 *
     319 * @since Twenty Thirteen 2.5
     320 */
     321function twentythirteen_block_editor_styles() {
     322    // Block styles.
     323    wp_enqueue_style( 'twentythirteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     324    // Add custom fonts.
     325    wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );
     326}
     327add_action( 'enqueue_block_editor_assets', 'twentythirteen_block_editor_styles' );
    241328
    242329/**
Note: See TracChangeset for help on using the changeset viewer.