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

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 ) ===
+					'noContent'
+			);
+		},
+		[ 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/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

package/src/components/rich-text/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,25 +60,27 @@ export const inputEventContext = createContext();
  * @return {Object} Filtered props.
  */
 function removeNativeProps( props ) {
-	return omit( props, [
-		'__unstableMobileNoFocusOnMount',
-		'deleteEnter',
-		'placeholderTextColor',
-		'textAlign',
-		'selectionColor',
-		'tagsToEliminate',
-		'rootTagsToEliminate',
-		'disableEditingMenu',
-		'fontSize',
-		'fontFamily',
-		'fontWeight',
-		'fontStyle',
-		'minWidth',
-		'maxWidth',
-		'setRef',
-		'disableSuggestions',
-		'disableAutocorrection',
-	] );
+	const {
+		__unstableMobileNoFocusOnMount,
+		deleteEnter,
+		placeholderTextColor,
+		textAlign,
+		selectionColor,
+		tagsToEliminate,
+		rootTagsToEliminate,
+		disableEditingMenu,
+		fontSize,
+		fontFamily,
+		fontWeight,
+		fontStyle,
+		minWidth,
+		maxWidth,
+		setRef,
+		disableSuggestions,
+		disableAutocorrection,
+		...restProps
+	} = props;
+	return restProps;
 }
 
 function RichTextWrapper(
@@ -331,7 +332,7 @@ function RichTextWrapper(
 	}
 
 	const TagName = tagName;
-	const content = (
+	return (
 		<>
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
@@ -423,19 +424,6 @@ function RichTextWrapper(
 			/>
 		</>
 	);
-
-	if ( ! wrapperClassName ) {
-		return content;
-	}
-
-	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
-		since: '5.4',
-		alternative: 'className prop or create your own wrapper div',
-		version: '6.2',
-	} );
-
-	const className = classnames( 'block-editor-rich-text', wrapperClassName );
-	return <div className={ className }>{ content }</div>;
 }
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -460,7 +448,8 @@ ForwardedRichTextContainer.Content = ( {
 	const content = <RawHTML>{ value }</RawHTML>;
 
 	if ( Tag ) {
-		return <Tag { ...omit( props, [ 'format' ] ) }>{ content }</Tag>;
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
 	}
 
 	return content;

package/src/components/rich-text/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +36,6 @@ import {
 	toHTMLString,
 	slice,
 } from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
 import { isURL } from '@wordpress/url';
 
 /**
@@ -59,7 +57,6 @@ import {
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 
-const wrapperClasses = 'block-editor-rich-text';
 const classes = 'block-editor-rich-text__editable';
 
 function RichTextWrapper(
@@ -114,6 +111,7 @@ function RichTextWrapper(
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
+		onEnter: onCustomEnter,
 		...props
 	},
 	forwardedRef
@@ -345,6 +343,10 @@ function RichTextWrapper(
 				}
 			}
 
+			if ( onCustomEnter ) {
+				onCustomEnter();
+			}
+
 			if ( multiline ) {
 				if ( shiftKey ) {
 					if ( ! disableLineBreaks ) {
@@ -578,7 +580,7 @@ function RichTextWrapper(
 
 	const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
 
-	const content = (
+	return (
 		<RichText
 			clientId={ clientId }
 			identifier={ identifier }
@@ -706,22 +708,6 @@ function RichTextWrapper(
 			) }
 		</RichText>
 	);
-
-	if ( ! wrapperClassName ) {
-		return content;
-	}
-
-	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
-		since: '5.4',
-		alternative: 'className prop or create your own wrapper div',
-		version: '6.2',
-	} );
-
-	return (
-		<div className={ classnames( wrapperClasses, wrapperClassName ) }>
-			{ content }
-		</div>
-	);
 }
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -746,7 +732,8 @@ ForwardedRichTextContainer.Content = ( {
 	const content = <RawHTML>{ value }</RawHTML>;
 
 	if ( Tag ) {
-		return <Tag { ...omit( props, [ 'format' ] ) }>{ content }</Tag>;
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
 	}
 
 	return content;

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,7 @@ export default function TextDecorationControl( {
 				'block-editor-text-decoration-control',
 				className
 			) }
-			__experimentalIsIconGroup
+			__experimentalIsBorderless
 			label={ __( 'Decoration' ) }
 			value={ value }
 			onChange={ onChange }

package/src/components/text-transform-control/index.js

@@ -47,7 +47,7 @@ export default function TextTransformControl( { value, onChange, ...props } ) {
 		<ToggleGroupControl
 			{ ...props }
 			className="block-editor-text-transform-control"
-			__experimentalIsIconGroup
+			__experimentalIsBorderless
 			label={ __( 'Letter case' ) }
 			value={ value }
 			onChange={ onChange }