@wordpress/block-editor 13.0.0 → 13.0.2

package/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">

package/src/components/global-styles/hooks.js

@@ -89,10 +89,7 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
+		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
 	];
 };
 
@@ -299,6 +296,7 @@ export function useSettingsForBlockElement(
 			'fontStyle',
 			'fontWeight',
 			'letterSpacing',
+			'textAlign',
 			'textTransform',
 			'textDecoration',
 			'writingMode',

package/src/components/global-styles/use-global-styles-output.js

@@ -651,7 +651,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					( [ variationName, variation ] ) => {
 						variations[ variationName ] =
 							pickStyleKeys( variation );
-
+						if ( variation?.css ) {
+							variations[ variationName ].css = variation.css;
+						}
 						const variationSelector =
 							blockSelectors[ blockName ]
 								.styleVariationSelectors?.[ variationName ];
@@ -697,6 +699,14 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 											.featureSelectors
 									);
 
+								const variationBlockStyleNodes =
+									pickStyleKeys( variationBlockStyles );
+
+								if ( variationBlockStyles?.css ) {
+									variationBlockStyleNodes.css =
+										variationBlockStyles.css;
+								}
+
 								nodes.push( {
 									selector: variationBlockSelector,
 									duotoneSelector: variationDuotoneSelector,
@@ -707,9 +717,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
 											.hasLayoutSupport,
-									styles: pickStyleKeys(
-										variationBlockStyles
-									),
+									styles: variationBlockStyleNodes,
 								} );
 
 								// Process element styles for the inner blocks
@@ -995,6 +1003,12 @@ export const toStyles = (
 						';'
 					) };}`;
 				}
+				if ( styles?.css ) {
+					ruleset += processCSSNesting(
+						styles.css,
+						`:root :where(${ selector })`
+					);
+				}
 
 				if ( styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
@@ -1041,6 +1055,12 @@ export const toStyles = (
 										';'
 									) };}`;
 								}
+								if ( styleVariations?.css ) {
+									ruleset += processCSSNesting(
+										styleVariations.css,
+										`:root :where(${ styleVariationSelector })`
+									);
+								}
 							}
 						}
 					);

package/src/components/inserter/block-types-tab.js

@@ -207,7 +207,6 @@ export function BlockTypesTab(
 							showMostUsedBlocks={ showMostUsedBlocks }
 							className="block-editor-inserter__insertable-blocks-at-selection"
 						/>
-						<hr />
 					</>
 				) }
 				<BlockTypesTabPanel

package/src/components/inserter/hooks/use-block-types-state.js

@@ -8,7 +8,7 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,13 +25,18 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
+	const options = useMemo(
+		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		[ isQuick ]
+	);
 	const [ items ] = useSelect(
 		( select ) => [
-			select( blockEditorStore ).getInserterItems( rootClientId, {
-				[ withRootClientIdOptionKey ]: ! isQuick,
-			} ),
+			select( blockEditorStore ).getInserterItems(
+				rootClientId,
+				options
+			),
 		],
-		[ rootClientId, isQuick ]
+		[ rootClientId, options ]
 	);
 
 	const [ categories, collections ] = useSelect( ( select ) => {

package/src/components/inserter/style.scss

@@ -253,6 +253,10 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__insertable-blocks-at-selection {
+	border-bottom: $border-width solid $gray-200;
+}
+
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	padding: $grid-unit-20;

package/src/components/link-control/link-preview.js

@@ -149,6 +149,7 @@ export default function LinkPreview( {
 						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
+					__experimentalIsFocusable
 					disabled={ isEmptyURL }
 					size="compact"
 				/>

package/src/components/link-control/search-input.js

@@ -125,7 +125,7 @@ const LinkControlSearchInput = forwardRef(
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					placeholder={ placeholder ?? __( 'Search or type URL' ) }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

package/src/components/list-view/block.js

@@ -181,6 +181,12 @@ function ListViewBlock( {
 			return;
 		}
 
+		// Do not handle events if it comes from modals;
+		// retain the default behavior for these keys.
+		if ( event.target.closest( '[role=dialog]' ) ) {
+			return;
+		}
+
 		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
 
 		// If multiple blocks are selected, deselect all blocks when the user
@@ -196,12 +202,6 @@ function ListViewBlock( {
 			isDeleteKey ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
-			// Do not handle single-key block deletion shortcuts when events come from modals;
-			// retain the default behavior for these keys.
-			if ( isDeleteKey && event.target.closest( '[role=dialog]' ) ) {
-				return;
-			}
-
 			const {
 				blocksToUpdate: blocksToDelete,
 				firstBlockClientId,
@@ -210,7 +210,7 @@ function ListViewBlock( {
 			} = getBlocksToUpdate();
 
 			// Don't update the selection if the blocks cannot be deleted.
-			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
+			if ( ! canRemoveBlocks( blocksToDelete ) ) {
 				return;
 			}
 

package/src/components/list-view/branch.js

@@ -194,10 +194,14 @@ function ListViewBranch( props ) {
 				// This prevents the entire tree from being rendered when a branch is
 				// selected, or a user selects all blocks, while still enabling scroll
 				// into view behavior when selecting a block or opening the list view.
+				// The first and last blocks of the list are always rendered, to ensure
+				// that Home and End keys work as expected.
 				const showBlock =
 					isDragged ||
 					blockInView ||
-					( isSelected && clientId === selectedClientIds[ 0 ] );
+					( isSelected && clientId === selectedClientIds[ 0 ] ) ||
+					index === 0 ||
+					index === blockCount - 1;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

package/src/components/list-view/use-clipboard-handler.js

@@ -112,12 +112,7 @@ export default function useClipboardHandler( { selectBlock } ) {
 
 			if ( event.type === 'cut' ) {
 				// Don't update the selection if the blocks cannot be deleted.
-				if (
-					! canRemoveBlocks(
-						selectedBlockClientIds,
-						firstBlockRootClientId
-					)
-				) {
+				if ( ! canRemoveBlocks( selectedBlockClientIds ) ) {
 					return;
 				}
 

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -42,7 +42,12 @@ export default function useSpacingSizes() {
 			...customSizes,
 			...themeSizes,
 			...defaultSizes,
-		].sort( ( a, b ) => compare( a.slug, b.slug ) );
+		];
+
+		// Using numeric slugs opts-in to sorting by slug.
+		if ( sizes.every( ( { slug } ) => /^[0-9]/.test( slug ) ) ) {
+			sizes.sort( ( a, b ) => compare( a.slug, b.slug ) );
+		}
 
 		return sizes.length > RANGE_CONTROL_MAX_SIZE
 			? [
@@ -53,8 +58,6 @@ export default function useSpacingSizes() {
 					},
 					...sizes,
 			  ]
-			: // See https://github.com/WordPress/gutenberg/pull/44247 for reasoning
-			  // to use the index as the name in the range control.
-			  sizes.map( ( { slug, size }, i ) => ( { name: i, slug, size } ) );
+			: sizes;
 	}, [ customSizes, themeSizes, defaultSizes ] );
 }

package/src/components/use-block-commands/index.js

@@ -65,7 +65,7 @@ export const useTransformCommands = () => {
 				selectedBlocks,
 				rootClientId
 			),
-			canRemove: canRemoveBlocks( selectedBlockClientIds, rootClientId ),
+			canRemove: canRemoveBlocks( selectedBlockClientIds ),
 			invalidSelection: false,
 		};
 	}, [] );
@@ -150,8 +150,7 @@ const useActionsCommands = () => {
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 
 	const canMove =
-		canMoveBlocks( clientIds, rootClientId ) &&
-		getBlockCount( rootClientId ) !== 1;
+		canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
 
 	const commands = [];
 
@@ -260,7 +259,7 @@ const useQuickActionsCommands = () => {
 			canInsertBlockType( block.name, rootClientId )
 		);
 	} );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const canRemove = canRemoveBlocks( clientIds );
 
 	const commands = [];
 

package/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();
 			}
 		}

package/src/hooks/block-bindings.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import {
+	BaseControl,
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalItemGroup as ItemGroup,
@@ -54,30 +55,35 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 	return (
 		<InspectorControls>
 			<PanelBody
-				title={ __( 'Bindings' ) }
+				title={ __( 'Attributes' ) }
 				className="components-panel__block-bindings-panel"
 			>
-				<ItemGroup isBordered isSeparated size="large">
-					{ Object.keys( filteredBindings ).map( ( key ) => {
-						return (
-							<Item key={ key }>
-								<HStack>
-									<span>{ key }</span>
-									<span className="components-item__block-bindings-source">
-										{ sources[
-											filteredBindings[ key ].source
-										]
-											? sources[
-													filteredBindings[ key ]
-														.source
-											  ].label
-											: filteredBindings[ key ].source }
-									</span>
-								</HStack>
-							</Item>
-						);
-					} ) }
-				</ItemGroup>
+				<BaseControl
+					help={ __( 'Attributes connected to various sources.' ) }
+				>
+					<ItemGroup isBordered isSeparated size="large">
+						{ Object.keys( filteredBindings ).map( ( key ) => {
+							return (
+								<Item key={ key }>
+									<HStack>
+										<span>{ key }</span>
+										<span className="components-item__block-bindings-source">
+											{ sources[
+												filteredBindings[ key ].source
+											]
+												? sources[
+														filteredBindings[ key ]
+															.source
+												  ].label
+												: filteredBindings[ key ]
+														.source }
+										</span>
+									</HStack>
+								</Item>
+							);
+						} ) }
+					</ItemGroup>
+				</BaseControl>
 			</PanelBody>
 		</InspectorControls>
 	);

package/src/hooks/block-style-variation.js

@@ -17,6 +17,23 @@ import { useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 
+const VARIATION_PREFIX = 'is-style-';
+
+function getVariationMatches( className ) {
+	if ( ! className ) {
+		return [];
+	}
+	return className.split( /\s+/ ).reduce( ( matches, name ) => {
+		if ( name.startsWith( VARIATION_PREFIX ) ) {
+			const match = name.slice( VARIATION_PREFIX.length );
+			if ( match !== 'default' ) {
+				matches.push( match );
+			}
+		}
+		return matches;
+	}, [] );
+}
+
 /**
  * Get the first block style variation that has been registered from the class string.
  *
@@ -28,14 +45,13 @@ import { globalStylesDataKey } from '../store/private-keys';
 function getVariationNameFromClass( className, registeredStyles = [] ) {
 	// The global flag affects how capturing groups work in JS. So the regex
 	// below will only return full CSS classes not just the variation name.
-	const matches = className?.match( /\bis-style-(?!default)(\S+)\b/g );
+	const matches = getVariationMatches( className );
 
 	if ( ! matches ) {
 		return null;
 	}
 
-	for ( const variationClass of matches ) {
-		const variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.
+	for ( const variation of matches ) {
 		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
 			return variation;
 		}
@@ -94,7 +110,7 @@ function useBlockProps( { name, className, clientId } ) {
 
 	const registeredStyles = getBlockStyles( name );
 	const variation = getVariationNameFromClass( className, registeredStyles );
-	const variationClass = `is-style-${ variation }-${ clientId }`;
+	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
 
 	const { settings, styles } = useBlockSyleVariation(
 		name,
@@ -152,5 +168,6 @@ function useBlockProps( { name, className, clientId } ) {
 export default {
 	hasSupport: () => true,
 	attributeKeys: [ 'className' ],
+	isMatch: ( { className } ) => getVariationMatches( className ).length > 0,
 	useBlockProps,
 };

package/src/hooks/use-bindings-attributes.js

@@ -97,6 +97,9 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
 		const { name, clientId, context } = props;
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
 		const bindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
@@ -213,7 +216,13 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 						}
 					}
 
-					if ( Object.keys( keptAttributes ).length ) {
+					// Only apply normal attribute updates to blocks
+					// that have partial bindings. Currently this is
+					// only skipped for pattern overrides sources.
+					if (
+						! hasPatternOverridesDefaultBinding &&
+						Object.keys( keptAttributes ).length
+					) {
 						setAttributes( keptAttributes );
 					}
 				} );
@@ -226,6 +235,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				context,
 				setAttributes,
 				sources,
+				hasPatternOverridesDefaultBinding,
 			]
 		);
 

package/src/hooks/utils.js

@@ -582,6 +582,7 @@ export function createBlockListBlockFilter( features ) {
 						hasSupport,
 						attributeKeys = [],
 						useBlockProps,
+						isMatch,
 					} = feature;
 
 					const neededProps = {};
@@ -595,7 +596,8 @@ export function createBlockListBlockFilter( features ) {
 						// Skip rendering if none of the needed attributes are
 						// set.
 						! Object.keys( neededProps ).length ||
-						! hasSupport( props.name )
+						! hasSupport( props.name ) ||
+						( isMatch && ! isMatch( neededProps ) )
 					) {
 						return null;
 					}

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);

package/src/private-apis.js

@@ -43,6 +43,7 @@ import { PrivateBlockPopover } from './components/block-popover';
 import { PrivateInserterLibrary } from './components/inserter/library';
 import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
+import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -86,4 +87,5 @@ lock( privateApis, {
 	PrivateBlockPopover,
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
+	useBlockDisplayTitle,
 } );

package/src/store/actions.js

@@ -409,7 +409,7 @@ const createOnMove =
 	( clientIds, rootClientId ) =>
 	( { select, dispatch } ) => {
 		// If one of the blocks is locked or the parent is locked, we cannot move any block.
-		const canMoveBlocks = select.canMoveBlocks( clientIds, rootClientId );
+		const canMoveBlocks = select.canMoveBlocks( clientIds );
 		if ( ! canMoveBlocks ) {
 			return;
 		}
@@ -431,10 +431,7 @@ export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
 export const moveBlocksToPosition =
 	( clientIds, fromRootClientId = '', toRootClientId = '', index ) =>
 	( { select, dispatch } ) => {
-		const canMoveBlocks = select.canMoveBlocks(
-			clientIds,
-			fromRootClientId
-		);
+		const canMoveBlocks = select.canMoveBlocks( clientIds );
 
 		// If one of the blocks is locked or the parent is locked, we cannot move any block.
 		if ( ! canMoveBlocks ) {
@@ -443,10 +440,7 @@ export const moveBlocksToPosition =
 
 		// If moving inside the same root block the move is always possible.
 		if ( fromRootClientId !== toRootClientId ) {
-			const canRemoveBlocks = select.canRemoveBlocks(
-				clientIds,
-				fromRootClientId
-			);
+			const canRemoveBlocks = select.canRemoveBlocks( clientIds );
 
 			// If we're moving to another block, it means we're deleting blocks from
 			// the original block, so we need to check if removing is possible.
@@ -988,7 +982,7 @@ export const __unstableSplitSelection =
 			},
 		};
 
-		const tail = {
+		let tail = {
 			...blockB,
 			// Only preserve the original client ID if the end is different.
 			clientId:
@@ -1001,6 +995,26 @@ export const __unstableSplitSelection =
 			},
 		};
 
+		// When splitting a block, attempt to convert the tail block to the
+		// default block type. For example, when splitting a heading block, the
+		// tail block will be converted to a paragraph block. Note that for
+		// blocks such as a list item and button, this will be skipped because
+		// the default block type cannot be inserted.
+		const defaultBlockName = getDefaultBlockName();
+		if (
+			// A block is only split when the selection is within the same
+			// block.
+			blockA.clientId === blockB.clientId &&
+			defaultBlockName &&
+			tail.name !== defaultBlockName &&
+			select.canInsertBlockType( defaultBlockName, anchorRootClientId )
+		) {
+			const switched = switchToBlockType( tail, defaultBlockName );
+			if ( switched?.length === 1 ) {
+				tail = switched[ 0 ];
+			}
+		}
+
 		if ( ! blocks.length ) {
 			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
 				head,
@@ -2010,7 +2024,7 @@ export function __unstableSetTemporarilyEditingAsBlocks(
  * 	 		per_page: 'page_size',
  * 	 		search: 'q',
  * 	 	};
- * 	 	const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+ * 	 	const url = new URL( 'https://api.openverse.org/v1/images/' );
  * 	 	Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
  * 	 		const queryKey = mapFromInserterMediaRequest[ key ] || key;
  * 	 		url.searchParams.set( queryKey, value );

package/src/store/private-actions.js

@@ -105,11 +105,7 @@ export const privateRemoveBlocks =
 		}
 
 		clientIds = castArray( clientIds );
-		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
-		const canRemoveBlocks = select.canRemoveBlocks(
-			clientIds,
-			rootClientId
-		);
+		const canRemoveBlocks = select.canRemoveBlocks( clientIds );
 
 		if ( ! canRemoveBlocks ) {
 			return;