Changeset 44142 for trunk

Timestamp:

12/14/2018 01:58:53 AM (8 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:

• . (modified) (1 prop)
• src/wp-content/themes/twentythirteen/css/blocks.css (copied) (copied from branches/5.0/src/wp-content/themes/twentythirteen/css/blocks.css )
• src/wp-content/themes/twentythirteen/css/editor-blocks.css (copied) (copied from branches/5.0/src/wp-content/themes/twentythirteen/css/editor-blocks.css )
• src/wp-content/themes/twentythirteen/functions.php (modified) (3 diffs)

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

@@ -76 +76 @@
          */
         add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentythirteen_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 full and wide align images.
+        add_theme_support( 'align-wide' );
+
+        // Add support for custom color scheme.
+        add_theme_support(
+                'editor-color-palette',
+                array(
+                        array(
+                                'name'  => __( 'Dark Gray', 'twentythirteen' ),
+                                'slug'  => 'dark-gray',
+                                'color' => '#141412',
+                        ),
+                        array(
+                                'name'  => __( 'Red', 'twentythirteen' ),
+                                'slug'  => 'red',
+                                'color' => '#bc360a',
+                        ),
+                        array(
+                                'name'  => __( 'Medium Orange', 'twentythirteen' ),
+                                'slug'  => 'medium-orange',
+                                'color' => '#db572f',
+                        ),
+                        array(
+                                'name'  => __( 'Light Orange', 'twentythirteen' ),
+                                'slug'  => 'light-orange',
+                                'color' => '#ea9629',
+                        ),
+                        array(
+                                'name'  => __( 'Yellow', 'twentythirteen' ),
+                                'slug'  => 'yellow',
+                                'color' => '#fbca3c',
+                        ),
+                        array(
+                                'name'  => __( 'White', 'twentythirteen' ),
+                                'slug'  => 'white',
+                                'color' => '#fff',
+                        ),
+                        array(
+                                'name'  => __( 'Dark Brown', 'twentythirteen' ),
+                                'slug'  => 'dark-brown',
+                                'color' => '#220e10',
+                        ),
+                        array(
+                                'name'  => __( 'Medium Brown', 'twentythirteen' ),
+                                'slug'  => 'medium-brown',
+                                'color' => '#722d19',
+                        ),
+                        array(
+                                'name'  => __( 'Light Brown', 'twentythirteen' ),
+                                'slug'  => 'light-brown',
+                                'color' => '#eadaa6',
+                        ),
+                        array(
+                                'name'  => __( 'Beige', 'twentythirteen' ),
+                                'slug'  => 'beige',
+                                'color' => '#e8e5ce',
+                        ),
+                        array(
+                                'name'  => __( 'Off-white', 'twentythirteen' ),
+                                'slug'  => 'off-white',
+                                'color' => '#f7f5e7',
+                        ),
+                )
+        );
 
         // Adds RSS feed links to <head> for posts and comments.
@@ -209 +280 @@
         wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
 
+        // Theme block stylesheet.
+        wp_enqueue_style( 'twentythirteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentythirteen-style' ), '2018-10-18' );
+
         // Loads the Internet Explorer specific stylesheet.
         wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
@@ -239 +313 @@
 }
 add_filter( 'wp_resource_hints', 'twentythirteen_resource_hints', 10, 2 );
+
+/**
+ * Enqueue editor styles for Gutenberg
+ *
+ * @since Twenty Thirteen 2.5
+ */
+function twentythirteen_block_editor_styles() {
+        // Block styles.
+        wp_enqueue_style( 'twentythirteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
+        // Add custom fonts.
+        wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );
+}
+add_action( 'enqueue_block_editor_assets', 'twentythirteen_block_editor_styles' );
 
 /**