Editor: Font Sizes per #106

studiopress · Jul 30, 2018 · ae396f2 · ae396f2
1 parent 4035170
commit ae396f2
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/functions.php b/functions.php
@@ -178,6 +178,34 @@ function genesis_sample_block_editor_styles() {
 // Adds support for block alignments.
 add_theme_support( 'align-wide' );
 
+// Adds support for editor font sizes. (Coming in Gutenberg 3.4)
+add_theme_support( 'editor-font-sizes', array(
+	array(
+		'name'      => __( 'small', 'genesis-sample' ),
+		'shortName' => __( 'S', 'genesis-sample' ),
+		'size'      => 12,
+		'slug'      => 'small'
+	),
+	array(
+		'name'      => __( 'regular', 'genesis-sample' ),
+		'shortName' => __( 'M', 'genesis-sample' ),
+		'size'      => 16,
+		'slug'      => 'regular'
+	),
+	array(
+		'name'      => __( 'large', 'genesis-sample' ),
+		'shortName' => __( 'L', 'genesis-sample' ),
+		'size'      => 20,
+		'slug'      => 'large'
+	),
+	array(
+		'name'      => __( 'larger', 'genesis-sample' ),
+		'shortName' => __( 'XL', 'genesis-sample' ),
+		'size'      => 24,
+		'slug'      => 'larger'
+	)
+) );
+
 // Adds support for editor color palette.
 add_theme_support( 'editor-color-palette',
 	array(

diff --git a/style-editor.css b/style-editor.css
@@ -89,6 +89,25 @@
 	font-size: 20px;
 }
 
+/* Font Sizes (Coming in Gutenberg 3.4)
+--------------------------------------------- */
+
+.gutenberg__editor p.has-small-font-size {
+    font-size: 12px;
+}
+
+.gutenberg__editor p.has-regular-font-size {
+    font-size: 16px;
+}
+
+.gutenberg__editor p.has-large-font-size {
+    font-size: 20px;
+}
+
+.gutenberg__editor p.has-larger-font-size {
+    font-size: 24px;
+}
+
 /* Color Palette
 --------------------------------------------- */
 

diff --git a/style.css b/style.css
@@ -47,6 +47,7 @@
 	- Color Palette
 	- Columns
 	- Figcaption
+	- Font Sizes
 	- Gallery
 - Widgets
 	- Featured Content
@@ -868,6 +869,25 @@ img.alignright,
 	margin-top: 10px;
 }
 
+/* Font Sizes (Coming in Gutenberg 3.4)
+--------------------------------------------- */
+
+.entry-content p.is-small-text {
+    font-size: 12px;
+}
+
+.entry-content p.is-regular-text{
+    font-size: 16px;
+}
+
+.entry-content p.is-large-text{
+    font-size: 20px;
+}
+
+.entry-content p.is-larger-text {
+    font-size: 24px;
+}
+
 /* Gallery
 --------------------------------------------- */