@wordpress/block-editor 12.21.0 → 12.22.0

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -47,10 +47,16 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	);
 }
 
-function PatternList( { searchValue, selectedCategory, patternCategories } ) {
+function PatternList( {
+	searchValue,
+	selectedCategory,
+	patternCategories,
+	rootClientId,
+} ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		rootClientId,
 		shouldFocusBlock: true,
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(

package/src/components/inserter/menu.js

@@ -66,13 +66,10 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { isZoomOutMode, showPatterns } = useSelect(
+	const { showPatterns } = useSelect(
 		( select ) => {
-			const { hasAllowedPatterns, __unstableGetEditorMode } = unlock(
-				select( blockEditorStore )
-			);
+			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
 			return {
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 			};
 		},
@@ -80,8 +77,7 @@ function InserterMenu(
 	);
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = mediaCategories.length > 0 && ! isZoomOutMode;
-	const showBlocks = ! isZoomOutMode;
+	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -253,21 +249,19 @@ function InserterMenu(
 								__experimentalInsertionIndex
 							}
 							showBlockDirectory
-							showBlocks={ showBlocks }
 							shouldFocusBlock={ shouldFocusBlock }
 						/>
 					</div>
 				) }
 				{ showAsTabs && (
 					<InserterTabs
-						showBlocks={ showBlocks }
 						showPatterns={ showPatterns }
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
 						tabsContents={ inserterTabsContents }
 					/>
 				) }
-				{ ! delayedFilterValue && ! showAsTabs && showBlocks && (
+				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>

package/src/components/inserter/mobile-tab-navigation.js

@@ -32,7 +32,7 @@ function ScreenHeader( { title } ) {
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Spacer>
 							<Heading level={ 5 }>{ title }</Heading>

package/src/components/inserter/search-results.js

@@ -50,7 +50,6 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	showBlocks = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -168,7 +167,7 @@ function InserterSearchResults( {
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
-	const blocksUI = showBlocks && !! filteredBlockTypes.length && (
+	const blocksUI = !! filteredBlockTypes.length && (
 		<InserterPanel
 			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
 		>

package/src/components/inserter/tabs.js

@@ -29,14 +29,13 @@ const mediaTab = {
 };
 
 function InserterTabs( {
-	showBlocks = true,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
 	tabsContents,
 } ) {
 	const tabs = [
-		showBlocks && blocksTab,
+		blocksTab,
 		showPatterns && patternsTab,
 		showMedia && mediaTab,
 	].filter( Boolean );

package/src/components/inspector-controls-tabs/advanced-controls-panel.native.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import groups from '../inspector-controls/groups';
+
+export default function AdvancedControls( props ) {
+	const Slot = groups.advanced?.Slot;
+	if ( ! Slot ) {
+		return null;
+	}
+
+	return (
+		<Slot { ...props }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+
+				return (
+					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
+				);
+			} }
+		</Slot>
+	);
+}

package/src/components/link-control/style.scss

@@ -93,11 +93,6 @@ $block-editor-link-control-number-of-actions: 1;
 	position: absolute;
 	right: 19px; // specific to place the button properly.
 	top: 3px;
-
-	svg {
-		position: relative;
-		top: -2px; // the icon itself is not centered within the bounds; this centers it.
-	}
 }
 
 .block-editor-link-control__search-actions {

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

@@ -14,12 +14,7 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import {
-	Icon,
-	connection,
-	lockSmall as lock,
-	pinSmall,
-} from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -37,12 +32,11 @@ import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
 import { useListViewContext } from './context';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId, name: blockName },
+		block: { clientId },
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -53,7 +47,6 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
-		ariaLabel,
 		ariaDescribedBy,
 		updateFocusAndSelection,
 	},
@@ -72,7 +65,6 @@ function ListViewBlockSelectButton(
 		getBlockRootClientId,
 		getBlockOrder,
 		getBlocksByClientId,
-		getBlockAttributes,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
 	const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -82,8 +74,6 @@ function ListViewBlockSelectButton(
 	const images = useListViewImages( { clientId, isExpanded } );
 	const { rootClientId } = useListViewContext();
 
-	const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
-
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
 				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
@@ -258,7 +248,6 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-label={ ariaLabel }
 				aria-describedby={ ariaDescribedBy }
 				aria-expanded={ isExpanded }
 			>
@@ -287,11 +276,6 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
-					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor-list-view-block-select-button__bindings">
-							<Icon icon={ connection } />
-						</span>
-					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

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

@@ -21,7 +21,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -35,7 +35,11 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription, focusListItem } from './utils';
+import {
+	getBlockPositionDescription,
+	getBlockPropertiesDescription,
+	focusListItem,
+} from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -77,8 +81,6 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle =
-		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
 	const { block, blockName, blockEditingMode } = useSelect(
 		( select ) => {
@@ -93,6 +95,7 @@ function ListViewBlock( {
 		},
 		[ clientId ]
 	);
+
 	const allowRightClickOverrides = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().allowRightClickOverrides,
@@ -107,7 +110,7 @@ function ListViewBlock( {
 		// Don't show the settings menu if block is disabled or content only.
 		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
+	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
 	const {
 		expand,
@@ -247,19 +250,8 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockAriaLabel = isLocked
-		? sprintf(
-				// translators: %s: The title of the block. This string indicates a link to select the locked block.
-				__( '%s (locked)' ),
-				blockTitle
-		  )
-		: blockTitle;
-
-	const settingsAriaLabel = sprintf(
-		// translators: %s: The title of the block.
-		__( 'Options for %s' ),
-		blockTitle
-	);
+	const blockPropertiesDescription =
+		getBlockPropertiesDescription( isLocked );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -352,12 +344,11 @@ function ListViewBlock( {
 							onFocus={ onFocus }
 							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
 							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ blockPositionDescription }
+							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
 						</AriaReferencedText>
 					</div>
 				) }
@@ -405,7 +396,7 @@ function ListViewBlock( {
 							clientIds={ dropdownClientIds }
 							block={ block }
 							icon={ moreVertical }
-							label={ settingsAriaLabel }
+							label={ __( 'Actions' ) }
 							popoverProps={ {
 								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
 							} }

package/src/components/list-view/style.scss

@@ -7,7 +7,7 @@
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
-		width: calc(100% + #{ $grid-unit-15 });
+		width: calc(100% + #{$grid-unit-15});
 	}
 
 	// Without setting `pointer-events: none`, when dragging over list view items,
@@ -71,7 +71,8 @@
 		&:focus::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -82,14 +83,16 @@
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
@@ -181,7 +184,9 @@
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform:
+			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			-1));
 		@include reduce-motion("transition");
 	}
 
@@ -217,7 +222,10 @@
 			content: "";
 			position: absolute;
 			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			transition:
+				border-color 0.1s linear,
+				border-style 0.1s linear,
+				box-shadow 0.1s linear;
 			top: -2px;
 			right: 0;
 			left: 0;
@@ -242,7 +250,9 @@
 			bottom: 0;
 			left: 0;
 			border-radius: inherit;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -255,7 +265,9 @@
 
 	&.is-nesting .block-editor-list-view__menu,
 	.block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		z-index: 1;
 	}
 
@@ -458,7 +470,9 @@ $block-navigation-max-indent: 8;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+	margin-left:
+		($icon-size) * $block-navigation-max-indent + 4 *
+		($block-navigation-max-indent - 1);
 }
 
 .block-editor-list-view-leaf:not([aria-level="1"]) {
@@ -471,12 +485,12 @@ $block-navigation-max-indent: 8;
 // indentation in `use-list-view-drop-zone.js` must be updated as well
 // to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
-	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
+	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
+			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+		} @else {
+			margin-left: ($icon-size * $i);
 		}
 	}
 }
@@ -486,7 +500,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -494,7 +510,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;
@@ -557,11 +575,3 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
-
-.block-editor-list-view-block-select-button__bindings svg g {
-	stroke: var(--wp-bound-block-color);
-	fill: transparent;
-	stroke-width: 1.5;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-}

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

@@ -7,12 +7,15 @@ import { focus } from '@wordpress/dom';
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
 		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
-		__( 'Block %1$d of %2$d, Level %3$d' ),
+		__( 'Block %1$d of %2$d, Level %3$d.' ),
 		position,
 		siblingCount,
 		level
 	);
 
+export const getBlockPropertiesDescription = ( isLocked ) =>
+	isLocked ? __( 'This block is locked.' ) : '';
+
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,
  * or false otherwise.

package/src/components/rich-text/README.md

@@ -12,6 +12,10 @@ _Required._ HTML string to make editable. The HTML should be valid, and valid in
 
 _Required._ Called when the value changes.
 
+### `identifier: String`
+
+_Optional._ If the editable field is bound to a block attribute (through the `value` and `onChange` props) then this prop should specify the attribute name. The field will use this value to set the block editor selection correctly, specifying in which attribute and at what offset does the selection start or end.
+
 ### `tagName: String`
 
 _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element.
@@ -50,6 +54,7 @@ _Optional._ By default, all registered formats are allowed. This setting can be
 ```js
 <RichText
 	tagName="h2"
+	identifier="content"
 	value={ attributes.content }
 	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
 	onChange={ ( content ) => setAttributes( { content } ) }
@@ -99,6 +104,7 @@ registerBlockType( /* ... */, {
 			<RichText
 				tagName="h2"
 				className={ className }
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 			/>

package/src/components/spacing-sizes-control/sides-dropdown/index.js

@@ -30,7 +30,7 @@ export default function SidesDropdown( {
 			icon={ sideIcon }
 			label={ labelProp }
 			className="spacing-sizes-control__dropdown"
-			toggleProps={ { isSmall: true } }
+			toggleProps={ { size: 'small' } }
 		>
 			{ ( { onClose } ) => {
 				return (

package/src/components/use-moving-animation/index.js

@@ -142,6 +142,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 
 		return () => {
 			controller.stop();
+			controller.set( { x: 0, y: 0 } );
 		};
 	}, [
 		previous,

package/src/components/warning/index.native.js

@@ -16,33 +16,36 @@ import { normalizeIconObject } from '@wordpress/blocks';
 import styles from './style.scss';
 
 function Warning( {
+	actions,
 	title,
 	message,
 	icon,
 	iconClass,
 	preferredColorScheme,
 	getStylesFromColorScheme,
+	containerStyle: extraContainerStyle,
+	titleStyle: extraTitleStyle,
+	messageStyle: extraMessageStyle,
 	...viewProps
 } ) {
 	icon = icon && normalizeIconObject( icon );
 	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const messageStyle = getStylesFromColorScheme(
-		styles.message,
-		styles.messageDark
-	);
+
+	const containerStyle = [
+		getStylesFromColorScheme( styles.container, styles.containerDark ),
+		extraContainerStyle,
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		extraTitleStyle,
+	];
+	const messageStyle = [
+		getStylesFromColorScheme( styles.message, styles.messageDark ),
+		extraMessageStyle,
+	];
 
 	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
-			{ ...viewProps }
-		>
+		<View style={ containerStyle } { ...viewProps }>
 			{ icon && (
 				<View style={ styles.icon }>
 					<Icon
@@ -53,6 +56,7 @@ function Warning( {
 			) }
 			{ title && <Text style={ titleStyle }>{ title }</Text> }
 			{ message && <Text style={ messageStyle }>{ message }</Text> }
+			{ actions }
 		</View>
 	);
 }