Merge pull request #362 from material-components/m3/gutebnerg-typography

Allow picking typography token in Gutenberg
material-components · Jul 4, 2022 · e48ec5d · e48ec5d
2 parents c6b65b8 + 699b028
commit e48ec5d
Show file tree

Hide file tree

Showing 4 changed files with 272 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,8 +26,63 @@ 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' );
+
+	handle_fse_opt_out();
+}
+
+/**
+ * Handle fse opt out for.
+ *
+ * @return void
+ */
+function handle_fse_opt_out() {
+	// Removes fse menu entry and other features.
+	remove_theme_support( 'block-templates' );
+	// Disable the FSE template route.
+	$template_types = array_keys( get_default_block_template_types() );
+	foreach ( $template_types as $template_type ) {
+		// Skip 'embed' for now because it is not a regular template type.
+		if ( 'embed' === $template_type ) {
+			continue;
+		}
+		add_filter( str_replace( '-', '', $template_type ) . '_template', __NAMESPACE__ . '\\determine_template', 10, 3 );
+	}
+	add_filter( 'theme_file_path', __NAMESPACE__ . '\\filter_disable_fse', 10, 2 );
+}
+
+/**
+ * Filter site path to enable and disable FSE.
+ *
+ * @param string $path File path.
+ * @param string $file Relative theme path.
+ *
+ * @return string
+ */
+function filter_disable_fse( $path, $file ) {
+	if ( 'index.html' !== basename( $file ) ) {
+		return $path;
+	}
+
+	return str_replace( 'index.html', 'index-disabled.html', $path );
+}
+
+/**
+ * Determine template for non FSE theme.
+ *
+ * This will allow fallback to default php template if user has not opted in for FSE template.
+ *
+ * @param string   $_template Path to the template. See locate_template().
+ * @param string   $_type     Sanitized filename without extension.
+ * @param string[] $templates A list of template candidates, in descending order of priority.
+ *
+ * @return string
+ */
+function determine_template( $_template, $_type, $templates ) {
+	return locate_template( $templates );
 }
 
+
 /**
  * Register disable section meta.
  */
@@ -96,3 +151,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": "84rem"
+    },
+    "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"
+        }
+      ]
+    }
+  }
+}