@wordpress/block-editor 12.21.0 → 12.22.0

package/build-style/style-rtl.css

@@ -126,15 +126,15 @@
 .block-editor-block-bindings-toolbar-indicator {
   display: inline-flex;
   align-items: center;
-  height: 48px;
+  justify-content: center;
   padding: 6px;
 }
-.block-editor-block-bindings-toolbar-indicator svg g {
-  stroke: var(--wp-bound-block-color);
-  fill: transparent;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.block-editor-block-bindings-toolbar-indicator svg {
+  fill: var(--wp-bound-block-color);
+}
+
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator {
+  height: 32px;
 }
 
 iframe[name=editor-canvas] {
@@ -1934,10 +1934,6 @@ iframe[name=editor-canvas].has-editor-padding {
   left: 19px;
   top: 3px;
 }
-.block-editor-link-control__search-enter svg {
-  position: relative;
-  top: -2px;
-}
 
 .block-editor-link-control__search-actions {
   padding: 8px 16px 16px;
@@ -2361,7 +2357,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-list-view-leaf.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));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -2708,14 +2704,6 @@ iframe[name=editor-canvas].has-editor-padding {
   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;
-}
-
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }

package/build-style/style.css

@@ -126,15 +126,15 @@
 .block-editor-block-bindings-toolbar-indicator {
   display: inline-flex;
   align-items: center;
-  height: 48px;
+  justify-content: center;
   padding: 6px;
 }
-.block-editor-block-bindings-toolbar-indicator svg g {
-  stroke: var(--wp-bound-block-color);
-  fill: transparent;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.block-editor-block-bindings-toolbar-indicator svg {
+  fill: var(--wp-bound-block-color);
+}
+
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator {
+  height: 32px;
 }
 
 iframe[name=editor-canvas] {
@@ -1935,10 +1935,6 @@ iframe[name=editor-canvas].has-editor-padding {
   right: 19px;
   top: 3px;
 }
-.block-editor-link-control__search-enter svg {
-  position: relative;
-  top: -2px;
-}
 
 .block-editor-link-control__search-actions {
   padding: 8px 16px 16px;
@@ -2362,7 +2358,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-list-view-leaf.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));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -2709,14 +2705,6 @@ iframe[name=editor-canvas].has-editor-padding {
   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;
-}
-
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.21.0",
+	"version": "12.22.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.53.0",
-		"@wordpress/api-fetch": "^6.50.0",
-		"@wordpress/blob": "^3.53.0",
-		"@wordpress/blocks": "^12.30.0",
-		"@wordpress/commands": "^0.24.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/compose": "^6.30.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/date": "^4.53.0",
-		"@wordpress/deprecated": "^3.53.0",
-		"@wordpress/dom": "^3.53.0",
-		"@wordpress/element": "^5.30.0",
-		"@wordpress/escape-html": "^2.53.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/html-entities": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/icons": "^9.44.0",
-		"@wordpress/is-shallow-equal": "^4.53.0",
-		"@wordpress/keyboard-shortcuts": "^4.30.0",
-		"@wordpress/keycodes": "^3.53.0",
-		"@wordpress/notices": "^4.21.0",
-		"@wordpress/preferences": "^3.30.0",
-		"@wordpress/private-apis": "^0.35.0",
-		"@wordpress/rich-text": "^6.30.0",
-		"@wordpress/style-engine": "^1.36.0",
-		"@wordpress/token-list": "^2.53.0",
-		"@wordpress/url": "^3.54.0",
-		"@wordpress/warning": "^2.53.0",
-		"@wordpress/wordcount": "^3.53.0",
+		"@wordpress/a11y": "^3.54.0",
+		"@wordpress/api-fetch": "^6.51.0",
+		"@wordpress/blob": "^3.54.0",
+		"@wordpress/blocks": "^12.31.0",
+		"@wordpress/commands": "^0.25.0",
+		"@wordpress/components": "^27.2.0",
+		"@wordpress/compose": "^6.31.0",
+		"@wordpress/data": "^9.24.0",
+		"@wordpress/date": "^4.54.0",
+		"@wordpress/deprecated": "^3.54.0",
+		"@wordpress/dom": "^3.54.0",
+		"@wordpress/element": "^5.31.0",
+		"@wordpress/escape-html": "^2.54.0",
+		"@wordpress/hooks": "^3.54.0",
+		"@wordpress/html-entities": "^3.54.0",
+		"@wordpress/i18n": "^4.54.0",
+		"@wordpress/icons": "^9.45.0",
+		"@wordpress/is-shallow-equal": "^4.54.0",
+		"@wordpress/keyboard-shortcuts": "^4.31.0",
+		"@wordpress/keycodes": "^3.54.0",
+		"@wordpress/notices": "^4.22.0",
+		"@wordpress/preferences": "^3.31.0",
+		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/rich-text": "^6.31.0",
+		"@wordpress/style-engine": "^1.37.0",
+		"@wordpress/token-list": "^2.54.0",
+		"@wordpress/url": "^3.55.0",
+		"@wordpress/warning": "^2.54.0",
+		"@wordpress/wordcount": "^3.54.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
+	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
 }

package/src/components/block-actions/index.js

@@ -98,16 +98,10 @@ export default function BlockActions( {
 			return removeBlocks( clientIds, updateSelection );
 		},
 		onInsertBefore() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ 0 ]
-				: clientId;
-			insertBeforeBlock( clientId );
+			insertBeforeBlock( clientIds[ 0 ] );
 		},
 		onInsertAfter() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ clientIds.length - 1 ]
-				: clientId;
-			insertAfterBlock( clientId );
+			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
 		onMoveTo() {
 			setNavigationMode( true );

package/src/components/block-bindings-toolbar-indicator/style.scss

@@ -1,14 +1,16 @@
 .block-editor-block-bindings-toolbar-indicator {
 	display: inline-flex;
 	align-items: center;
-	height: 48px;
+	justify-content: center;
 	padding: 6px;
-
-	svg g {
-		stroke: var(--wp-bound-block-color);
-		fill: transparent;
-		stroke-width: 1.5;
-		stroke-linecap: round;
-		stroke-linejoin: round;
+	svg {
+		fill: var(--wp-bound-block-color);
 	}
 }
+
+.edit-post-header__toolbar
+.selected-block-tools-wrapper
+.block-editor-block-toolbar
+.block-editor-block-bindings-toolbar-indicator {
+	height: 32px;
+}

package/src/components/block-heading-level-dropdown/README.md

@@ -28,23 +28,23 @@ const MyHeadingLevelToolbar = () => (
 
 #### options
 
-The list of available HTML tags, passed from the block.
+The list of available heading levels, passed from the block.
 
 -   Type: `Object`
 -   Required: no
 
 #### value
 
-The chosen HTML tag.
+The chosen heading level.
 
--   Type: `string`
+-   Type: `number`
 -   Required: no
 
 #### onChange
 
-Callback to run when toolbar value is changed.
+Function called with the selected value changes.
 
--   Type: `string`
+-   Type: `() => number`
 -   Required: yes
 
 ## Related components

package/src/components/block-heading-level-dropdown/index.js

@@ -22,10 +22,10 @@ const POPOVER_PROPS = {
  *
  * @typedef WPHeadingLevelDropdownProps
  *
- * @property {number}                 value    The chosen heading level.
- * @property {number[]}               options  An array of supported heading levels.
- * @property {(newValue:number)=>any} onChange Callback to run when
- *                                             toolbar value is changed.
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
  */
 
 /**
@@ -53,7 +53,7 @@ export default function HeadingLevelDropdown( {
 						targetLevel === 0
 							? __( 'Paragraph' )
 							: sprintf(
-									// translators: %s: heading level e.g: "1", "2", "3"
+									// translators: %d: heading level e.g: "1", "2", "3"
 									__( 'Heading %d' ),
 									targetLevel
 							  ),

package/src/components/block-heading-level-dropdown/index.native.js

@@ -18,9 +18,10 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @typedef WPHeadingLevelDropdownProps
  *
- * @property {number}                 selectedLevel The chosen heading level.
- * @property {(newValue:number)=>any} onChange      Callback to run when
- *                                                  toolbar value is changed.
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
  */
 
 /**
@@ -48,7 +49,7 @@ export default function HeadingLevelDropdown( {
 					isPressed={ isActive }
 				/>
 			),
-			// translators: %s: heading level e.g: "1", "2", "3"
+			// translators: %d: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
 			isActive,
 			onClick: () => onChangeCallback( targetLevel ),

package/src/components/block-list/block-crash-boundary.native.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { logException } from '@wordpress/react-native-bridge';
+
+class BlockCrashBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	componentDidCatch( error ) {
+		const { blockName } = this.props;
+
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+				block_name: blockName,
+			},
+			isHandled: true,
+			handledBy: 'Block-level Error Boundary',
+		} );
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return this.props.fallback;
+	}
+}
+
+export default BlockCrashBoundary;

package/src/components/block-list/block-crash-warning.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+
+const warning = (
+	<Warning
+		message={ __(
+			'This block has encountered an error and cannot be previewed.'
+		) }
+	/>
+);
+
+export default () => warning;

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

@@ -49,6 +49,8 @@ import { useLayout } from './layout';
 import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
+import BlockCrashBoundary from './block-crash-boundary';
+import BlockCrashWarning from './block-crash-warning';
 
 const EMPTY_ARRAY = [];
 
@@ -139,14 +141,19 @@ function BlockWrapper( {
 				isSelected={ isSelected }
 				name={ name }
 			/>
-			<BlockDraggable
-				clientId={ clientId }
-				draggingClientId={ draggingClientId }
-				enabled={ draggingEnabled }
-				testID="draggable-trigger-content"
+			<BlockCrashBoundary
+				blockName={ name }
+				fallback={ <BlockCrashWarning /> }
 			>
-				{ children }
-			</BlockDraggable>
+				<BlockDraggable
+					clientId={ clientId }
+					draggingClientId={ draggingClientId }
+					enabled={ draggingEnabled }
+					testID="draggable-trigger-content"
+				>
+					{ children }
+				</BlockDraggable>
+			</BlockCrashBoundary>
 		</Pressable>
 	);
 }

package/src/components/block-list/content.scss

@@ -360,6 +360,22 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
+body.is-zoomed-out {
+	display: flex;
+	flex-direction: column;
+
+	> .is-root-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		> main {
+			flex: 1;
+		}
+	}
+}
+
 .wp-site-blocks > [data-align="left"] {
 	float: left;
 	margin-right: 2em;

package/src/components/block-settings/container.native.js

@@ -16,6 +16,7 @@ import styles from './container.native.scss';
 import InspectorControls from '../inspector-controls';
 import ImageLinkDestinationsScreen from '../image-link-destinations';
 import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -46,7 +47,10 @@ export default function BottomSheetSettings( props ) {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.settings }
 				>
-					<InspectorControls.Slot />
+					<>
+						<InspectorControls.Slot />
+						<AdvancedControls />
+					</>
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ BottomSheet.SubSheet.screenName }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -9,7 +9,7 @@ import {
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
+import { Children, cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
@@ -46,18 +46,14 @@ function CopyMenuItem( { clientIds, onCopy, label } ) {
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
-	__experimentalSelectBlock,
 	children,
-	__unstableDisplayLocation,
+	__experimentalSelectBlock,
 	...props
 } ) {
 	// Get the client id of the current block for this menu, if one is set.
 	const currentClientId = block?.clientId;
-	const blockClientIds = Array.isArray( clientIds )
-		? clientIds
-		: [ clientIds ];
-	const count = blockClientIds.length;
-	const firstBlockClientId = blockClientIds[ 0 ];
+	const count = clientIds.length;
+	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
 		onlyBlock,
@@ -127,41 +123,35 @@ export function BlockSettingsDropdown( {
 	const isMatch = __unstableUseShortcutEventMatch();
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
-	const updateSelectionAfterDuplicate = useCallback(
-		async ( clientIdsPromise ) => {
-			if ( __experimentalSelectBlock ) {
-				const ids = await clientIdsPromise;
-				if ( ids && ids[ 0 ] ) {
-					__experimentalSelectBlock( ids[ 0 ], false );
-				}
-			}
-		},
-		[ __experimentalSelectBlock ]
-	);
+	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-	const updateSelectionAfterRemove = useCallback( () => {
-		if ( __experimentalSelectBlock ) {
-			let blockToFocus = previousBlockClientId || firstParentClientId;
+		const ids = await clientIdsPromise;
+		if ( ids && ids[ 0 ] ) {
+			__experimentalSelectBlock( ids[ 0 ], false );
+		}
+	}
 
-			// Focus the first block if there's no previous block nor parent block.
-			if ( ! blockToFocus ) {
-				blockToFocus = getBlockOrder()[ 0 ];
-			}
+	function updateSelectionAfterRemove() {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-			// Only update the selection if the original selection is removed.
-			const shouldUpdateSelection =
-				hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+		let blockToFocus = previousBlockClientId || firstParentClientId;
 
-			__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+		// Focus the first block if there's no previous block nor parent block.
+		if ( ! blockToFocus ) {
+			blockToFocus = getBlockOrder()[ 0 ];
 		}
-	}, [
-		__experimentalSelectBlock,
-		previousBlockClientId,
-		firstParentClientId,
-		getBlockOrder,
-		hasSelectedBlocks,
-		getSelectedBlockClientIds,
-	] );
+
+		// Only update the selection if the original selection is removed.
+		const shouldUpdateSelection =
+			hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+
+		__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+	}
 
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
@@ -179,20 +169,17 @@ export function BlockSettingsDropdown( {
 		? undefined
 		: openedBlockSettingsMenu === currentClientId || false;
 
-	const onToggle = useCallback(
-		( localOpen ) => {
-			if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
-				setOpenedBlockSettingsMenu( currentClientId );
-			} else if (
-				! localOpen &&
-				openedBlockSettingsMenu &&
-				openedBlockSettingsMenu === currentClientId
-			) {
-				setOpenedBlockSettingsMenu( undefined );
-			}
-		},
-		[ currentClientId, openedBlockSettingsMenu, setOpenedBlockSettingsMenu ]
-	);
+	function onToggle( localOpen ) {
+		if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
+			setOpenedBlockSettingsMenu( currentClientId );
+		} else if (
+			! localOpen &&
+			openedBlockSettingsMenu &&
+			openedBlockSettingsMenu === currentClientId
+		) {
+			setOpenedBlockSettingsMenu( undefined );
+		}
+	}
 
 	return (
 		<BlockActions
@@ -233,7 +220,8 @@ export function BlockSettingsDropdown( {
 								canRemove
 							) {
 								event.preventDefault();
-								updateSelectionAfterRemove( onRemove() );
+								onRemove();
+								updateSelectionAfterRemove();
 							} else if (
 								isMatch(
 									'core/block-editor/duplicate',
@@ -349,9 +337,6 @@ export function BlockSettingsDropdown( {
 									firstBlockClientId,
 								} }
 								clientIds={ clientIds }
-								__unstableDisplayLocation={
-									__unstableDisplayLocation
-								}
 							/>
 							{ typeof children === 'function'
 								? children( { onClose } )

package/src/components/block-settings-menu-controls/README.md

@@ -16,12 +16,3 @@ function ReusableBlocksMenuItems() {
 	);
 }
 ```
-
-## Props
-
-### `__unstableDisplayLocation`
-
--   **Type:** `String`
--   **Default:** `undefined`
-
-A string representing the location where the component is being displayed within the UI. This can be used to conditionalize certain behaviors including the display of associated components. This behaviour will likely be refactored to a React.Context implementation.

package/src/components/block-settings-menu-controls/index.js

@@ -26,11 +26,7 @@ import { BlockRenameControl, useBlockRename } from '../block-rename';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
-const BlockSettingsMenuControlsSlot = ( {
-	fillProps,
-	clientIds = null,
-	__unstableDisplayLocation,
-} ) => {
+const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlockNamesByClientId, getSelectedBlockClientIds } =
@@ -61,7 +57,6 @@ const BlockSettingsMenuControlsSlot = ( {
 		<Slot
 			fillProps={ {
 				...fillProps,
-				__unstableDisplayLocation,
 				selectedBlocks,
 				selectedClientIds,
 			} }