@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/block-list/use-block-props/index.js

@@ -11,7 +11,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
-	hasBlockSupport,
 } from '@wordpress/blocks';
 import { useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -68,11 +67,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		index,
 		mode,
 		name,
+		blockApiVersion,
 		blockTitle,
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
-		lightBlockWrapper,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -99,16 +98,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				index: getBlockIndex( clientId, rootClientId ),
 				mode: getBlockMode( clientId ),
 				name: blockName,
-				blockTitle: blockType.title,
+				blockApiVersion: blockType?.apiVersion || 1,
+				blockTitle: blockType?.title,
 				isPartOfSelection: isSelected || isPartOfMultiSelection,
 				adjustScrolling:
 					isSelected || isFirstMultiSelectedBlock( clientId ),
 				enableAnimation:
 					! isTyping() &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
-				lightBlockWrapper:
-					blockType.apiVersion > 1 ||
-					hasBlockSupport( blockType, 'lightBlockWrapper', false ),
 			};
 		},
 		[ clientId ]
@@ -139,7 +136,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	const blockEditContext = useBlockEditContext();
 	// Ensures it warns only inside the `edit` implementation for the block.
-	if ( ! lightBlockWrapper && clientId === blockEditContext.clientId ) {
+	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
 			`Block type "${ name }" must support API version 2 or higher to work correctly with "useBlockProps" method.`
 		);

package/src/components/block-list/use-block-props/use-block-custom-class-name.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -25,22 +25,20 @@ export function useBlockCustomClassName( clientId ) {
 			const { getBlockName, getBlockAttributes } = select(
 				blockEditorStore
 			);
-			const { className } = getBlockAttributes( clientId );
+			const attributes = getBlockAttributes( clientId );
 
-			if ( ! className ) {
+			if ( ! attributes?.className ) {
 				return;
 			}
 
 			const blockType = getBlockType( getBlockName( clientId ) );
-			const hasLightBlockWrapper =
-				blockType.apiVersion > 1 ||
-				hasBlockSupport( blockType, 'lightBlockWrapper', false );
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 
 			if ( ! hasLightBlockWrapper ) {
 				return;
 			}
 
-			return className;
+			return attributes.className;
 		},
 		[ clientId ]
 	);

package/src/components/block-list/use-block-props/use-block-default-class-name.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	hasBlockSupport,
-	getBlockType,
-	getBlockDefaultClassName,
-} from '@wordpress/blocks';
+import { getBlockType, getBlockDefaultClassName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -26,9 +22,7 @@ export function useBlockDefaultClassName( clientId ) {
 		( select ) => {
 			const name = select( blockEditorStore ).getBlockName( clientId );
 			const blockType = getBlockType( name );
-			const hasLightBlockWrapper =
-				blockType.apiVersion > 1 ||
-				hasBlockSupport( blockType, 'lightBlockWrapper', false );
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 
 			if ( ! hasLightBlockWrapper ) {
 				return;

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

@@ -165,10 +165,36 @@ export function useMultiSelection( clientId ) {
 
 				if ( event.shiftKey ) {
 					const blockSelectionStart = getBlockSelectionStart();
-					if ( blockSelectionStart !== clientId ) {
-						toggleRichText( node, false );
-						multiSelect( blockSelectionStart, clientId );
-						event.preventDefault();
+					// 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 &&
+						! startParents?.includes( clientId )
+					) {
+						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/use-in-between-inserter.js

@@ -107,6 +107,15 @@ export function useInBetweenInserter() {
 					}
 				}
 
+				// Don't show the insertion point if a parent block has an "overlay"
+				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
+				const parentOverlay = element.parentElement?.closest(
+					'.block-editor-block-content-overlay.overlay-active'
+				);
+				if ( parentOverlay ) {
+					return;
+				}
+
 				const clientId = element.id.slice( 'block-'.length );
 
 				if ( ! clientId ) {

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

@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { Disabled } from '@wordpress/components';
-import { useResizeObserver, pure } from '@wordpress/compose';
+import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import Iframe from '../iframe';
+import EditorStyles from '../editor-styles';
+import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
@@ -18,37 +22,51 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		{ width: containerWidth },
 	] = useResizeObserver();
 	const [
-		containtResizeListener,
+		contentResizeListener,
 		{ height: contentHeight },
 	] = 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 );
 
-	const scale =
-		( containerWidth - 2 * __experimentalPadding ) / viewportWidth;
+	const scale = containerWidth / viewportWidth;
 
 	return (
-		<div
-			className="block-editor-block-preview__container editor-styles-wrapper"
-			aria-hidden
-			style={ {
-				height: contentHeight * scale + 2 * __experimentalPadding,
-			} }
-		>
+		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
 			<Disabled
+				className="block-editor-block-preview__content"
 				style={ {
 					transform: `scale(${ scale })`,
-					width: viewportWidth,
-					left: __experimentalPadding,
-					right: __experimentalPadding,
-					top: __experimentalPadding,
+					height: contentHeight * scale,
 				} }
-				className="block-editor-block-preview__content"
 			>
-				{ containtResizeListener }
-				<MemoizedBlockList />
+				<Iframe
+					head={ <EditorStyles styles={ styles } /> }
+					contentRef={ useRefEffect( ( bodyElement ) => {
+						const {
+							ownerDocument: { documentElement },
+						} = bodyElement;
+						documentElement.style.position = 'absolute';
+						documentElement.style.width = '100%';
+						bodyElement.style.padding =
+							__experimentalPadding + 'px';
+					}, [] ) }
+					aria-hidden
+					tabIndex={ -1 }
+					style={ {
+						position: 'absolute',
+						width: viewportWidth,
+						height: contentHeight,
+						pointerEvents: 'none',
+					} }
+				>
+					{ contentResizeListener }
+					<MemoizedBlockList renderAppender={ false } />
+				</Iframe>
 			</Disabled>
 		</div>
 	);

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

@@ -10,19 +10,10 @@
 
 	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.
 
-		// Position above the padding.
-		position: absolute;
-
 		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
 		top: 0;
 		left: 0;
@@ -43,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>
 	);