Changeset 43799

Timestamp:

10/23/2018 01:03:09 AM (8 years ago)

Author:

davidakennedy

Message:

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

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

Location:

branches/5.0/src/wp-content/themes/twentysixteen

Files:

• css/blocks.css (added)
• css/editor-blocks.css (added)
• functions.php (modified) (4 diffs)

branches/5.0/src/wp-content/themes/twentysixteen/functions.php

@@ -125 +125 @@
         add_editor_style( array( 'css/editor-style.css', twentysixteen_fonts_url() ) );
 
+        // Load regular editor styles into the new block-based editor.
+        add_theme_support( 'editor-styles' );
+
+        // Load default block styles.
+        add_theme_support( 'wp-block-styles' );
+
+        // Add support for custom color scheme.
+        add_theme_support( 'editor-color-palette', array(
+                array(
+                        'name'  => __( 'Dark Gray', 'twentysixteen' ),
+                        'slug'  => 'dark-gray',
+                        'color' => '#1a1a1a',
+                ),
+                array(
+                        'name'  => __( 'Medium Gray', 'twentysixteen' ),
+                        'slug'  => 'medium-gray',
+                        'color' => '#686868',
+                ),
+                array(
+                        'name'  => __( 'Light Gray', 'twentysixteen' ),
+                        'slug'  => 'light-gray',
+                        'color' => '#e5e5e5',
+                ),
+                array(
+                        'name'  => __( 'White', 'twentysixteen' ),
+                        'slug'  => 'white',
+                        'color' => '#fff',
+                ),
+                array(
+                        'name'  => __( 'Blue Gray', 'twentysixteen' ),
+                        'slug'  => 'blue-gray',
+                        'color' => '#4d545c',
+                ),
+                array(
+                        'name'  => __( 'Bright Blue', 'twentysixteen' ),
+                        'slug'  => 'bright-blue',
+                        'color' => '#007acc',
+                ),
+                array(
+                        'name'  => __( 'Light Blue', 'twentysixteen' ),
+                        'slug'  => 'light-blue',
+                        'color' => '#9adffd',
+                ),
+                array(
+                        'name'  => __( 'Dark Brown', 'twentysixteen' ),
+                        'slug'  => 'dark-brown',
+                        'color' => '#402b30',
+                ),
+                array(
+                        'name'  => __( 'Medium Brown', 'twentysixteen' ),
+                        'slug'  => 'medium-brown',
+                        'color' => '#774e24',
+                ),
+                array(
+                        'name'  => __( 'Dark Red', 'twentysixteen' ),
+                        'slug'  => 'dark-red',
+                        'color' => '#640c1f',
+                ),
+                array(
+                        'name'  => __( 'Bright Red', 'twentysixteen' ),
+                        'slug'  => 'bright-red',
+                        'color' => '#ff675f',
+                ),
+                array(
+                        'name'  => __( 'Yellow', 'twentysixteen' ),
+                        'slug'  => 'yellow',
+                        'color' => '#ffef8e',
+                ),
+        ) );
+
         // Indicate widget sidebars can use selective refresh in the Customizer.
         add_theme_support( 'customize-selective-refresh-widgets' );
@@ -253 +323 @@
         wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
 
+        // Theme block stylesheet.
+        wp_enqueue_style( 'twentysixteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentysixteen-style' ), '20181018' );
+
         // Load the Internet Explorer specific stylesheet.
         wp_enqueue_style( 'twentysixteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentysixteen-style' ), '20160816' );
@@ -287 +360 @@
 }
 add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );
+
+/**
+ * Enqueue editor styles for Gutenberg
+ *
+ * @since Twenty Sixteen 1.6
+ */
+function twentysixteen_block_editor_styles() {
+        // Block styles.
+        wp_enqueue_style( 'twentysixteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
+        // Add custom fonts.
+        wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null );
+}
+add_action( 'enqueue_block_editor_assets', 'twentysixteen_block_editor_styles' );
 
 /**
@@ -428 +514 @@
         $args['smallest'] = 1;
         $args['unit']     = 'em';
-        $args['format']   = 'list'; 
+        $args['format']   = 'list';
 
         return $args;