@wordpress/block-editor 7.0.2 → 8.0.1

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

@@ -51,6 +51,7 @@ function BlockForType( {
 	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
+	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
@@ -59,7 +60,8 @@ function BlockForType( {
 			wrapperProps.style,
 			attributes,
 			defaultColors,
-			name
+			name,
+			fontSizes
 		);
 	}, [
 		defaultColors,
@@ -319,8 +321,8 @@ export default compose( [
 		const { name, attributes, isValid } = block || {};
 
 		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType.title;
-		const icon = blockType.icon;
+		const title = blockType?.title;
+		const icon = blockType?.icon;
 
 		const parents = getBlockParents( clientId, true );
 		const parentId = parents[ 0 ] || '';

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

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
-import BlockListItem from './block-list-item.native';
+import BlockListItem from './block-list-item';
 import { store as blockEditorStore } from '../../store';
 
 const BlockListContext = createContext();

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

@@ -326,6 +326,21 @@
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
+.wp-site-blocks > [data-align="left"] {
+	float: left;
+	margin-right: 2em;
+}
+
+.wp-site-blocks > [data-align="right"] {
+	float: right;
+	margin-left: 2em;
+}
+
+.wp-site-blocks > [data-align="center"] {
+	justify-content: center;
+	margin-left: auto;
+	margin-right: auto;
+}
 
 /**
  * In-Canvas Inserter

package/src/components/block-list/use-block-props/use-multi-selection.js

@@ -165,16 +165,36 @@ export function useMultiSelection( clientId ) {
 
 				if ( event.shiftKey ) {
 					const blockSelectionStart = getBlockSelectionStart();
-					// Handle the case where we select a single block by
-					// holding the `shiftKey` and don't mark this action
-					// as multiselection.
+					// By checking `blockSelectionStart` to be set, we handle the
+					// case where we select a single block. We also have to check
+					// the selectionEnd (clientId) not to be included in the
+					// `blockSelectionStart`'s parents because the click event is
+					// propagated.
+					const startParents = getBlockParents( blockSelectionStart );
 					if (
 						blockSelectionStart &&
-						blockSelectionStart !== clientId
+						blockSelectionStart !== clientId &&
+						! startParents?.includes( clientId )
 					) {
-						toggleRichText( node, false );
-						multiSelect( blockSelectionStart, clientId );
-						event.preventDefault();
+						const startPath = [
+							...startParents,
+							blockSelectionStart,
+						];
+						const endPath = [
+							...getBlockParents( clientId ),
+							clientId,
+						];
+						const depth =
+							Math.min( startPath.length, endPath.length ) - 1;
+						const start = startPath[ depth ];
+						const end = endPath[ depth ];
+						// Handle the case of having selected a parent block and
+						// then sfift+click on a child.
+						if ( start !== end ) {
+							toggleRichText( node, false );
+							multiSelect( start, end );
+							event.preventDefault();
+						}
 					}
 				} else if ( hasMultiSelection() ) {
 					// Allow user to escape out of a multi-selection to a

package/src/components/block-list-appender/index.js

@@ -87,6 +87,14 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// The appender exists to let you add the first Paragraph before
+			// any is inserted. To that end, this appender should visually be
+			// presented as a block. That means theme CSS should style it as if
+			// it were an empty paragraph block. That means a `wp-block` class to
+			// ensure the width is correct, and a [data-block] attribute to ensure
+			// the correct margin is applied, especially for classic themes which
+			// have commonly targeted that attribute for margins.
+			data-block
 		>
 			{ appender }
 		</TagName>

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

@@ -26,7 +26,7 @@ function BlockMover( {
 	isFirst,
 	isLast,
 	clientIds,
-	isLocked,
+	canMove,
 	isHidden,
 	rootClientId,
 	orientation,
@@ -37,7 +37,7 @@ function BlockMover( {
 	const onFocus = () => setIsFocused( true );
 	const onBlur = () => setIsFocused( false );
 
-	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
@@ -100,7 +100,7 @@ export default withSelect( ( select, { clientIds } ) => {
 		getBlock,
 		getBlockIndex,
 		getBlockListSettings,
-		getTemplateLock,
+		canMoveBlocks,
 		getBlockOrder,
 		getBlockRootClientId,
 	} = select( blockEditorStore );
@@ -119,7 +119,7 @@ export default withSelect( ( select, { clientIds } ) => {
 
 	return {
 		blockType: block ? getBlockType( block.name ) : null,
-		isLocked: getTemplateLock( rootClientId ) === 'all',
+		canMove: canMoveBlocks( clientIds, rootClientId ),
 		rootClientId,
 		firstIndex,
 		isFirst,

package/src/components/block-mover/index.native.js

@@ -26,7 +26,7 @@ export const BLOCK_MOVER_DIRECTION_BOTTOM =
 export const BlockMover = ( {
 	isFirst,
 	isLast,
-	isLocked,
+	canMove,
 	onMoveDown,
 	onMoveUp,
 	onLongMove,
@@ -86,7 +86,7 @@ export const BlockMover = ( {
 		if ( option && option.onSelect ) option.onSelect();
 	};
 
-	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
@@ -130,7 +130,7 @@ export default compose(
 	withSelect( ( select, { clientIds } ) => {
 		const {
 			getBlockIndex,
-			getTemplateLock,
+			canMoveBlocks,
 			getBlockRootClientId,
 			getBlockOrder,
 		} = select( blockEditorStore );
@@ -149,7 +149,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			isLocked: getTemplateLock( rootClientId ) === 'all',
+			canMove: canMoveBlocks( clientIds, rootClientId ),
 			rootClientId,
 		};
 	} ),

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -5,7 +5,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
   <ForwardRef(ToolbarButton)
     extraProps={
       Object {
-        "hint": "Double tap to move the block up",
+        "hint": "Double tap to move the block to the left",
       }
     }
     icon={
@@ -14,17 +14,19 @@ exports[`Block Mover Picker should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M12.5 3.9L6.7 9.7l1.1 1.1 4-4V20h1.4V6.7l4.5 4.1 1.1-1.1z"
+          d="M20 10.8H6.7l4.1-4.5-1.1-1.1-5.8 6.3 5.8 5.8 1.1-1.1-4-3.9H20z"
         />
       </SVG>
     }
+    isDisabled={false}
+    onClick={[MockFunction]}
     onLongPress={[Function]}
-    title="Move block up from row NaN to row NaN"
+    title="Move block left from position 2 to position 1"
   />
   <ForwardRef(ToolbarButton)
     extraProps={
       Object {
-        "hint": "Double tap to move the block down",
+        "hint": "Double tap to move the block to the right",
       }
     }
     icon={
@@ -33,12 +35,14 @@ exports[`Block Mover Picker should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M16.2 13.2l-4 4V4h-1.5v13.3l-4.5-4.1-1 1.1 6.2 5.8 5.8-5.8-1-1.1z"
+          d="M14.3 6.7l-1.1 1.1 4 4H4v1.5h13.3l-4.1 4.4 1.1 1.1 5.8-6.3z"
         />
       </SVG>
     }
+    isDisabled={true}
+    onClick={[MockFunction]}
     onLongPress={[Function]}
-    title="Move block down from row NaN to row NaN"
+    title="Move block right"
   />
   <Picker
     hideCancelButton={true}

package/src/components/block-mover/test/index.native.js

@@ -10,42 +10,40 @@ import { BlockMover } from '../index';
 
 describe( 'Block Mover Picker', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow( <BlockMover />, {
-			context: {
-				isFirst: false,
-				isLast: true,
-				isLocked: false,
-				numberOfBlocks: 2,
-				firstIndex: 1,
+		const props = {
+			isFirst: false,
+			isLast: true,
+			canMove: true,
+			numberOfBlocks: 2,
+			firstIndex: 1,
 
-				onMoveDown: jest.fn(),
-				onMoveUp: jest.fn(),
-				onLongPress: jest.fn(),
+			onMoveDown: jest.fn(),
+			onMoveUp: jest.fn(),
+			onLongPress: jest.fn(),
 
-				rootClientId: '',
-				isStackedHorizontally: true,
-			},
-		} );
+			rootClientId: '',
+			isStackedHorizontally: true,
+		};
+		const wrapper = shallow( <BlockMover { ...props } /> );
 		expect( wrapper ).toBeTruthy();
 	} );
 
 	it( 'should match snapshot', () => {
-		const wrapper = shallow( <BlockMover />, {
-			context: {
-				isFirst: false,
-				isLast: true,
-				isLocked: false,
-				numberOfBlocks: 2,
-				firstIndex: 1,
+		const props = {
+			isFirst: false,
+			isLast: true,
+			canMove: true,
+			numberOfBlocks: 2,
+			firstIndex: 1,
 
-				onMoveDown: jest.fn(),
-				onMoveUp: jest.fn(),
-				onLongPress: jest.fn(),
+			onMoveDown: jest.fn(),
+			onMoveUp: jest.fn(),
+			onLongPress: jest.fn(),
 
-				rootClientId: '',
-				isStackedHorizontally: true,
-			},
-		} );
+			rootClientId: '',
+			isStackedHorizontally: true,
+		};
+		const wrapper = shallow( <BlockMover { ...props } /> );
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

package/src/components/block-navigation/dropdown.js

@@ -67,7 +67,6 @@ function BlockNavigationDropdown(
 
 					<ListView
 						showNestedBlocks
-						showOnlyCurrentHierarchy
 						__experimentalFeatures={ __experimentalFeatures }
 					/>
 				</div>

package/src/components/block-patterns-list/index.js

@@ -9,22 +9,15 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
-import { store as blockEditorStore } from '../../store';
 
 function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
-	const { name, viewportWidth } = pattern;
-	const { blocks } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__experimentalGetParsedPattern( name ),
-		[ name ]
-	);
+	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 

package/src/components/block-patterns-list/style.scss

@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-top: $grid-unit-20;
+	margin-bottom: $grid-unit-30;
 
 	&.is-placeholder {
 		min-height: 100px;
@@ -13,25 +13,35 @@
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
-	border-radius: $radius-block-ui;
-	transition: all 0.05s ease-in-out;
-	position: relative;
-	border: $border-width solid transparent;
 
-	&:hover {
+	.block-editor-block-preview__container {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-100;
+	}
+
+	.block-editor-block-patterns-list__item-title {
+		padding-top: $grid-unit-10;
+		font-size: 12px;
+		text-align: center;
+	}
+
+	&:hover .block-editor-block-preview__container {
 		border: $border-width solid var(--wp-admin-theme-color);
 	}
 
-	&:focus {
+	&:focus .block-editor-block-preview__container {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
-}
 
-.block-editor-block-patterns-list__item-title {
-	padding: $grid-unit-05;
-	font-size: 12px;
-	text-align: center;
+
+	&:hover .block-editor-block-patterns-list__item-title,
+	&:focus .block-editor-block-patterns-list__item-title {
+		color: var(--wp-admin-theme-color);
+	}
 }

package/src/components/block-preview/README.md

@@ -22,7 +22,7 @@ A block instance (object) or a blocks array you would like to render a preview.
 ### `viewportWidth`
 
 -   **Type:** `Int`
--   **Default:** `700`
+-   **Default:** `1200`
 
 Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
 

package/src/components/block-preview/auto.js

@@ -27,7 +27,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	] = useResizeObserver();
 	const styles = useSelect( ( select ) => {
 		return select( store ).getSettings().styles;
-	} );
+	}, [] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );

package/src/components/block-preview/style.scss

@@ -10,12 +10,6 @@
 
 	overflow: hidden;
 
-	// Overrides the default padding applied in editor styles otherwise preview centering break.
-	&.editor-styles-wrapper {
-		padding: 0;
-		margin: 0;
-	}
-
 	.block-editor-block-preview__content {
 		// This element receives inline styles for width, height, and transform-scale.
 		// Those inline styles are calculated to fit a perfect thumbnail.
@@ -40,16 +34,5 @@
 		.block-list-appender {
 			display: none;
 		}
-
-		// Reset default editor padding
-		.block-editor-block-list__layout.is-root-container {
-			padding-left: 0;
-			padding-right: 0;
-
-			> .wp-block[data-align="full"] {
-				margin-left: 0;
-				margin-right: 0;
-			}
-		}
 	}
 }

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

@@ -6,6 +6,7 @@ import {
 	BottomSheet,
 	ColorSettings,
 	FocalPointSettingsPanel,
+	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -21,6 +22,7 @@ export const blockSettingsScreens = {
 	color: 'Color',
 	focalPoint: 'FocalPoint',
 	linkPicker: 'linkPicker',
+	imageLinkDestinations: 'imageLinkDestinations',
 };
 
 function BottomSheetSettings( {
@@ -75,6 +77,11 @@ function BottomSheetSettings( {
 						returnScreenName={ blockSettingsScreens.settings }
 					/>
 				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.imageLinkDestinations }
+				>
+					<ImageLinkDestinationsScreen { ...props } />
+				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);

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

@@ -6,13 +6,13 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
 
 import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import { serialize, store as blocksStore } from '@wordpress/blocks';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -46,9 +46,17 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const onlyBlock = useSelect(
-		( select ) => 1 === select( blockEditorStore ).getBlockCount(),
-		[]
+	const { onlyBlock, title } = useSelect(
+		( select ) => {
+			const { getBlockCount, getBlockName } = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			return {
+				onlyBlock: 1 === getBlockCount(),
+				title: getBlockType( getBlockName( firstBlockClientId ) )
+					?.title,
+			};
+		},
+		[ firstBlockClientId ]
 	);
 
 	const shortcuts = useSelect( ( select ) => {
@@ -79,8 +87,12 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const removeBlockLabel =
-		count === 1 ? __( 'Remove block' ) : __( 'Remove blocks' );
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		title
+	);
+	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
 	return (
 		<BlockActions
@@ -90,7 +102,8 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canDuplicate,
 				canInsertDefaultBlock,
-				isLocked,
+				canMove,
+				canRemove,
 				onDuplicate,
 				onInsertAfter,
 				onInsertBefore,
@@ -156,7 +169,7 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
-								{ ! isLocked && ! onlyBlock && (
+								{ canMove && ! onlyBlock && (
 									<MenuItem
 										onClick={ flow( onClose, onMoveTo ) }
 									>
@@ -179,8 +192,8 @@ export function BlockSettingsDropdown( {
 								: Children.map( ( child ) =>
 										cloneElement( child, { onClose } )
 								  ) }
-							<MenuGroup>
-								{ ! isLocked && (
+							{ canRemove && (
+								<MenuGroup>
 									<MenuItem
 										onClick={ flow(
 											onClose,
@@ -191,8 +204,8 @@ export function BlockSettingsDropdown( {
 									>
 										{ removeBlockLabel }
 									</MenuItem>
-								) }
-							</MenuGroup>
+								</MenuGroup>
+							) }
 						</>
 					) }
 				</DropdownMenu>

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

@@ -25,17 +25,20 @@ import { store as blockEditorStore } from '../../store';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const selectedBlocks = useSelect(
+	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getSelectedBlockClientIds } = select(
 				blockEditorStore
 			);
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
-			return map(
-				compact( getBlocksByClientId( ids ) ),
-				( block ) => block.name
-			);
+			return {
+				selectedBlocks: map(
+					compact( getBlocksByClientId( ids ) ),
+					( block ) => block.name
+				),
+				selectedClientIds: ids,
+			};
 		},
 		[ clientIds ]
 	);
@@ -46,7 +49,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton = isGroupable || isUngroupable;
 	return (
-		<Slot fillProps={ { ...fillProps, selectedBlocks } }>
+		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
 			{ ( fills ) => {
 				if ( fills?.length > 0 || showConvertToGroupButton ) {
 					return (

package/src/components/block-styles/preview.native.js

@@ -67,11 +67,11 @@ function StylePreview( { onPress, isActive, style, url } ) {
 	);
 
 	const getOutline = ( outlineStyles ) =>
-		outlineStyles.map( ( outlineStyle ) => {
+		outlineStyles.map( ( outlineStyle, index ) => {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ JSON.stringify( outlineStyle ) }
+					key={ index }
 				/>
 			);
 		} );

package/src/components/block-switcher/block-styles-menu.js

@@ -33,7 +33,7 @@ export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
 			{ hoveredClassName && (
 				<PreviewBlockPopover
 					blocks={
-						blockType.example
+						blockType && blockType.example
 							? getBlockFromExample( blockType.name, {
 									attributes: {
 										...blockType.example.attributes,

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

@@ -38,6 +38,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
+		canRemove,
 		hasBlockStyles,
 		icon,
 		blockTitle,
@@ -50,6 +51,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				__experimentalGetPatternTransformItems,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType } = select( blocksStore );
+			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
 				castArray( clientIds )[ 0 ]
 			);
@@ -74,9 +76,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					blocks,
 					rootClientId
 				),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName ).title,
+				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -95,8 +98,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	// Pattern transformation through the `Patterns` API.
 	const onPatternTransform = ( transformedBlocks ) =>
 		replaceBlocks( clientIds, transformedBlocks );
-	const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
-	const hasPatternTransformation = !! patterns?.length;
+	const hasPossibleBlockTransformations =
+		!! possibleBlockTransformations.length && canRemove;
+	const hasPatternTransformation = !! patterns?.length && canRemove;
 	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 		return (
 			<ToolbarGroup>