Merge cd38d4a into 9ee8439

material-components · May 30, 2022 · 2968ac6 · 2968ac6
2 parents 9ee8439 + cd38d4a
commit 2968ac6
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 0 deletions.
diff --git a/plugin/assets/css/src/block-editor.css b/plugin/assets/css/src/block-editor.css
@@ -78,3 +78,10 @@
 .mdc-image-list__label {
 	white-space: normal;
 }
+
+/*
+ * Fix dropdown font size on Gutenberg with 5.6.
+ */
+.components-font-size-picker__select > ul > li {
+	font-size: inherit !important;
+}
diff --git a/theme/assets/css/src/base/typography.css b/theme/assets/css/src/base/typography.css
@@ -61,6 +61,23 @@
 @mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400;
 @mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500;
 
+/** WordPress Gutenberg typography class registered in theme support / theme.json. */
+@mixin selector-typography .has-display-large-font-size, display-large, 7.5, 6, 300;
+@mixin selector-typography .has-display-medium-font-size, display-medium, 6.875, 6, 300;
+@mixin selector-typography .has-display-small-font-size, display-small, 6, 6, 300;
+@mixin selector-typography .has-headline-large-font-size, headline-large, 3.75, 3.75, 300;
+@mixin selector-typography .has-headline-medium-font-size, headline-medium, 3, 3.125, 400;
+@mixin selector-typography .has-headline-small-font-size, headline-small, 2.125, 2.5, 400;
+@mixin selector-typography .has-title-large-font-size, title-large, 1.5, 2, 400;
+@mixin selector-typography .has-title-medium-font-size, title-medium, 1.25, 2, 500;
+@mixin selector-typography .has-title-small-font-size, title-small, 0.875, 1.57, 500;
+@mixin selector-typography .has-body-large-font-size, body-large, 1, 1.5, 400;
+@mixin selector-typography .has-body-medium-font-size, body-medium, 0.875, 1.25, 400;
+@mixin selector-typography .has-body-small-font-size, body-small, 0.75, 1.25, 400;
+@mixin selector-typography .has-label-large-font-size, label-large, 1, 1.75, 400;
+@mixin selector-typography .has-label-medium-font-size, label-medium, 0.875, 1.375, 500;
+@mixin selector-typography .has-label-small-font-size, label-small, 0.75, 2, 500;
+
 /* Backward compat: For `body` types typography should be applied to child elements as well */
 @mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400;
 @mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400;
diff --git a/theme/inc/block-editor.php b/theme/inc/block-editor.php
@@ -26,6 +26,7 @@ function setup() {
 	add_action( 'init', __NAMESPACE__ . '\\register_disable_section_meta' );
 	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\enqueue_block_editor_assets' );
 	add_action( 'body_class', __NAMESPACE__ . '\\filter_body_class' );
+	add_action( 'after_setup_theme', __NAMESPACE__ . '\\add_font_sizes' );
 }
 
 /**
@@ -96,3 +97,107 @@ function filter_body_class( $classes ) {
 
 	return $classes;
 }
+
+/**
+ * Em to px.
+ *
+ * @param float $em Em value.
+ *
+ * @return int
+ */
+function em_to_px( $em ) {
+	return (int) ( $em * 16 );
+}
+
+/**
+ * Add font sizes.
+ *
+ * @return void
+ */
+function add_font_sizes() {
+	// Handle for 5.6 and 5.7 WP, 5.8 and later will be handled via theme.json.
+	if ( version_compare( get_bloginfo( 'version' ), '5.6', '<' ) || version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) {
+		return;
+	}
+
+	add_theme_support(
+		'editor-font-sizes',
+		[
+			[
+				'name' => __( 'Display Large', 'material-design-google' ),
+				'size' => em_to_px( 7.5 ),
+				'slug' => 'display-large',
+			],
+			[
+				'name' => __( 'Display Medium', 'material-design-google' ),
+				'size' => em_to_px( 6.875 ),
+				'slug' => 'display-medium',
+			],
+			[
+				'name' => __( 'Display Small', 'material-design-google' ),
+				'size' => em_to_px( 6 ),
+				'slug' => 'display-small',
+			],
+			[
+				'name' => __( 'Headline Large', 'material-design-google' ),
+				'size' => em_to_px( 3.75 ),
+				'slug' => 'headline-large',
+			],
+			[
+				'name' => __( 'Headline Medium', 'material-design-google' ),
+				'size' => em_to_px( 3 ),
+				'slug' => 'headline-medium',
+			],
+			[
+				'name' => __( 'Headline Small', 'material-design-google' ),
+				'size' => em_to_px( 2.125 ),
+				'slug' => 'headline-small',
+			],
+			[
+				'name' => __( 'Title Large', 'material-design-google' ),
+				'size' => em_to_px( 1.5 ),
+				'slug' => 'title-large',
+			],
+			[
+				'name' => __( 'Title Medium', 'material-design-google' ),
+				'size' => em_to_px( 1.25 ),
+				'slug' => 'title-medium',
+			],
+			[
+				'name' => __( 'Title Small', 'material-design-google' ),
+				'size' => em_to_px( 0.875 ),
+				'slug' => 'title-small',
+			],
+			[
+				'name' => __( 'Label Large', 'material-design-google' ),
+				'size' => em_to_px( 1 ),
+				'slug' => 'label-large',
+			],
+			[
+				'name' => __( 'Label Medium', 'material-design-google' ),
+				'size' => em_to_px( 0.875 ),
+				'slug' => 'label-medium',
+			],
+			[
+				'name' => __( 'Label Small', 'material-design-google' ),
+				'size' => em_to_px( 0.75 ),
+				'slug' => 'label-small',
+			],
+			[
+				'name' => __( 'Body Large', 'material-design-google' ),
+				'size' => em_to_px( 1 ),
+				'slug' => 'body-large',
+			],
+			[
+				'name' => __( 'Body Medium', 'material-design-google' ),
+				'size' => em_to_px( 0.875 ),
+				'slug' => 'body-medium',
+			],
+			[
+				'name' => __( 'Body Small', 'material-design-google' ),
+				'size' => em_to_px( 0.75 ),
+				'slug' => 'body-small',
+			],
+		]
+	);
+}
diff --git a/theme/theme.json b/theme/theme.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://schemas.wp.org/wp/5.8/theme.json",
+  "version": 1,
+  "settings": {
+    "layout": {
+      "contentSize": "840px",
+      "wideSize": "100vw"
+    },
+    "typography": {
+      "fontSizes": [
+        {
+          "name": "Display Large",
+          "size": "var(--md-sys-typescale-display-large-size, 7.5em)",
+          "slug": "display-large"
+        },
+        {
+          "name": "Display Medium",
+          "size": "var(--md-sys-typescale-display-medium-size, 6.875em)",
+          "slug": "display-medium"
+        },
+        {
+          "name": "Display Small",
+          "size": "var(--md-sys-typescale-display-small-size, 6em)",
+          "slug": "display-small"
+        },
+        {
+          "name": "Headline Large",
+          "size": "var(--md-sys-typescale-headline-large-size, 3.75em)",
+          "slug": "headline-large"
+        },
+        {
+          "name": "Headline Medium",
+          "size": "var(--md-sys-typescale-headline-medium-size, 3em)",
+          "slug": "headline-medium"
+        },
+        {
+          "name": "Headline Small",
+          "size": "var(--md-sys-typescale-headline-small-size, 2.125em)",
+          "slug": "headline-small"
+        },
+        {
+          "name": "Title Large",
+          "size": "var(--md-sys-typescale-title-large-size, 1.5em)",
+          "slug": "title-large"
+        },
+        {
+          "name": "Title Medium",
+          "size": "var(--md-sys-typescale-title-medium-size, 1.25em)",
+          "slug": "title-medium"
+        },
+        {
+          "name": "Title Small",
+          "size": "var(--md-sys-typescale-title-small-size, 0.875em)",
+          "slug": "title-small"
+        },
+        {
+          "name": "Label Large",
+          "size": "var(--md-sys-typescale-label-large-size, 1em)",
+          "slug": "label-large"
+        },
+        {
+          "name": "Label Medium",
+          "size": "var(--md-sys-typescale-label-medium-size, 0.875em)",
+          "slug": "label-medium"
+        },
+        {
+          "name": "Label Small",
+          "size": "var(--md-sys-typescale-label-small-size, 0.75em)",
+          "slug": "label-small"
+        },
+        {
+          "name": "Body Large",
+          "size": "var(--md-sys-typescale-body-large-size, 1)",
+          "slug": "body-large"
+        },
+        {
+          "name": "Body Medium",
+          "size": "var(--md-sys-typescale-body-medium-size, 0.857em)",
+          "slug": "body-medium"
+        },
+        {
+          "name": "Body Small",
+          "size": "var(--md-sys-typescale-body-small-size, 0.75em)",
+          "slug": "body-small"
+        }
+      ]
+    }
+  }
+}