Block Editor: Package updates for 5.8 beta 1.

This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.


git-svn-id: https://develop.svn.wordpress.org/trunk@51089 602fd350-edb4-49c9-b593-d223f7449a82

package.json

@@ -28,7 +28,7 @@
 		"@wordpress/dependency-extraction-webpack-plugin": "3.1.4",
 		"@wordpress/e2e-test-utils": "5.3.0",
 		"@wordpress/library-export-default-webpack-plugin": "2.0.5",
-		"@wordpress/scripts": "16.1.1",
+		"@wordpress/scripts": "16.1.2",
 		"autoprefixer": "^9.8.6",
 		"chalk": "4.1.1",
 		"check-node-version": "4.1.0",
@@ -82,52 +82,52 @@
 		"@wordpress/api-fetch": "5.1.1",
 		"@wordpress/autop": "3.1.1",
 		"@wordpress/blob": "3.1.1",
-		"@wordpress/block-directory": "2.1.3",
-		"@wordpress/block-editor": "6.1.1",
-		"@wordpress/block-library": "3.2.2",
+		"@wordpress/block-directory": "2.1.4",
+		"@wordpress/block-editor": "6.1.2",
+		"@wordpress/block-library": "3.2.3",
 		"@wordpress/block-serialization-default-parser": "4.1.1",
-		"@wordpress/blocks": "9.1.1",
-		"@wordpress/components": "14.1.1",
+		"@wordpress/blocks": "9.1.2",
+		"@wordpress/components": "14.1.2",
 		"@wordpress/compose": "4.1.1",
-		"@wordpress/core-data": "3.1.2",
-		"@wordpress/customize-widgets": "1.0.2",
+		"@wordpress/core-data": "3.1.3",
+		"@wordpress/customize-widgets": "1.0.3",
 		"@wordpress/data": "5.1.1",
 		"@wordpress/data-controls": "2.1.1",
 		"@wordpress/date": "4.1.1",
 		"@wordpress/deprecated": "3.1.1",
 		"@wordpress/dom": "3.1.1",
 		"@wordpress/dom-ready": "3.1.1",
-		"@wordpress/edit-post": "4.1.3",
-		"@wordpress/edit-widgets": "2.1.3",
-		"@wordpress/editor": "10.1.2",
+		"@wordpress/edit-post": "4.1.4",
+		"@wordpress/edit-widgets": "2.1.4",
+		"@wordpress/editor": "10.1.3",
 		"@wordpress/element": "3.1.1",
 		"@wordpress/escape-html": "2.1.1",
-		"@wordpress/format-library": "2.1.1",
+		"@wordpress/format-library": "2.1.2",
 		"@wordpress/hooks": "3.1.1",
 		"@wordpress/html-entities": "3.1.1",
 		"@wordpress/i18n": "4.1.1",
 		"@wordpress/icons": "4.0.1",
-		"@wordpress/interface": "3.1.1",
+		"@wordpress/interface": "3.1.2",
 		"@wordpress/is-shallow-equal": "4.1.1",
 		"@wordpress/keyboard-shortcuts": "2.1.1",
 		"@wordpress/keycodes": "3.1.1",
-		"@wordpress/list-reusable-blocks": "2.1.1",
+		"@wordpress/list-reusable-blocks": "2.1.2",
 		"@wordpress/media-utils": "2.1.1",
 		"@wordpress/notices": "3.1.1",
-		"@wordpress/nux": "4.1.1",
+		"@wordpress/nux": "4.1.2",
 		"@wordpress/plugins": "3.1.1",
 		"@wordpress/primitives": "2.1.1",
 		"@wordpress/priority-queue": "2.1.1",
 		"@wordpress/redux-routine": "4.1.1",
-		"@wordpress/reusable-blocks": "2.1.2",
+		"@wordpress/reusable-blocks": "2.1.3",
 		"@wordpress/rich-text": "4.1.1",
-		"@wordpress/server-side-render": "2.1.1",
+		"@wordpress/server-side-render": "2.1.2",
 		"@wordpress/shortcode": "3.1.1",
 		"@wordpress/token-list": "2.1.1",
 		"@wordpress/url": "3.1.1",
 		"@wordpress/viewport": "3.1.1",
 		"@wordpress/warning": "2.1.1",
-		"@wordpress/widgets": "1.1.2",
+		"@wordpress/widgets": "1.1.3",
 		"@wordpress/wordcount": "3.1.1",
 		"backbone": "1.4.0",
 		"clipboard": "2.0.8",

src/wp-includes/block-supports/typography.php

@@ -19,19 +19,26 @@ function wp_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_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_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_line_height_support
-		|| $has_text_transform_support
-		|| $has_text_decoration_support;
+		|| $has_text_decoration_support
+		|| $has_text_transform_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -68,40 +75,41 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
+	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	if ( ! $typography_supports ) {
+		return array();
+	}
+
+	$skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false );
+	if ( $skip_typography_serialization ) {
+		return array();
+	}
+
 	$attributes = array();
 	$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 );
-
-	$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
-
-	// Covers all typography features _except_ font size.
-	$skip_typography_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipTypographySerialization' ), false );
+	$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_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 );
 
-	// Font Size.
-	if ( $has_font_size_support && ! $skip_font_size_support_serialization ) {
+	if ( $has_font_size_support ) {
 		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
 		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
 
-		// Apply required class or style.
 		if ( $has_named_font_size ) {
 			$classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
 		} elseif ( $has_custom_font_size ) {
 			$styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
 		}
 	}
 
-	// Font Family.
-	if ( $has_font_family_support && ! $skip_typography_serialization ) {
+	if ( $has_font_family_support ) {
 		$has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );
-		// Apply required class and style.
 		if ( $has_font_family ) {
 			$font_family = $block_attributes['style']['typography']['fontFamily'];
 			if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) {
@@ -115,44 +123,36 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 		}
 	}
 
-	// Font style.
-	if ( $has_font_style_support && ! $skip_typography_serialization ) {
-		// Apply font style.
-		$font_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
+	if ( $has_font_style_support ) {
+		$font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
 		if ( $font_style ) {
 			$styles[] = $font_style;
 		}
 	}
 
-	// Font weight.
-	if ( $has_font_weight_support && ! $skip_typography_serialization ) {
-		// Apply font weight.
-		$font_weight = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
+	if ( $has_font_weight_support ) {
+		$font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
 		if ( $font_weight ) {
 			$styles[] = $font_weight;
 		}
 	}
 
-	// Line Height.
-	if ( $has_line_height_support && ! $skip_typography_serialization ) {
+	if ( $has_line_height_support ) {
 		$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
-		// Add the style (no classes for line-height).
 		if ( $has_line_height ) {
 			$styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
 		}
 	}
 
-	// Text Decoration.
-	if ( $has_text_decoration_support && ! $skip_typography_serialization ) {
-		$text_decoration_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
+	if ( $has_text_decoration_support ) {
+		$text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
 		if ( $text_decoration_style ) {
 			$styles[] = $text_decoration_style;
 		}
 	}
 
-	// Text Transform.
-	if ( $has_text_transform_support && ! $skip_typography_serialization ) {
-		$text_transform_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
+	if ( $has_text_transform_support ) {
+		$text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
 		if ( $text_transform_style ) {
 			$styles[] = $text_transform_style;
 		}

src/wp-includes/blocks.php

@@ -956,6 +956,32 @@ function block_has_support( $block_type, $feature, $default = false ) {
 	return true === $block_support || is_array( $block_support );
 }
 
+function wp_migrate_old_typography_shape( $metadata ) {
+	$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;
+}
+
 /**
  * Helper function that constructs a WP_Query args array from
  * a `Query` block properties.

src/wp-includes/blocks/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": [

src/wp-includes/blocks/code/block.json

@@ -14,7 +14,9 @@
 	},
 	"supports": {
 		"anchor": true,
-		"fontSize": true
+		"typography": {
+			"fontSize": true
+		}
 	},
 	"style": "wp-block-code"
 }

src/wp-includes/blocks/heading/block.json

@@ -32,8 +32,11 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontWeight": true
+		},
 		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true
 	},

src/wp-includes/blocks/legacy-widget.php

@@ -50,21 +50,25 @@ function render_block_core_legacy_widget( $attributes ) {
 }
 
 /**
- * On application init this does two things:
- *
- * - Registers the 'core/legacy-widget' block.
- * - Intercepts any request with legacy-widget-preview in the query param and,
- *   if set, renders a page containing a preview of the requested Legacy Widget
- *   block.
+ * Registers the 'core/legacy-widget' block.
  */
-function init_legacy_widget_block() {
+function register_block_core_legacy_widget() {
 	register_block_type_from_metadata(
 		__DIR__ . '/legacy-widget',
 		array(
 			'render_callback' => 'render_block_core_legacy_widget',
 		)
 	);
+}
+
+add_action( 'init', 'register_block_core_legacy_widget' );
 
+/**
+ * Intercepts any request with legacy-widget-preview in the query param and, if
+ * set, renders a page containing a preview of the requested Legacy Widget
+ * block.
+ */
+function handle_legacy_widget_preview_iframe() {
 	if ( empty( $_GET['legacy-widget-preview'] ) ) {
 		return;
 	}
@@ -110,4 +114,7 @@ function init_legacy_widget_block() {
 	exit;
 }
 
-add_action( 'init', 'init_legacy_widget_block' );
+// Ensure handle_legacy_widget_preview_iframe() is called after Core's
+// register_block_core_legacy_widget() (priority = 10) and after Gutenberg's
+// register_block_core_legacy_widget() (priority = 20).
+add_action( 'init', 'handle_legacy_widget_preview_iframe', 21 );

src/wp-includes/blocks/list/block.json

@@ -37,7 +37,10 @@
 	"supports": {
 		"anchor": true,
 		"className": false,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"color": {
 			"gradients": true
 		},

src/wp-includes/blocks/loginout/block.json

@@ -18,6 +18,8 @@
 	},
 	"supports": {
 		"className": true,
-		"fontSize": false
+		"typography": {
+			"fontSize": false
+		}
 	}
 }

src/wp-includes/blocks/paragraph/block.json

@@ -35,8 +35,10 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true
 	},

src/wp-includes/blocks/post-date/block.json

@@ -24,7 +24,9 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }