prep build 6/11

backport-changelog/6.6/6756.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6756
+
+* https://github.com/WordPress/gutenberg/pull/62461

lib/block-supports/block-style-variations.php

@@ -209,24 +209,20 @@ function gutenberg_render_block_style_variation_class_name( $block_content, $blo
 
 /**
  * Collects block style variation data for merging with theme.json data.
- * As each block style variation is processed it is registered if it hasn't
- * been already. This registration is required for later sanitization of
- * theme.json data.
  *
  * @since 6.6.0
  *
  * @param array $variations Shared block style variations.
  *
  * @return array Block variations data to be merged under `styles.blocks`.
  */
-function gutenberg_resolve_and_register_block_style_variations( $variations ) {
+function gutenberg_resolve_block_style_variations( $variations ) {
 	$variations_data = array();
 
 	if ( empty( $variations ) ) {
 		return $variations_data;
 	}
 
-	$registry              = WP_Block_Styles_Registry::get_instance();
 	$have_named_variations = ! wp_is_numeric_array( $variations );
 
 	foreach ( $variations as $key => $variation ) {
@@ -248,23 +244,9 @@ function gutenberg_resolve_and_register_block_style_variations( $variations ) {
 		 * Block style variations read in via standalone theme.json partials
 		 * need to have their name set to the kebab case version of their title.
 		 */
-		$variation_name  = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
-		$variation_label = $variation['title'] ?? $variation_name;
+		$variation_name = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
 
 		foreach ( $supported_blocks as $block_type ) {
-			$registered_styles = $registry->get_registered_styles_for_block( $block_type );
-
-			// Register block style variation if it hasn't already been registered.
-			if ( ! array_key_exists( $variation_name, $registered_styles ) ) {
-				gutenberg_register_block_style(
-					$block_type,
-					array(
-						'name'  => $variation_name,
-						'label' => $variation_label,
-					)
-				);
-			}
-
 			// Add block style variation data under current block type.
 			$path = array( $block_type, 'variations', $variation_name );
 			_wp_array_set( $variations_data, $path, $variation_data );
@@ -320,7 +302,7 @@ function gutenberg_merge_block_style_variations_data( $variations_data, $theme_j
 function gutenberg_resolve_block_style_variations_from_theme_style_variation( $theme_json ) {
 	$theme_json_data   = $theme_json->get_data();
 	$shared_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
-	$variations_data   = gutenberg_resolve_and_register_block_style_variations( $shared_variations );
+	$variations_data   = gutenberg_resolve_block_style_variations( $shared_variations );
 
 	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json, 'user' );
 }
@@ -337,7 +319,7 @@ function gutenberg_resolve_block_style_variations_from_theme_style_variation( $t
  */
 function gutenberg_resolve_block_style_variations_from_theme_json_partials( $theme_json ) {
 	$block_style_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' );
-	$variations_data        = gutenberg_resolve_and_register_block_style_variations( $block_style_variations );
+	$variations_data        = gutenberg_resolve_block_style_variations( $block_style_variations );
 
 	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json );
 }
@@ -355,7 +337,7 @@ function gutenberg_resolve_block_style_variations_from_theme_json_partials( $the
 function gutenberg_resolve_block_style_variations_from_primary_theme_json( $theme_json ) {
 	$theme_json_data        = $theme_json->get_data();
 	$block_style_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
-	$variations_data        = gutenberg_resolve_and_register_block_style_variations( $block_style_variations );
+	$variations_data        = gutenberg_resolve_block_style_variations( $block_style_variations );
 
 	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json );
 }
@@ -401,6 +383,31 @@ function gutenberg_enqueue_block_style_variation_styles() {
 // Register the block support.
 WP_Block_Supports::get_instance()->register( 'block-style-variation', array() );
 
+// Remove core filters and action.
+if ( function_exists( 'wp_render_block_style_variation_support_styles' ) ) {
+	remove_filter( 'render_block_data', 'wp_render_block_style_variation_support_styles' );
+}
+if ( function_exists( 'wp_render_block_style_variation_class_name' ) ) {
+	remove_filter( 'render_block', 'wp_render_block_style_variation_class_name' );
+}
+if ( function_exists( 'wp_enqueue_block_style_variation_styles' ) ) {
+	remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles' );
+}
+
+if ( function_exists( 'wp_resolve_block_style_variations_from_primary_theme_json' ) ) {
+	remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_primary_theme_json' );
+}
+if ( function_exists( 'wp_resolve_block_style_variations_from_theme_json_partials' ) ) {
+	remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_theme_json_partials' );
+}
+if ( function_exists( 'wp_resolve_block_style_variations_from_styles_registry' ) ) {
+	remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_styles_registry' );
+}
+if ( function_exists( 'wp_resolve_block_style_variations_from_theme_style_variation' ) ) {
+	remove_filter( 'wp_theme_json_data_user', 'wp_resolve_block_style_variations_from_theme_style_variation' );
+}
+
+// Add Gutenberg filters and action.
 add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles', 10, 2 );
 add_filter( 'render_block', 'gutenberg_render_block_style_variation_class_name', 10, 2 );
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_style_variation_styles', 1 );
@@ -411,3 +418,101 @@ function gutenberg_enqueue_block_style_variation_styles() {
 add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_styles_registry', 10, 1 );
 
 add_filter( 'wp_theme_json_data_user', 'gutenberg_resolve_block_style_variations_from_theme_style_variation', 10, 1 );
+
+
+/**
+ * Registers any block style variations contained within the provided
+ * theme.json data.
+ *
+ * @access private
+ *
+ * @param array $variations Shared block style variations.
+ */
+function gutenberg_register_block_style_variations_from_theme_json_data( $variations ) {
+	if ( empty( $variations ) ) {
+		return;
+	}
+
+	$registry              = WP_Block_Styles_Registry::get_instance();
+	$have_named_variations = ! wp_is_numeric_array( $variations );
+
+	foreach ( $variations as $key => $variation ) {
+		$supported_blocks = $variation['blockTypes'] ?? array();
+
+		/*
+		 * Standalone theme.json partial files for block style variations
+		 * will have their styles under a top-level property by the same name.
+		 * Variations defined within an existing theme.json or theme style
+		 * variation will themselves already be the required styles data.
+		 */
+		$variation_data = $variation['styles'] ?? $variation;
+
+		if ( empty( $variation_data ) ) {
+			continue;
+		}
+
+		/*
+		 * Block style variations read in via standalone theme.json partials
+		 * need to have their name set to the kebab case version of their title.
+		 */
+		$variation_name  = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
+		$variation_label = $variation['title'] ?? $variation_name;
+
+		foreach ( $supported_blocks as $block_type ) {
+			$registered_styles = $registry->get_registered_styles_for_block( $block_type );
+
+			// Register block style variation if it hasn't already been registered.
+			if ( ! array_key_exists( $variation_name, $registered_styles ) ) {
+				register_block_style(
+					$block_type,
+					array(
+						'name'  => $variation_name,
+						'label' => $variation_label,
+					)
+				);
+			}
+		}
+	}
+}
+
+/**
+ * Register shared block style variations defined by the theme.
+ *
+ * These can come in three forms:
+ * - the theme's theme.json
+ * - the theme's partials (standalone files in `/styles` that only define block style variations)
+ * - the user's theme.json (for example, theme style variations the user selected)
+ *
+ * @access private
+ */
+function gutenberg_register_block_style_variations_from_theme() {
+	// Partials from `/styles`.
+	$variations_partials = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' );
+	gutenberg_register_block_style_variations_from_theme_json_data( $variations_partials );
+
+	/*
+	 * Pull the data from the specific origin instead of the merged data.
+	 * This is because, for 6.6, we only support registering block style variations
+	 * for the 'theme' and 'custom' origins but not for 'default' (core theme.json)
+	 * or 'custom' (theme.json in a block).
+	 *
+	 * When/If we add support for every origin, we should switch to using the public API
+	 * instead, e.g.: wp_get_global_styles( array( 'blocks', 'variations' ) ).
+	 */
+
+	// theme.json of the theme.
+	$theme_json_theme = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data();
+	$variations_theme = $theme_json_theme->get_data()['styles']['blocks']['variations'] ?? array();
+	gutenberg_register_block_style_variations_from_theme_json_data( $variations_theme );
+
+	// User data linked for this theme.
+	$theme_json_user = WP_Theme_JSON_Resolver_Gutenberg::get_user_data();
+	$variations_user = $theme_json_user->get_data()['styles']['blocks']['variations'] ?? array();
+	gutenberg_register_block_style_variations_from_theme_json_data( $variations_user );
+}
+
+// Remove core init action registering variations.
+if ( function_exists( 'wp_register_block_style_variations_from_theme' ) ) {
+	remove_action( 'init', 'wp_register_block_style_variations_from_theme' );
+}
+add_action( 'init', 'gutenberg_register_block_style_variations_from_theme' );

packages/block-editor/src/components/global-styles/background-panel.js

@@ -23,7 +23,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
 import { useCallback, Platform, useRef } from '@wordpress/element';
@@ -544,17 +544,26 @@ function BackgroundSizeToolsPanelItem( {
 				<ToggleGroupControlOption
 					key="cover"
 					value="cover"
-					label={ __( 'Cover' ) }
+					label={ _x(
+						'Cover',
+						'Size option for background image control'
+					) }
 				/>
 				<ToggleGroupControlOption
 					key="contain"
 					value="contain"
-					label={ __( 'Contain' ) }
+					label={ _x(
+						'Contain',
+						'Size option for background image control'
+					) }
 				/>
 				<ToggleGroupControlOption
 					key="tile"
 					value="auto"
-					label={ __( 'Tile' ) }
+					label={ _x(
+						'Tile',
+						'Size option for background image control'
+					) }
 				/>
 			</ToggleGroupControl>
 			<HStack justify="flex-start" spacing={ 2 } as="span">

packages/block-editor/src/components/link-control/link-preview.js

@@ -27,6 +27,20 @@ import { ViewerSlot } from './viewer-slot';
 
 import useRichUrlData from './use-rich-url-data';
 
+/**
+ * Filters the title for display. Removes the protocol and www prefix.
+ *
+ * @param {string} title The title to be filtered.
+ *
+ * @return {string} The filtered title.
+ */
+function filterTitleForDisplay( title ) {
+	// Derived from `filterURLForDisplay` in `@wordpress/url`.
+	return title
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
+}
+
 export default function LinkPreview( {
 	value,
 	onEditClick,
@@ -59,6 +73,9 @@ export default function LinkPreview( {
 		! isEmptyURL &&
 		stripHTML( richData?.title || value?.title || displayURL );
 
+	const isUrlRedundant =
+		! value?.url || filterTitleForDisplay( displayTitle ) === displayURL;
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -112,7 +129,7 @@ export default function LinkPreview( {
 										{ displayTitle }
 									</Truncate>
 								</ExternalLink>
-								{ value?.url && displayTitle !== displayURL && (
+								{ ! isUrlRedundant && (
 									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
 											{ displayURL }

packages/block-editor/src/components/writing-flow/use-clipboard-handler.js

@@ -6,6 +6,7 @@ import {
 	findTransform,
 	getBlockTransforms,
 	hasBlockSupport,
+	switchToBlockType,
 } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -208,15 +209,36 @@ export default function useClipboardHandler() {
 					firstSelectedClientId
 				);
 
-				if (
-					! blocks.every( ( block ) =>
-						canInsertBlockType( block.name, rootClientId )
-					)
-				) {
-					return;
+				const newBlocks = [];
+
+				for ( const block of blocks ) {
+					if ( canInsertBlockType( block.name, rootClientId ) ) {
+						newBlocks.push( block );
+					} else {
+						// If a block cannot be inserted in a root block, try
+						// converting it to that root block type and insert the
+						// inner blocks.
+						// Example: paragraphs cannot be inserted into a list,
+						// so convert the paragraphs to a list for list items.
+						const rootBlockName = getBlockName( rootClientId );
+						const switchedBlocks =
+							block.name !== rootBlockName
+								? switchToBlockType( block, rootBlockName )
+								: [ block ];
+
+						if ( ! switchedBlocks ) {
+							return;
+						}
+
+						for ( const switchedBlock of switchedBlocks ) {
+							for ( const innerBlock of switchedBlock.innerBlocks ) {
+								newBlocks.push( innerBlock );
+							}
+						}
+					}
 				}
 
-				__unstableSplitSelection( blocks );
+				__unstableSplitSelection( newBlocks );
 				event.preventDefault();
 			}
 		}

packages/block-editor/src/hooks/block-style-variation.js

@@ -43,7 +43,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
-function useBlockSyleVariation( name, variation, clientId ) {
+function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
 	// editor settings and available in the post editor.
@@ -96,7 +96,7 @@ function useBlockProps( { name, className, clientId } ) {
 	const variation = getVariationNameFromClass( className, registeredStyles );
 	const variationClass = `is-style-${ variation }-${ clientId }`;
 
-	const { settings, styles } = useBlockSyleVariation(
+	const { settings, styles } = useBlockStyleVariation(
 		name,
 		variation,
 		clientId