WordPress.org

Make WordPress Core

Changeset 43796


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

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

Legend:

Unmodified
Added
Removed

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

    r41756 r43796  
    7575    add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentythirteen_fonts_url() ) );
    7676
     77    // Load regular editor styles into the new block-based editor.
     78    add_theme_support( 'editor-styles' );
     79
     80    // Load default block styles.
     81    add_theme_support( 'wp-block-styles' );
     82
     83    // Add support for full and wide align images.
     84    add_theme_support( 'align-wide' );
     85
     86    // Add support for custom color scheme.
     87    add_theme_support( 'editor-color-palette', array(
     88        array(
     89            'name'  => __( 'Dark Gray', 'twentythirteen' ),
     90            'slug'  => 'dark-gray',
     91            'color' => '#141412',
     92        ),
     93        array(
     94            'name'  => __( 'Red', 'twentythirteen' ),
     95            'slug'  => 'red',
     96            'color' => '#bc360a',
     97        ),
     98        array(
     99            'name'  => __( 'Medium Orange', 'twentythirteen' ),
     100            'slug'  => 'medium-orange',
     101            'color' => '#db572f',
     102        ),
     103        array(
     104            'name'  => __( 'Light Orange', 'twentythirteen' ),
     105            'slug'  => 'light-orange',
     106            'color' => '#ea9629',
     107        ),
     108        array(
     109            'name'  => __( 'Yellow', 'twentythirteen' ),
     110            'slug'  => 'yellow',
     111            'color' => '#fbca3c',
     112        ),
     113        array(
     114            'name'  => __( 'White', 'twentythirteen' ),
     115            'slug'  => 'white',
     116            'color' => '#fff',
     117        ),
     118        array(
     119            'name'  => __( 'Dark Brown', 'twentythirteen' ),
     120            'slug'  => 'dark-brown',
     121            'color' => '#220e10',
     122        ),
     123        array(
     124            'name'  => __( 'Medium Brown', 'twentythirteen' ),
     125            'slug'  => 'medium-brown',
     126            'color' => '#722d19',
     127        ),
     128        array(
     129            'name'  => __( 'Light Brown', 'twentythirteen' ),
     130            'slug'  => 'light-brown',
     131            'color' => '#eadaa6',
     132        ),
     133        array(
     134            'name'  => __( 'Beige', 'twentythirteen' ),
     135            'slug'  => 'beige',
     136            'color' => '#e8e5ce',
     137        ),
     138        array(
     139            'name'  => __( 'Off-white', 'twentythirteen' ),
     140            'slug'  => 'off-white',
     141            'color' => '#f7f5e7',
     142        ),
     143    ) );
     144
    77145    // Adds RSS feed links to <head> for posts and comments.
    78146    add_theme_support( 'automatic-feed-links' );
    … …  
    184252    // Loads our main stylesheet.
    185253    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
     254
     255    // Theme block stylesheet.
     256    wp_enqueue_style( 'twentythirteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentythirteen-style' ), '2018-10-18' );
    186257
    187258    // Loads the Internet Explorer specific stylesheet.
    … …  
    215286}
    216287add_filter( 'wp_resource_hints', 'twentythirteen_resource_hints', 10, 2 );
     288
     289/**
     290 * Enqueue editor styles for Gutenberg
     291 *
     292 * @since Twenty Thirteen 2.5
     293 */
     294function twentythirteen_block_editor_styles() {
     295    // Block styles.
     296    wp_enqueue_style( 'twentythirteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     297    // Add custom fonts.
     298    wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );
     299}
     300add_action( 'enqueue_block_editor_assets', 'twentythirteen_block_editor_styles' );
    217301
    218302/**
Note: See TracChangeset for help on using the changeset viewer.