@wordpress/block-editor 12.20.0 → 12.21.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 );
 		},
@@ -104,14 +115,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 +133,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 +145,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,14 @@
+.block-editor-block-bindings-toolbar-indicator {
+	display: inline-flex;
+	align-items: center;
+	height: 48px;
+	padding: 6px;
+
+	svg g {
+		stroke: var(--wp-bound-block-color);
+		fill: transparent;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}

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

@@ -93,7 +93,6 @@ function BlockWrapper( {
 	draggingEnabled,
 	hasInnerBlocks,
 	isDescendentBlockSelected,
-	isRootList,
 	isSelected,
 	isTouchable,
 	marginHorizontal,
@@ -137,7 +136,6 @@ function BlockWrapper( {
 			<BlockOutline
 				blockCategory={ blockCategory }
 				hasInnerBlocks={ hasInnerBlocks }
-				isRootList={ isRootList }
 				isSelected={ isSelected }
 				name={ name }
 			/>
@@ -361,7 +359,6 @@ function BlockListBlock( {
 			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
 			isFocused={ isFocused }
-			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }

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

@@ -453,7 +453,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;
+}

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

@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockOutline from '../block-outline';
+
+describe( 'BlockOutline', () => {
+	describe( 'containing an unselected block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected={ false }
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a block with inner blocks', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+					hasInnerBlocks
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a design category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a text category block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/paragraph"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="text"
+						name="core/list"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a widget category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="widgets"
+					name="core/latest-posts"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a spacer block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/spacer"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a button block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/button"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a social link block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="embed"
+					name="core/social-link"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+
+		describe( 'when platform specific', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="embed"
+						name="core/social-link-amazon"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a media block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="media"
+					name="core/image"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/gallery"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+
+			describe( 'when cover block', () => {
+				it( 'should not render an outline', async () => {
+					render(
+						<BlockOutline
+							isSelected
+							blockCategory="media"
+							name="core/cover"
+							hasInnerBlocks
+						/>
+					);
+
+					expect(
+						screen.queryByTestId( 'block-outline' )
+					).toBeNull();
+				} );
+			} );
+		} );
+
+		describe( 'when a file block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/file"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+
+		describe( 'when an audio block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/audio"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a freeform block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/freeform"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a missing block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/missing"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+} );