Penscratch: Update editor styles

penscratch-2/css/editor-blocks.css

@@ -19,15 +19,15 @@ Description: Used to style Gutenberg Blocks in the editor.
 1.0 General Typography
 --------------------------------------------------------------*/
 
-.edit-post-visual-editor .editor-block-list__block,
+.block-editor-block-list__block,
 .editor-default-block-appender textarea.editor-default-block-appender__content {
 	font-family: "Roboto Slab", Georgia, Times, serif;
 }
 
 /* Font size */
 
-.edit-post-visual-editor .editor-block-list__block,
-.edit-post-visual-editor .editor-block-list__block p,
+.block-editor-block-list__block,
+.block-editor-block-list__block p,
 .editor-default-block-appender textarea.editor-default-block-appender__content {
 	font-size: 15px;
 	font-weight: 300;
@@ -35,8 +35,8 @@ Description: Used to style Gutenberg Blocks in the editor.
 }
 
 @media (min-width: 50em) {
-	.edit-post-visual-editor .editor-block-list__block,
-	.edit-post-visual-editor .editor-block-list__block p,
+	.block-editor-block-list__block,
+	.block-editor-block-list__block p,
 	.editor-default-block-appender textarea.editor-default-block-appender__content {
 		font-size: 18px;
 	}
@@ -44,7 +44,7 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 /* Colour */
 
-.edit-post-visual-editor .editor-block-list__block {
+.block-editor-block-list__block {
 	color: #666;
 }
 
@@ -65,69 +65,69 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 /* Headings */
 
-.edit-post-visual-editor h1,
+h1,
 .wp-block-freeform.block-library-rich-text__tinymce h1,
-.edit-post-visual-editor h2,
+h2,
 .wp-block-freeform.block-library-rich-text__tinymce h2,
-.edit-post-visual-editor h3,
+h3,
 .wp-block-freeform.block-library-rich-text__tinymce h3,
-.edit-post-visual-editor h4,
+h4,
 .wp-block-freeform.block-library-rich-text__tinymce h4,
-.edit-post-visual-editor h5,
+h5,
 .wp-block-freeform.block-library-rich-text__tinymce h5,
-.edit-post-visual-editor h6,
+h6,
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
 	color: #666;
 	font-weight: normal
 }
 
-.edit-post-visual-editor h1,
+h1,
 .wp-block-freeform.block-library-rich-text__tinymce h1 {
 	font-size: 28px;
 }
 
-.edit-post-visual-editor h2,
+h2,
 .wp-block-freeform.block-library-rich-text__tinymce h2 {
 	font-size: 20px;
 }
 
-.edit-post-visual-editor h3,
+h3,
 .wp-block-freeform.block-library-rich-text__tinymce h3 {
 	font-size: 20px;
 }
 
-.edit-post-visual-editor h4,
+h4,
 .wp-block-freeform.block-library-rich-text__tinymce h4 {
 	font-size: 16px;
 }
 
-.edit-post-visual-editor h5,
+h5,
 .wp-block-freeform.block-library-rich-text__tinymce h5 {
 	font-size: 16px;
 }
 
-.edit-post-visual-editor h6,
+h6,
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
 	font-size: 14px;
 }
 
 @media (min-width: 50em) {
-	.edit-post-visual-editor h1,
+	h1,
 	.wp-block-freeform.block-library-rich-text__tinymce h1 {
 		font-size: 32px;
 	}
 
-	.edit-post-visual-editor h2,
+	h2,
 	.wp-block-freeform.block-library-rich-text__tinymce h2 {
 		font-size: 28px;
 	}
 
-	.edit-post-visual-editor h3,
+	h3,
 	.wp-block-freeform.block-library-rich-text__tinymce h3 {
 		font-size: 24px;
 	}
 
-	.edit-post-visual-editor h4,
+	h4,
 	.wp-block-freeform.block-library-rich-text__tinymce h4 {
 		font-size: 20px;
 	}
@@ -145,8 +145,8 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 /* Link styles */
 
-.edit-post-visual-editor a,
-.editor-block-list__block a,
+a,
+.block-editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
 	color: #1c7c7c;
 	text-decoration: none;
@@ -344,12 +344,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	right: 0;
 }
 
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
+.block-editor-block-list__block .wp-block-quote p {
 	color: #999;
 }
 
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
-.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
+.block-editor-block-list__block .wp-block-quote.is-large p,
+.block-editor-block-list__block .wp-block-quote.is-style-large p {
 	font-size: 22px;
 	font-style: normal;
 }
@@ -387,12 +387,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 		font-size: 72px;
 	}
 
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
+	.block-editor-block-list__block .wp-block-quote p {
 		font-size: 21.6px;
 	}
 
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
-	.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
+	.block-editor-block-list__block .wp-block-quote.is-large p,
+	.block-editor-block-list__block .wp-block-quote.is-style-large p {
 		font-size: 28px;
 	}
 
@@ -404,12 +404,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Cover */
 
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image h2,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-image-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-text,
-.edit-post-visual-editor .editor-block-list__block .wp-block-cover h2 {
+.block-editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
+.block-editor-block-list__block .wp-block-cover-image .wp-block-cover-text,
+.block-editor-block-list__block .wp-block-cover-image h2,
+.block-editor-block-list__block .wp-block-cover .wp-block-cover-image-text,
+.block-editor-block-list__block .wp-block-cover .wp-block-cover-text,
+.block-editor-block-list__block .wp-block-cover h2 {
 	font-size: 27px;
 }
 
@@ -559,9 +559,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* General Widget styles */
 
-.edit-post-visual-editor [data-align="center"] .wp-block-categories__list,
-.edit-post-visual-editor [data-align="center"] .wp-block-archives,
-.edit-post-visual-editor [data-align="center"] .wp-block-lastest-posts {
+[data-align="center"] .wp-block-categories__list,
+[data-align="center"] .wp-block-archives,
+[data-align="center"] .wp-block-lastest-posts {
 	list-style-position: inside;
 }
 
@@ -575,4 +575,3 @@ p.has-drop-cap:not(:focus)::first-letter {
 .wp-block-latest-comments__comment-date {
 	color: inherit;
 }
-

penscratch-2/functions.php

@@ -126,6 +126,11 @@ if ( ! function_exists( 'penscratch_2_setup' ) ) :
 			)
 		);
 
+		add_theme_support( 'editor-styles' );
+		add_editor_style( array(
+			get_theme_file_uri( '/css/editor-blocks.css' ),
+			penscratch_2_fonts_url()
+		) );
 	}
 endif; // penscratch_2_setup
 add_action( 'after_setup_theme', 'penscratch_2_setup' );
@@ -222,17 +227,6 @@ function penscratch_2_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'penscratch_2_scripts' );
 
-/**
- * Enqueue editor styles for Gutenberg
- */
-function penscratch_2_block_editor_styles() {
-	// Block styles.
-	wp_enqueue_style( 'penscratch-2-block-editor-style', get_theme_file_uri( '/css/editor-blocks.css' ) );
-	// Fonts.
-	wp_enqueue_style( 'penscratch-2-fonts-url', penscratch_2_fonts_url(), array(), null );
-}
-add_action( 'enqueue_block_editor_assets', 'penscratch_2_block_editor_styles' );
-
 /**
  * Register Google Fonts
  */

penscratch-2/style.css

@@ -3,7 +3,7 @@
  * Author: Automattic
  * Author URI: https://wordpress.com/themes/
  * Description: A clean, responsive writing theme with support for custom logos, featured images, fancy pull quotes, and more.
- * Version: 2.0.2-wpcom
+ * Version: 2.0.3-wpcom
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain: penscratch
@@ -1918,8 +1918,8 @@ div.sharedaddy div.sd-block {
 }
 @media screen and (min-width: 55em) {
 	.no-sidebar .site {
-		margin-right: auto; 
-		margin-left: auto;								
+		margin-right: auto;
+		margin-left: auto;
 		max-width: 872px;
 		padding: 54px 108px;
 	}