@wordpress/block-editor 12.20.0 → 12.22.0

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

@@ -20,42 +20,55 @@ export default function BlockActions( {
 	children,
 	__experimentalUpdateSelection: updateSelection,
 } ) {
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canMoveBlocks,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
-
-	const blocks = getBlocksByClientId( clientIds );
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canCopyStyles = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			( hasBlockSupport( block.name, 'color' ) ||
-				hasBlockSupport( block.name, 'typography' ) )
-		);
-	} );
-
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
+	const selected = useSelect(
+		( select ) => {
+			const {
+				canInsertBlockType,
+				getBlockRootClientId,
+				getBlocksByClientId,
+				getDirectInsertBlock,
+				canMoveBlocks,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const blocks = getBlocksByClientId( clientIds );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const canInsertDefaultBlock = canInsertBlockType(
+				getDefaultBlockName(),
+				rootClientId
+			);
+			const directInsertBlock = rootClientId
+				? getDirectInsertBlock( rootClientId )
+				: null;
+
+			return {
+				canMove: canMoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canCopyStyles: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						( hasBlockSupport( block.name, 'color' ) ||
+							hasBlockSupport( block.name, 'typography' ) )
+					);
+				} ),
+				canDuplicate: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, rootClientId )
+					);
+				} ),
+			};
+		},
+		[ clientIds, getDefaultBlockName ]
 	);
+	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const canMove = canMoveBlocks( clientIds, rootClientId );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
+		selected;
 
 	const {
 		removeBlocks,
@@ -75,11 +88,9 @@ export default function BlockActions( {
 	return children( {
 		canCopyStyles,
 		canDuplicate,
-		canInsertDefaultBlock,
+		canInsertBlock,
 		canMove,
 		canRemove,
-		rootClientId,
-		blocks,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
 		},
@@ -87,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 );
@@ -104,14 +109,17 @@ export default function BlockActions( {
 			setBlockMovingClientId( clientIds[ 0 ] );
 		},
 		onGroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = switchToBlockType(
+				getBlocksByClientId( clientIds ),
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;
@@ -119,12 +127,11 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, newBlocks );
 		},
 		onUngroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
-			const innerBlocks = blocks[ 0 ].innerBlocks;
-
+			const innerBlocks = getBlocks( clientIds[ 0 ] );
 			if ( ! innerBlocks.length ) {
 				return;
 			}
@@ -132,16 +139,13 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, innerBlocks );
 		},
 		onCopy() {
-			const selectedBlockClientIds = blocks.map(
-				( { clientId } ) => clientId
-			);
-			if ( blocks.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', selectedBlockClientIds );
+			notifyCopy( 'copy', clientIds );
 		},
 		async onPasteStyles() {
-			await pasteStyles( blocks );
+			await pasteStyles( getBlocksByClientId( clientIds ) );
 		},
 	} );
 }

package/src/components/block-bindings-toolbar-indicator/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
+import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+export default function BlockBindingsToolbarIndicator() {
+	return (
+		<ToolbarGroup>
+			<ToolbarItem
+				as={ 'div' }
+				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
+				className="block-editor-block-bindings-toolbar-indicator"
+			>
+				<Icon icon={ connection } size={ 24 } />
+			</ToolbarItem>
+		</ToolbarGroup>
+	);
+}

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

@@ -0,0 +1,16 @@
+.block-editor-block-bindings-toolbar-indicator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 6px;
+	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-draggable/test/index.native.js

@@ -382,7 +382,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
@@ -410,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'

package/src/components/block-edit/context.js

@@ -6,6 +6,7 @@ import { createContext, useContext } from '@wordpress/element';
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
 export const blockEditingModeKey = Symbol( 'blockEditingMode' );
+export const blockBindingsKey = Symbol( 'blockBindings' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',

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

@@ -14,6 +14,7 @@ import {
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
 	blockEditingModeKey,
+	blockBindingsKey,
 } from './context';
 
 /**
@@ -41,7 +42,8 @@ export default function BlockEdit( {
 		attributes = {},
 		__unstableLayoutClassNames,
 	} = props;
-	const { layout = null } = attributes;
+	const { layout = null, metadata = {} } = attributes;
+	const { bindings } = metadata;
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
@@ -62,6 +64,7 @@ export default function BlockEdit( {
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
 					[ blockEditingModeKey ]: blockEditingMode,
+					[ blockBindingsKey ]: bindings,
 				} ),
 				[
 					name,
@@ -73,6 +76,7 @@ export default function BlockEdit( {
 					mayDisplayControls,
 					mayDisplayParentControls,
 					blockEditingMode,
+					bindings,
 				]
 			) }
 		>

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-inspector/index.js

@@ -28,7 +28,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -114,6 +114,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId
 	);
 
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName: selectedBlockName,
+	} );
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -138,9 +142,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ getBorderPanelLabel( {
-								blockName: selectedBlockName,
-							} ) }
+							label={ borderPanelLabel }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -249,7 +251,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">

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

@@ -53,7 +53,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
-			accessible={ true }
+			accessible
 			accessibilityRole={ 'button' }
 		>
 			<Warning

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

@@ -98,7 +98,7 @@ function BlockListItemContent( {
 			const name = getBlockName( clientId );
 			const parentName = getBlockName( rootClientId );
 			const { align } = getBlockAttributes( clientId ) || {};
-			const { align: parentBlockAlign } =
+			const { textAlign: parentBlockAlign } =
 				getBlockAttributes( rootClientId ) || {};
 
 			return {

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

@@ -14,16 +14,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import styles from './block.scss';
 
 const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
+const DESIGN_BLOCKS_WITHOUT_OUTLINE = [ 'core/button', 'core/spacer' ];
+const MEDIA_BLOCKS_WITH_OUTLINE = [ 'core/audio', 'core/file' ];
 
-function BlockOutline( {
-	blockCategory,
-	hasInnerBlocks,
-	isRootList,
-	isSelected,
-	name,
-} ) {
+function BlockOutline( { blockCategory, hasInnerBlocks, isSelected, name } ) {
 	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
-	const socialBlockWithOutline = name.includes( 'core/social-link' );
 
 	const hasBlockTextCategory =
 		blockCategory === 'text' && ! textBlockWithOutline;
@@ -44,19 +39,39 @@ function BlockOutline( {
 		hasBlockTextCategory && styles.solidBorderTextContent,
 	];
 
-	const shoudlShowOutline =
-		isSelected &&
-		( ( hasBlockTextCategory && hasInnerBlocks ) ||
-			( ! hasBlockTextCategory && hasInnerBlocks ) ||
-			( ! hasBlockTextCategory && isRootList ) ||
-			socialBlockWithOutline ||
-			textBlockWithOutline );
-
-	return (
-		shoudlShowOutline && (
-			<View pointerEvents="box-none" style={ styleSolidBorder } />
-		)
-	);
+	if ( ! isSelected ) {
+		return null;
+	}
+
+	let shouldShowOutline = true;
+	if ( hasBlockTextCategory && ! hasInnerBlocks ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'media' &&
+		! hasInnerBlocks &&
+		! MEDIA_BLOCKS_WITH_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	} else if ( blockCategory === 'media' && name === 'core/cover' ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'design' &&
+		DESIGN_BLOCKS_WITHOUT_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	}
+
+	if ( shouldShowOutline ) {
+		return (
+			<View
+				pointerEvents="box-none"
+				style={ styleSolidBorder }
+				testID="block-outline"
+			/>
+		);
+	}
+
+	return null;
 }
 
 export default BlockOutline;

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

@@ -40,9 +40,7 @@ const BlockSelectionButton = ( {
 				onPress={ () => {
 					/* Open BottomSheet with markup. */
 				} }
-				disabled={
-					true
-				} /* Disable temporarily since onPress function is empty. */
+				disabled /* Disable temporarily since onPress function is empty. */
 			>
 				{ rootClientId &&
 					rootBlockIcon && [

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 = [];
 
@@ -93,7 +95,6 @@ function BlockWrapper( {
 	draggingEnabled,
 	hasInnerBlocks,
 	isDescendentBlockSelected,
-	isRootList,
 	isSelected,
 	isTouchable,
 	marginHorizontal,
@@ -137,18 +138,22 @@ function BlockWrapper( {
 			<BlockOutline
 				blockCategory={ blockCategory }
 				hasInnerBlocks={ hasInnerBlocks }
-				isRootList={ isRootList }
 				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>
 	);
 }
@@ -361,7 +366,6 @@ function BlockListBlock( {
 			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
 			isFocused={ isFocused }
-			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }

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;
@@ -453,7 +469,11 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
 	transition: all 0.3s;
 	transform-origin: top center;
 }
+
+.block-editor-iframe__html[style*="scale"] {
+	background-color: $gray-300;
+}