Changeset 44148 for trunk

Timestamp:

12/14/2018 02:21:38 AM (6 years ago)

Author:

desrosj

Message:

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

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.

Props laurelfulford, ianbelanger, crunnells, davidkennedy.

Merges [43800] to trunk.

Fixes #45045.

Location:

trunk

Files:

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

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

@@ -118 +118 @@
     add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_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' );
+
     // Define and register starter content to showcase the theme on new sites.
     $starter_content = array(
@@ -440 +446 @@
     wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
 
+    // Theme block stylesheet.
+    wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.0' );
+
     // Load the dark colorscheme.
     if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
@@ -490 +499 @@
 
 /**
+ * Enqueue editor styles for Gutenberg
+ *
+ * @since Twenty Seventeen 1.8
+ */
+function twentyseventeen_block_editor_styles() {
+    // Block styles.
+    wp_enqueue_style( 'twentyseventeen-block-editor-style', get_theme_file_uri( '/assets/css/editor-blocks.css' ) );
+    // Add custom fonts.
+    wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
+}
+add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' );
+
+/**
  * Add custom image sizes attribute to enhance responsive image functionality
  * for content images.