Changeset 43794

Timestamp:

10/22/2018 11:02:44 PM (6 years ago)

Author:

davidakennedy

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.
Fixes #45039.

Location:

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

Files:

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

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

@@ -82 +82 @@
     // This theme styles the visual editor with editor-style.css to match the theme style.
     add_editor_style();
+
+    // 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'  => __( 'Blue', 'twentyeleven' ),
+            'slug'  => 'blue',
+            'color' => '#1982d1',
+        ),
+        array(
+            'name'  => __( 'Black', 'twentyeleven' ),
+            'slug'  => 'black',
+            'color' => '#000',
+        ),
+        array(
+            'name'  => __( 'Dark Gray', 'twentyeleven' ),
+            'slug'  => 'dark-gray',
+            'color' => '#373737',
+        ),
+        array(
+            'name'  => __( 'Medium Gray', 'twentyeleven' ),
+            'slug'  => 'medium-gray',
+            'color' => '#666',
+        ),
+        array(
+            'name'  => __( 'Light Gray', 'twentyeleven' ),
+            'slug'  => 'light-gray',
+            'color' => '#e2e2e2',
+        ),
+        array(
+            'name'  => __( 'White', 'twentyeleven' ),
+            'slug'  => 'white',
+            'color' => '#fff',
+        )
+    ) );
 
     // Load up our theme options page and related code.
@@ -233 +273 @@
 endif; // twentyeleven_setup
 
+/**
+ * Enqueue scripts and styles for front end.
+ *
+ * @since Twenty Eleven 2.9
+ */
+function twentyeleven_scripts_styles() {
+    // Theme block stylesheet.
+    wp_enqueue_style( 'twentyeleven-block-style', get_template_directory_uri() . '/blocks.css', array(), '20181018' );
+}
+add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' );
+
+/**
+ * Enqueue editor styles for Gutenberg
+ *
+ * @since Twenty Eleven 2.9
+ */
+function twentyeleven_block_editor_styles() {
+    // Block styles.
+    wp_enqueue_style( 'twentyeleven-block-editor-style', get_template_directory_uri() . '/editor-blocks.css' );
+}
+add_action( 'enqueue_block_editor_assets', 'twentyeleven_block_editor_styles' );
+
 if ( ! function_exists( 'twentyeleven_header_style' ) ) :
 /**