@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/inserter/stories/index.js

@@ -0,0 +1,90 @@
+/**
+ * Internal dependencies
+ */
+import BlockLibrary from '../library';
+import BlockEditorProvider from '../../provider';
+import { patternCategories, patterns, reusableBlocks } from './fixtures';
+import Inserter from '../';
+
+export default { title: 'BlockEditor/Inserter' };
+
+export const libraryWithoutPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const libraryWithPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const libraryWithPatternsAndReusableBlocks = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const quickInserter = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<Inserter __experimentalIsQuick />
+			</div>
+		</BlockEditorProvider>
+	);
+};

package/src/components/inserter/style.scss

@@ -16,8 +16,20 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__content {
+.block-editor-inserter__main-area {
 	position: relative;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: $grid-unit-20;
+	width: auto;
+	@include break-medium {
+		width: $block-inserter-width;
+	}
+
+	&.show-as-tabs {
+		gap: 0;
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -78,15 +90,6 @@ $block-inserter-tabs-height: 44px;
 	overflow: visible;
 }
 
-.block-editor-inserter__main-area {
-	width: auto;
-	overflow-y: auto;
-	height: 100%;
-	@include break-medium {
-		width: $block-inserter-width;
-	}
-}
-
 .block-editor-inserter__inline-elements {
 	margin-top: -1px;
 }
@@ -100,11 +103,7 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__search {
-	background: $white;
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-inserter__search");
 
 	.components-search-control__icon {
 		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
@@ -116,15 +115,12 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__tabs {
+	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 
 	.components-tab-panel__tabs {
-		position: sticky;
-		// Computed based off the search input height and paddings
-		top: $grid-unit-20 + $grid-unit-60;
-		background: $white;
-		z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tabs");
 		border-bottom: $border-width solid $gray-300;
 
 		.components-tab-panel__tabs-item {
@@ -137,12 +133,15 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
-		// Make a stacking context that keeps all descendents behind the sticky tabs
-		position: relative;
-		z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tab-content");
+		overflow-y: auto;
 	}
 }
 
+.block-editor-inserter__no-tab-container {
+	overflow-y: auto;
+	flex-grow: 1;
+}
+
 .block-editor-inserter__panel-header {
 	display: inline-flex;
 	align-items: center;
@@ -175,11 +174,6 @@ $block-inserter-tabs-height: 44px;
 	border: none;
 }
 
-.block-editor-inserter__block-list {
-	flex-grow: 1;
-	position: relative;
-}
-
 .block-editor-inserter__reusable-blocks-panel {
 	position: relative;
 	text-align: right;

package/src/components/inserter/tabs.js

@@ -26,20 +26,24 @@ function InserterTabs( {
 	showPatterns = false,
 	showReusableBlocks = false,
 	onSelect,
+	prioritizePatterns,
 } ) {
 	const tabs = useMemo( () => {
-		const tempTabs = [ blocksTab ];
-
-		if ( showPatterns ) {
+		const tempTabs = [];
+		if ( prioritizePatterns && showPatterns ) {
+			tempTabs.push( patternsTab );
+		}
+		tempTabs.push( blocksTab );
+		if ( ! prioritizePatterns && showPatterns ) {
 			tempTabs.push( patternsTab );
 		}
-
 		if ( showReusableBlocks ) {
 			tempTabs.push( reusableBlocksTab );
 		}
 
 		return tempTabs;
 	}, [
+		prioritizePatterns,
 		blocksTab,
 		showPatterns,
 		patternsTab,

package/src/components/link-control/link-preview.js

@@ -123,9 +123,11 @@ export default function LinkPreview( {
 				<ViewerSlot fillProps={ value } />
 			</div>
 
-			{ ( ( hasRichData &&
-				( richData?.image || richData?.description ) ) ||
-				isFetching ) && (
+			{ !! (
+				( hasRichData &&
+					( richData?.image || richData?.description ) ) ||
+				isFetching
+			) && (
 				<div className="block-editor-link-control__search-item-bottom">
 					{ ( richData?.image || isFetching ) && (
 						<div

package/src/components/link-control/search-input.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
@@ -112,9 +111,10 @@ const LinkControlSearchInput = forwardRef(
 				allowDirectEntry ||
 				( suggestion && Object.keys( suggestion ).length >= 1 )
 			) {
+				const { id, url, ...restLinkProps } = currentLink;
 				onSelect(
 					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
-					{ ...omit( currentLink, 'id', 'url' ), ...suggestion },
+					{ ...restLinkProps, ...suggestion },
 					suggestion
 				);
 			}

package/src/components/link-control/search-item.js

@@ -9,7 +9,44 @@ import classnames from 'classnames';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 import { Button, TextHighlight } from '@wordpress/components';
-import { Icon, globe } from '@wordpress/icons';
+import {
+	Icon,
+	globe,
+	page,
+	tag,
+	postList,
+	category,
+	file,
+} from '@wordpress/icons';
+
+const ICONS_MAP = {
+	post: postList,
+	page,
+	post_tag: tag,
+	category,
+	attachment: file,
+};
+
+function SearchItemIcon( { isURL, suggestion } ) {
+	let icon = null;
+
+	if ( isURL ) {
+		icon = globe;
+	} else if ( suggestion.type in ICONS_MAP ) {
+		icon = ICONS_MAP[ suggestion.type ];
+	}
+
+	if ( icon ) {
+		return (
+			<Icon
+				className="block-editor-link-control__search-item-icon"
+				icon={ icon }
+			/>
+		);
+	}
+
+	return null;
+}
 
 export const LinkControlSearchItem = ( {
 	itemProps,
@@ -30,12 +67,7 @@ export const LinkControlSearchItem = ( {
 				'is-entity': ! isURL,
 			} ) }
 		>
-			{ isURL && (
-				<Icon
-					className="block-editor-link-control__search-item-icon"
-					icon={ globe }
-				/>
-			) }
+			<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
 
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">

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

@@ -58,11 +58,31 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
+
+	const { isLocked, isContentLocked } = useBlockLock( clientId );
+	const forceSelectionContentLock = useSelect(
+		( select ) => {
+			if ( isSelected ) {
+				return false;
+			}
+			if ( ! isContentLocked ) {
+				return false;
+			}
+			return select( blockEditorStore ).hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+		},
+		[ isContentLocked, clientId, isSelected ]
+	);
+
 	const isFirstSelectedBlock =
-		isSelected && selectedClientIds[ 0 ] === clientId;
+		forceSelectionContentLock ||
+		( isSelected && selectedClientIds[ 0 ] === clientId );
 	const isLastSelectedBlock =
-		isSelected &&
-		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
+		forceSelectionContentLock ||
+		( isSelected &&
+			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
@@ -80,7 +100,6 @@ function ListViewBlock( {
 		'__experimentalToolbar',
 		true
 	);
-	const { isLocked } = useBlockLock( clientId );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
@@ -181,7 +200,7 @@ function ListViewBlock( {
 	}
 
 	const classes = classnames( {
-		'is-selected': isSelected,
+		'is-selected': isSelected || forceSelectionContentLock,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
@@ -210,16 +229,16 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
-			isExpanded={ isExpanded }
-			aria-selected={ !! isSelected }
+			isExpanded={ isContentLocked ? undefined : isExpanded }
+			aria-selected={ !! isSelected || forceSelectionContentLock }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
 				aria-label={ blockAriaLabel }
-				aria-selected={ !! isSelected }
-				aria-expanded={ isExpanded }
+				aria-selected={ !! isSelected || forceSelectionContentLock }
+				aria-expanded={ isContentLocked ? undefined : isExpanded }
 				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
@@ -283,7 +302,7 @@ function ListViewBlock( {
 			{ showBlockActions && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected }
+					aria-selected={ !! isSelected || forceSelectionContentLock }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown

package/src/components/list-view/branch.js

@@ -2,14 +2,18 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
-import { AsyncModeProvider } from '@wordpress/data';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
 /**
  * Internal dependencies
  */
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -86,10 +90,27 @@ function ListViewBranch( props ) {
 		listPosition = 0,
 		fixedListWindow,
 		isExpanded,
+		parentId,
+		shouldShowInnerBlocks = true,
 	} = props;
 
+	const isContentLocked = useSelect(
+		( select ) => {
+			return !! (
+				parentId &&
+				select( blockEditorStore ).getTemplateLock( parentId ) ===
+					'contentOnly'
+			);
+		},
+		[ parentId ]
+	);
+
 	const { expandedState, draggedClientIds } = useListViewContext();
 
+	if ( isContentLocked ) {
+		return null;
+	}
+
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
 	let nextPosition = listPosition;
@@ -118,9 +139,10 @@ function ListViewBranch( props ) {
 						: `${ position }`;
 				const hasNestedBlocks = !! innerBlocks?.length;
 
-				const shouldExpand = hasNestedBlocks
-					? expandedState[ clientId ] ?? isExpanded
-					: undefined;
+				const shouldExpand =
+					hasNestedBlocks && shouldShowInnerBlocks
+						? expandedState[ clientId ] ?? isExpanded
+						: undefined;
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
 
@@ -161,6 +183,7 @@ function ListViewBranch( props ) {
 						) }
 						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
+								parentId={ clientId }
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
 								showBlockMovers={ showBlockMovers }

package/src/components/list-view/drop-indicator.js

@@ -68,40 +68,41 @@ export default function ListViewDropIndicator( {
 		};
 	}, [ getDropIndicatorIndent, targetElement ] );
 
-	const getAnchorRect = useCallback( () => {
-		if ( ! targetElement ) {
-			return {};
+	const popoverAnchor = useMemo( () => {
+		const isValidDropPosition =
+			dropPosition === 'top' ||
+			dropPosition === 'bottom' ||
+			dropPosition === 'inside';
+		if ( ! targetElement || ! isValidDropPosition ) {
+			return undefined;
 		}
 
-		const ownerDocument = targetElement.ownerDocument;
-		const rect = targetElement.getBoundingClientRect();
-		const indent = getDropIndicatorIndent();
-
-		const anchorRect = {
-			left: rect.left + indent,
-			right: rect.right,
-			width: 0,
-			height: 0,
-			ownerDocument,
+		return {
+			ownerDocument: targetElement.ownerDocument,
+			getBoundingClientRect() {
+				const rect = targetElement.getBoundingClientRect();
+				const indent = getDropIndicatorIndent();
+
+				const left = rect.left + indent;
+				const right = rect.right;
+				let top = 0;
+				let bottom = 0;
+
+				if ( dropPosition === 'top' ) {
+					top = rect.top;
+					bottom = rect.top;
+				} else {
+					// `dropPosition` is either `bottom` or `inside`
+					top = rect.bottom;
+					bottom = rect.bottom;
+				}
+
+				const width = right - left;
+				const height = bottom - top;
+
+				return new window.DOMRect( left, top, width, height );
+			},
 		};
-
-		if ( dropPosition === 'top' ) {
-			return {
-				...anchorRect,
-				top: rect.top,
-				bottom: rect.top,
-			};
-		}
-
-		if ( dropPosition === 'bottom' || dropPosition === 'inside' ) {
-			return {
-				...anchorRect,
-				top: rect.bottom,
-				bottom: rect.bottom,
-			};
-		}
-
-		return {};
 	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
 
 	if ( ! targetElement ) {
@@ -111,7 +112,7 @@ export default function ListViewDropIndicator( {
 	return (
 		<Popover
 			animate={ false }
-			getAnchorRect={ getAnchorRect }
+			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			className="block-editor-list-view-drop-indicator"
 		>

package/src/components/list-view/index.js

@@ -64,16 +64,20 @@ function ListView(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
-	const { visibleBlockCount } = useSelect(
+	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
-			const { getGlobalBlockCount, getClientIdsOfDescendants } =
-				select( blockEditorStore );
+			const {
+				getGlobalBlockCount,
+				getClientIdsOfDescendants,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
 			const draggedBlockCount =
 				draggedClientIds?.length > 0
 					? getClientIdsOfDescendants( draggedClientIds ).length + 1
 					: 0;
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
 			};
 		},
 		[ draggedClientIds ]
@@ -193,6 +197,7 @@ function ListView(
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
+						shouldShowInnerBlocks={ shouldShowInnerBlocks }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>

package/src/components/list-view/use-block-selection.js

@@ -32,7 +32,6 @@ export default function useBlockSelection() {
 	const updateBlockSelection = useCallback(
 		async ( event, clientId, destinationClientId ) => {
 			if ( ! event?.shiftKey ) {
-				await clearSelectedBlock();
 				selectBlock( clientId );
 				return;
 			}

package/src/components/media-placeholder/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -13,6 +13,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
 
 describe( 'MediaPlaceholder', () => {
 	it( 'renders successfully when allowedTypes property is not specified', () => {
-		expect( () => mount( <MediaPlaceholder /> ) ).not.toThrow();
+		expect( () => render( <MediaPlaceholder multiple /> ) ).not.toThrow();
 	} );
 } );

package/src/components/media-replace-flow/README.md

@@ -54,7 +54,7 @@ Callback used when media is replaced from the Media Library or when a new media
 Callback used when media is replaced with an URL. It is called with one argument `newURL` which is a `string` containing the new URL.
 
 -   Type: `func`
--   Required: Yes
+-   Required: No
 
 ### onError
 

package/src/components/provider/use-block-sync.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -152,7 +147,9 @@ export default function useBlockSync( {
 			// to allow that the consumer may apply modifications to reflect
 			// back on the editor.
 			if (
-				last( pendingChanges.current.outgoing ) === controlledBlocks
+				pendingChanges.current.outgoing[
+					pendingChanges.current.outgoing.length - 1
+				] === controlledBlocks
 			) {
 				pendingChanges.current.outgoing = [];
 			}

package/src/components/publish-date-time-picker/index.js

@@ -4,7 +4,7 @@
 import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { __experimentalGetSettings as getSettings } from '@wordpress/date';
+import { getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies