@wordpress/block-editor 13.0.1 → 13.1.0

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.native.js

@@ -18,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const [ rawBlockTypes, , collections ] = useBlockTypesState(
 		rootClientId,
-		onSelect
+		onSelect,
+		true
 	);
 	const clipboardBlock = useClipboardBlock( rootClientId );
 	const filteredBlockTypes = filterInserterItems( rawBlockTypes );

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

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/provider/use-block-sync.js

@@ -9,7 +9,6 @@ import { cloneBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -274,10 +273,6 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
-				const undoIgnore = undoIgnoreBlocks.has( blocks );
-				if ( undoIgnore ) {
-					undoIgnoreBlocks.delete( blocks );
-				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
@@ -285,7 +280,6 @@ export default function useBlockSync( {
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
-					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

package/src/components/rich-text/index.native.js

@@ -80,6 +80,7 @@ export function RichTextWrapper(
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		// Native props.
+		__unstableUseSplitSelection,
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
 		placeholderTextColor,
@@ -178,6 +179,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		__unstableSplitSelection,
 		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
@@ -345,6 +347,8 @@ export function RichTextWrapper(
 				}
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( __unstableUseSplitSelection ) {
+				__unstableSplitSelection();
 			} else if ( canSplitAtEnd ) {
 				onSplitAtEnd();
 			} else if (

package/src/components/rich-text/native/index.native.js

@@ -424,7 +424,9 @@ export class RichText extends Component {
 			return;
 		}
 
-		onDelete( { isReverse, value } );
+		if ( onDelete ) {
+			onDelete( { isReverse, value } );
+		}
 
 		event.preventDefault();
 		this.lastAztecEventType = 'input';

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

@@ -44,15 +44,8 @@ export default function useSpacingSizes() {
 			...defaultSizes,
 		];
 
-		// Only sort if more than one origin has presets defined in order to
-		// preserve order for themes that don't include default presets and
-		// want a custom order.
-		if (
-			( customSizes.length && 1 ) +
-				( themeSizes.length && 1 ) +
-				( defaultSizes.length && 1 ) >
-			1
-		) {
+		// 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 ) );
 		}
 

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

@@ -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

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/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.

package/src/store/private-actions.js

@@ -6,7 +6,6 @@ import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { undoIgnoreBlocks } from './undo-ignore';
 import { store as blockEditorStore } from './index';
 import { unlock } from '../lock-unlock';
 
@@ -105,11 +104,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;
@@ -292,34 +287,6 @@ export function deleteStyleOverride( id ) {
 	};
 }
 
-/**
- * A higher-order action that mark every change inside a callback as "non-persistent"
- * and ignore pushing to the undo history stack. It's primarily used for synchronized
- * derived updates from the block editor without affecting the undo history.
- *
- * @param {() => void} callback The synchronous callback to derive updates.
- */
-export function syncDerivedUpdates( callback ) {
-	return ( { dispatch, select, registry } ) => {
-		registry.batch( () => {
-			// Mark every change in the `callback` as non-persistent.
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: false,
-			} );
-			callback();
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: undefined,
-			} );
-
-			// Ignore pushing undo stack for the updated blocks.
-			const updatedBlocks = select.getBlocks();
-			undoIgnoreBlocks.add( updatedBlocks );
-		} );
-	};
-}
-
 /**
  * Action that sets the element that had focus when focus leaves the editor canvas.
  *

package/src/store/selectors.js

@@ -1712,13 +1712,12 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
 /**
  * Determines if the given block is allowed to be deleted.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientId     The block client Id.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block client Id.
  *
  * @return {boolean} Whether the given block is allowed to be removed.
  */
-export function canRemoveBlock( state, clientId, rootClientId = null ) {
+export function canRemoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1726,6 +1725,8 @@ export function canRemoveBlock( state, clientId, rootClientId = null ) {
 	if ( attributes.lock?.remove !== undefined ) {
 		return ! attributes.lock.remove;
 	}
+
+	const rootClientId = getBlockRootClientId( state, clientId );
 	if ( getTemplateLock( state, rootClientId ) ) {
 		return false;
 	}
@@ -1736,28 +1737,24 @@ export function canRemoveBlock( state, clientId, rootClientId = null ) {
 /**
  * Determines if the given blocks are allowed to be removed.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be removed.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state     Editor state.
+ * @param {string} clientIds The block client IDs to be removed.
  *
  * @return {boolean} Whether the given blocks are allowed to be removed.
  */
-export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
-	return clientIds.every( ( clientId ) =>
-		canRemoveBlock( state, clientId, rootClientId )
-	);
+export function canRemoveBlocks( state, clientIds ) {
+	return clientIds.every( ( clientId ) => canRemoveBlock( state, clientId ) );
 }
 
 /**
  * Determines if the given block is allowed to be moved.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientId     The block client Id.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block client Id.
  *
  * @return {boolean | undefined} Whether the given block is allowed to be moved.
  */
-export function canMoveBlock( state, clientId, rootClientId = null ) {
+export function canMoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1765,6 +1762,8 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 	if ( attributes.lock?.move !== undefined ) {
 		return ! attributes.lock.move;
 	}
+
+	const rootClientId = getBlockRootClientId( state, clientId );
 	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
 		return false;
 	}
@@ -1774,16 +1773,13 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 /**
  * Determines if the given blocks are allowed to be moved.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be moved.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state     Editor state.
+ * @param {string} clientIds The block client IDs to be moved.
  *
  * @return {boolean} Whether the given blocks are allowed to be moved.
  */
-export function canMoveBlocks( state, clientIds, rootClientId = null ) {
-	return clientIds.every( ( clientId ) =>
-		canMoveBlock( state, clientId, rootClientId )
-	);
+export function canMoveBlocks( state, clientIds ) {
+	return clientIds.every( ( clientId ) => canMoveBlock( state, clientId ) );
 }
 
 /**
@@ -3041,10 +3037,7 @@ export const isGroupable = createRegistrySelector(
 				rootClientId
 			);
 			const _isGroupable = groupingBlockAvailable && _clientIds.length;
-			return (
-				_isGroupable &&
-				canRemoveBlocks( state, _clientIds, rootClientId )
-			);
+			return _isGroupable && canRemoveBlocks( state, _clientIds );
 		}
 );
 

package/src/style.scss

@@ -1,6 +1,5 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
-@import "./components/block-bindings-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";