Group typographic block supports under a typography key (#32252)

Squashed commits: [ce2c0f8856] Update lib/block-supports/typography.php Co-authored-by: André <nosolosw@users.noreply.github.com> [a27fe6e2c7] Update: Typography supports shape.
WordPress · Jun 2, 2021 · 30a12e1 · 30a12e1
1 parent 19017d7
commit 30a12e1
Show file tree

Hide file tree

Showing 33 changed files with 198 additions and 98 deletions.
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -15,21 +15,28 @@ function gutenberg_register_typography_support( $block_type ) {
 		return;
 	}
 
-	$has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
-	$has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
-	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
-	$has_letter_spacing_support  = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );
-
-	$has_typography_support = $has_font_size_support
-		|| $has_font_weight_support
+	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	if ( ! $typography_supports ) {
+		return;
+	}
+
+	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
+	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
+	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
+	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
+	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
+	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
+	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+
+	$has_typography_support = $has_font_family_support
+		|| $has_font_size_support
 		|| $has_font_style_support
+		|| $has_font_weight_support
+		|| $has_letter_spacing_support
 		|| $has_line_height_support
-		|| $has_text_transform_support
 		|| $has_text_decoration_support
-		|| $has_letter_spacing_support;
+		|| $has_text_transform_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -67,14 +74,19 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$classes    = array();
 	$styles     = array();
 
-	$has_font_family_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false );
-	$has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
-	$has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
-	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
-	$has_letter_spacing_support  = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );
+	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	if ( ! $typography_supports ) {
+		return array();
+	}
+
+	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
+	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
+	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
+	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
+	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
+	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
+	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
 	$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
 

diff --git a/lib/blocks.php b/lib/blocks.php
@@ -430,3 +430,41 @@ function gutenberg_block_has_support( $block_type, $feature, $default = false )
 
 	return true === $block_support || is_array( $block_support );
 }
+
+/**
+ * Updates the shape of supports for declaring fontSize and lineHeight.
+ *
+ * @param array $metadata Metadata for registering a block type.
+ * @return array          Metadata for registering a block type with the supports shape updated.
+ */
+function gutenberg_migrate_old_typography_shape( $metadata ) {
+	// Temporarily disable migrations from core blocks until core block.json are updated.
+	if ( isset( $metadata['supports'] ) && false === strpos( $metadata['file'], '/wp-includes/blocks/' ) ) {
+		$typography_keys = array(
+			'__experimentalFontFamily',
+			'__experimentalFontStyle',
+			'__experimentalFontWeight',
+			'__experimentalLetterSpacing',
+			'__experimentalTextDecoration',
+			'__experimentalTextTransform',
+			'fontSize',
+			'lineHeight',
+		);
+		foreach ( $typography_keys as $typography_key ) {
+			$support_for_key = _wp_array_get( $metadata['supports'], array( $typography_key ), null );
+			if ( null !== $support_for_key ) {
+				trigger_error(
+					/* translators: %1$s: Block type, %2$s: typography supports key e.g: fontSize, lineHeight etc... */
+					sprintf( __( 'Block %1$s is declaring %2$s support on block.json under supports.%2$s. %2$s support is now declared under supports.typography.%2$s.', 'gutenberg' ), $metadata['name'], $typography_key ),
+					headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE
+				);
+				gutenberg_experimental_set( $metadata['supports'], array( 'typography', $typography_key ), $support_for_key );
+				unset( $metadata['supports'][ $typography_key ] );
+			}
+		}
+	}
+	return $metadata;
+}
+
+
+add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
@@ -13,12 +13,12 @@ import { cleanEmptyObject } from './utils';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle';
+export const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight';
+export const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 
 /**
  * Inspector control panel containing the font appearance options.

diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -15,7 +15,7 @@ import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
 
-export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
 const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
 	const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );

diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
@@ -18,7 +18,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 
-export const FONT_SIZE_SUPPORT_KEY = 'fontSize';
+export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
 /**
  * Filters registered block settings, extending attributes to include

diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
@@ -10,7 +10,7 @@ import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 
-export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight';
+export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
 /**
  * Inspector control panel containing the line height related configuration

diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js
@@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-export const TEXT_DECORATION_SUPPORT_KEY = '__experimentalTextDecoration';
+export const TEXT_DECORATION_SUPPORT_KEY =
+	'typography.__experimentalTextDecoration';
 
 /**
  * Inspector control panel containing the text decoration options.

diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js
@@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-export const TEXT_TRANSFORM_SUPPORT_KEY = '__experimentalTextTransform';
+export const TEXT_TRANSFORM_SUPPORT_KEY =
+	'typography.__experimentalTextTransform';
 
 /**
  * Inspector control panel containing the text transform options.

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -61,13 +61,15 @@
 			"__experimentalSkipSerialization": true,
 			"gradients": true
 		},
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"reusable": false,
 		"__experimentalBorder": {
 			"radius": true,
 			"__experimentalSkipSerialization": true
 		},
-		"__experimentalFontFamily": true,
 		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"styles": [

diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
@@ -14,7 +14,9 @@
 	},
 	"supports": {
 		"anchor": true,
-		"fontSize": true
+		"typography": {
+			"fontSize": true
+		}
 	},
 	"style": "wp-block-code"
 }
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
@@ -32,10 +32,12 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontWeight": true
+		},
 		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
-		"__experimentalFontWeight": true,
 		"__unstablePasteTextInline": true
 	},
 	"editorStyle": "wp-block-heading-editor",

diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
@@ -37,11 +37,13 @@
 	"supports": {
 		"anchor": true,
 		"className": false,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"color": {
 			"gradients": true
 		},
-		"__experimentalFontFamily": true,
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul"
 	},

diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
@@ -18,6 +18,8 @@
 	},
 	"supports": {
 		"className": true,
-		"fontSize": false
+		"typography": {
+			"fontSize": false
+		}
 	}
 }
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -63,14 +63,16 @@
 		"anchor": true,
 		"html": false,
 		"inserter": true,
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontStyle": true,
-		"__experimentalFontWeight": true,
-		"__experimentalTextTransform": true,
-		"color": true,
-		"__experimentalFontFamily": true,
-		"__experimentalTextDecoration": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalTextTransform": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true
+		},
+		"color": true
 	},
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"

diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
@@ -35,8 +35,10 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true
 	},

diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
@@ -27,12 +27,14 @@
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
 		"html": false,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true
-		},
-		"lineHeight": true
+		}
 	},
 	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"

diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
@@ -16,7 +16,9 @@
 		"color": {
 			"gradients": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
@@ -17,8 +17,10 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	},
 	"style": "wp-block-post-comments-form"
 }
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
@@ -13,11 +13,13 @@
 	},
 	"supports": {
 		"html": false,
-		"fontSize": true,
 		"color": {
 			"link": true,
 			"text": false
 		},
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json
@@ -14,12 +14,14 @@
 	"supports": {
 		"html": false,
 		"align": [ "wide", "full" ],
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true
-		},
-		"lineHeight": true
+		}
 	},
 	"style": "wp-block-post-comments"
 }
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
@@ -24,7 +24,9 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
@@ -24,12 +24,14 @@
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"html": false,
-		"fontSize": true,
 		"color": {
 			"gradients": true,
 			"link": true
 		},
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",
 	"style": "wp-block-post-excerpt"