@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -1,16 +1,19 @@
 /**
  * WordPress dependencies
  */
-
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	__experimentalUseFixedWindowList as useFixedWindowList,
+} from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
 	useMemo,
 	useRef,
 	useReducer,
+	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -45,24 +48,46 @@ const expanded = ( state, action ) => {
  * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {Function} props.onSelect                                 Block selection callback.
  * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean}  props.showOnlyCurrentHierarchy                 Flag to limit the list to the current hierarchy of blocks.
+ * @param {boolean}  props.showBlockMovers                          Flag to enable block movers
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
+ * @param {boolean}  props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
+ * @param {Object}   ref                                            Forwarded ref
  */
-export default function ListView( {
-	blocks,
-	showOnlyCurrentHierarchy,
-	onSelect = noop,
-	__experimentalFeatures,
-	__experimentalPersistentListViewFeatures,
-	...props
-} ) {
-	const { clientIdsTree, selectedClientIds } = useListViewClientIds(
+function ListView(
+	{
 		blocks,
-		showOnlyCurrentHierarchy,
-		__experimentalPersistentListViewFeatures
-	);
+		onSelect = noop,
+		__experimentalFeatures,
+		__experimentalPersistentListViewFeatures,
+		__experimentalHideContainerBlockActions,
+		showNestedBlocks,
+		showBlockMovers,
+		...props
+	},
+	ref
+) {
+	const {
+		clientIdsTree,
+		draggedClientIds,
+		selectedClientIds,
+	} = useListViewClientIds( blocks );
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const { visibleBlockCount } = useSelect(
+		( select ) => {
+			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
+				blockEditorStore
+			);
+			const draggedBlockCount =
+				draggedClientIds?.length > 0
+					? getClientIdsOfDescendants( draggedClientIds ).length + 1
+					: 0;
+			return {
+				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+			};
+		},
+		[ draggedClientIds ]
+	);
 	const selectEditorBlock = useCallback(
 		( clientId ) => {
 			selectBlock( clientId );
@@ -74,37 +99,64 @@ export default function ListView( {
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
 	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef ] );
+	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
 	const isMounted = useRef( false );
 	useEffect( () => {
 		isMounted.current = true;
 	}, [] );
 
-	const expand = ( clientId ) => {
-		if ( ! clientId ) {
-			return;
+	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		36,
+		visibleBlockCount,
+		{
+			useWindowing: __experimentalPersistentListViewFeatures,
+			windowOverscan: 40,
 		}
-		setExpandedState( { type: 'expand', clientId } );
-	};
-	const collapse = ( clientId ) => {
-		if ( ! clientId ) {
-			return;
-		}
-		setExpandedState( { type: 'collapse', clientId } );
-	};
-	const expandRow = ( row ) => {
-		expand( row?.dataset?.block );
-	};
-	const collapseRow = ( row ) => {
-		collapse( row?.dataset?.block );
-	};
+	);
+
+	const expand = useCallback(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'expand', clientId } );
+		},
+		[ setExpandedState ]
+	);
+	const collapse = useCallback(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'collapse', clientId } );
+		},
+		[ setExpandedState ]
+	);
+	const expandRow = useCallback(
+		( row ) => {
+			expand( row?.dataset?.block );
+		},
+		[ expand ]
+	);
+	const collapseRow = useCallback(
+		( row ) => {
+			collapse( row?.dataset?.block );
+		},
+		[ collapse ]
+	);
 
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
+			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -112,7 +164,9 @@ export default function ListView( {
 		[
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isMounted.current,
+			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -120,7 +174,7 @@ export default function ListView( {
 	);
 
 	return (
-		<>
+		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
@@ -136,11 +190,15 @@ export default function ListView( {
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						selectedBlockClientIds={ selectedClientIds }
+						showNestedBlocks={ showNestedBlocks }
+						showBlockMovers={ showBlockMovers }
+						fixedListWindow={ fixedListWindow }
+						selectedClientIds={ selectedClientIds }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>
-		</>
+		</AsyncModeProvider>
 	);
 }
+export default forwardRef( ListView );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { animated } from 'react-spring/web.cjs';
+import { animated } from '@react-spring/web';
 import classnames from 'classnames';
 
 /**
@@ -30,7 +30,7 @@ export default function ListViewLeaf( {
 		isSelected,
 		adjustScrolling: false,
 		enableAnimation: true,
-		triggerAnimationOnChange: path.join( '_' ),
+		triggerAnimationOnChange: path,
 	} );
 
 	return (

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

@@ -26,6 +26,9 @@ export default function ListViewListItem( {
 	children,
 } ) {
 	const blockType = getBlockType( block.name );
+	const blockLabel = blockType
+		? getBlockLabel( blockType, block.attributes )
+		: null;
 
 	return (
 		<div className="block-editor-list-view__list-item">
@@ -38,10 +41,8 @@ export default function ListViewListItem( {
 				) }
 				onClick={ onClick }
 			>
-				<BlockIcon icon={ blockType.icon } showColors />
-				{ children
-					? children
-					: getBlockLabel( blockType, block.attributes ) }
+				<BlockIcon icon={ blockType?.icon } showColors />
+				{ children ? children : blockLabel }
 				{ isSelected && (
 					<VisuallyHidden as="span">
 						{ __( '(selected block)' ) }

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

@@ -15,10 +15,14 @@
 	// Use position relative for row animation.
 	position: relative;
 
-	&.is-selected .block-editor-list-view-block-contents {
+	&.is-selected {
 		background: var(--wp-admin-theme-color);
+	}
+	&.is-selected .block-editor-list-view-block-contents,
+	&.is-selected .components-button.has-icon {
 		color: $white;
-
+	}
+	&.is-selected .block-editor-list-view-block-contents {
 		// Hide selection styles while a user is dragging blocks/files etc.
 		.is-dragging-components-draggable & {
 			background: none;
@@ -26,40 +30,41 @@
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents:focus {
-		box-shadow:
-			inset 0 0 0 1px $white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Hide focus styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			box-shadow: none;
+		&::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+	&.is-selected .block-editor-list-view-block__menu:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
+	}
 
+	&.is-branch-selected:not(.is-selected) {
+		// Lighten a CSS variable without introducing a new SASS variable
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+	}
 	&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
 		border-radius: 2px 2px 0 0;
 	}
-
 	&[aria-expanded="false"] {
 		&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
 			border-radius: 2px;
 		}
 	}
 	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 		border-radius: 0;
 	}
-	&.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
-		border-radius: 0 0 2px 2px;
-	}
 
 	&.is-dragging {
 		display: none;
 	}
 
+	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
@@ -72,19 +77,6 @@
 		position: relative;
 		white-space: nowrap;
 
-		&:hover,
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-			// Hide hover styles while a user is dragging blocks/files etc.
-			.is-dragging-components-draggable & {
-				box-shadow: none;
-			}
-		}
-		&:focus {
-			z-index: 1;
-		}
-
 		&.is-dropping-before::before {
 			content: "";
 			position: absolute;
@@ -102,6 +94,42 @@
 		}
 	}
 
+	.block-editor-list-view-block-contents:focus {
+		box-shadow: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: -(24px + 5px); // Icon size + padding.
+			bottom: 0;
+			left: 0;
+			border-radius: inherit;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			z-index: 1;
+			pointer-events: none;
+
+			// Hide focus styles while a user is dragging blocks/files etc.
+			.is-dragging-components-draggable & {
+				box-shadow: none;
+			}
+		}
+	}
+	// Fix focus styling width when one row has fewer cells.
+	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
+		right: 0;
+	}
+
+	.block-editor-list-view-block__menu:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		z-index: 1;
+
+		// Hide focus styles while a user is dragging blocks/files etc.
+		.is-dragging-components-draggable & {
+			box-shadow: none;
+		}
+	}
+
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
 		@include edit-post__fade-in-animation;
@@ -125,7 +153,7 @@
 		line-height: 0;
 		width: $button-size;
 		opacity: 0;
-		vertical-align: top;
+		vertical-align: middle;
 		@include reduce-motion("transition");
 
 		// Show on hover, visible, and show above to keep the hit area size.
@@ -146,7 +174,11 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-top: $grid-unit-10;
+		padding-right: 5px;
+
+		.components-button.has-icon {
+			height: 24px;
+		}
 	}
 
 	.block-editor-list-view-block__mover-cell-alignment-wrapper {
@@ -248,7 +280,6 @@
 	}
 }
 
-.block-editor-list-view-block-slot__description,
 .block-editor-list-view-block-select-button__description,
 .block-editor-list-view-appender__description {
 	display: none;
@@ -329,3 +360,9 @@ $block-navigation-max-indent: 8;
 	box-shadow: none;
 }
 
+.block-editor-list-view-placeholder {
+	padding: 0;
+	margin: 0;
+	height: 36px;
+}
+

package/src/components/list-view/use-list-view-client-ids.js

@@ -7,82 +7,23 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 
-const useListViewSelectedClientIds = (
-	__experimentalPersistentListViewFeatures
-) =>
-	useSelect(
+export default function useListViewClientIds( blocks ) {
+	return useSelect(
 		( select ) => {
 			const {
-				getSelectedBlockClientId,
+				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-			} = select( blockEditorStore );
-
-			if ( __experimentalPersistentListViewFeatures ) {
-				return getSelectedBlockClientIds();
-			}
-
-			return getSelectedBlockClientId();
-		},
-		[ __experimentalPersistentListViewFeatures ]
-	);
-
-const useListViewClientIdsTree = (
-	blocks,
-	selectedClientIds,
-	showOnlyCurrentHierarchy
-) =>
-	useSelect(
-		( select ) => {
-			const {
-				getBlockHierarchyRootClientId,
 				__unstableGetClientIdsTree,
-				__unstableGetClientIdWithClientIdsTree,
 			} = select( blockEditorStore );
 
-			if ( blocks ) {
-				return blocks;
-			}
-
-			const isSingleBlockSelected =
-				selectedClientIds && ! Array.isArray( selectedClientIds );
-			if ( ! showOnlyCurrentHierarchy || ! isSingleBlockSelected ) {
-				return __unstableGetClientIdsTree();
-			}
-
-			const rootBlock = __unstableGetClientIdWithClientIdsTree(
-				getBlockHierarchyRootClientId( selectedClientIds )
-			);
-			if ( ! rootBlock ) {
-				return __unstableGetClientIdsTree();
-			}
-
-			const hasHierarchy =
-				! isClientIdSelected( rootBlock.clientId, selectedClientIds ) ||
-				( rootBlock.innerBlocks && rootBlock.innerBlocks.length !== 0 );
-			if ( hasHierarchy ) {
-				return [ rootBlock ];
-			}
-
-			return __unstableGetClientIdsTree();
+			return {
+				selectedClientIds: getSelectedBlockClientIds(),
+				draggedClientIds: getDraggedBlockClientIds(),
+				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
+			};
 		},
-		[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
-	);
-
-export default function useListViewClientIds(
-	blocks,
-	showOnlyCurrentHierarchy,
-	__experimentalPersistentListViewFeatures
-) {
-	const selectedClientIds = useListViewSelectedClientIds(
-		__experimentalPersistentListViewFeatures
-	);
-	const clientIdsTree = useListViewClientIdsTree(
-		blocks,
-		selectedClientIds,
-		showOnlyCurrentHierarchy
+		[ blocks ]
 	);
-	return { clientIdsTree, selectedClientIds };
 }

package/src/components/media-placeholder/README.md

@@ -188,6 +188,15 @@ Callback called when urls can be configured. No media insertion from url will be
 -   Required: No
 -   Platform: Web
 
+### handleUpload
+
+When set to false the handling of the upload is left to the calling component.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+-   Platform: Web
+
 ## Extend
 
 It includes a `wp.hooks` filter `editor.MediaPlaceholder` that enables developers to replace or extend it.

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

@@ -36,7 +36,7 @@ const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 		>
 			<input
 				className="block-editor-media-placeholder__url-input-field"
-				type="url"
+				type="text"
 				aria-label={ __( 'URL' ) }
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
@@ -64,6 +64,7 @@ export function MediaPlaceholder( {
 	accept,
 	addToGallery,
 	multiple = false,
+	handleUpload = true,
 	dropZoneUIOnly,
 	disableDropZone,
 	disableMediaButtons,
@@ -75,6 +76,9 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
+	mediaLibraryButton,
+	placeholder,
+	style,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -118,6 +122,9 @@ export function MediaPlaceholder( {
 	};
 
 	const onFilesUpload = ( files ) => {
+		if ( ! handleUpload ) {
+			return onSelect( files );
+		}
 		onFilesPreUpload( files );
 		let setMedia;
 		if ( multiple ) {
@@ -174,7 +181,7 @@ export function MediaPlaceholder( {
 		onFilesUpload( event.target.files );
 	};
 
-	const renderPlaceholder = ( content, onClick ) => {
+	const defaultRenderPlaceholder = ( content ) => {
 		let { instructions, title } = labels;
 
 		if ( ! mediaUpload && ! onSelectURL ) {
@@ -240,15 +247,16 @@ export function MediaPlaceholder( {
 				instructions={ instructions }
 				className={ placeholderClassName }
 				notices={ notices }
-				onClick={ onClick }
 				onDoubleClick={ onDoubleClick }
 				preview={ mediaPreview }
+				style={ style }
 			>
 				{ content }
 				{ children }
 			</Placeholder>
 		);
 	};
+	const renderPlaceholder = placeholder ?? defaultRenderPlaceholder;
 
 	const renderDropZone = () => {
 		if ( disableDropZone ) {
@@ -301,7 +309,20 @@ export function MediaPlaceholder( {
 	};
 
 	const renderMediaUploadChecked = () => {
-		const mediaLibraryButton = (
+		const defaultButton = ( { open } ) => {
+			return (
+				<Button
+					variant="tertiary"
+					onClick={ () => {
+						open();
+					} }
+				>
+					{ __( 'Media Library' ) }
+				</Button>
+			);
+		};
+		const libraryButton = mediaLibraryButton ?? defaultButton;
+		const uploadMediaLibraryButton = (
 			<MediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
@@ -313,18 +334,7 @@ export function MediaPlaceholder( {
 						? value.map( ( { id } ) => id )
 						: value.id
 				}
-				render={ ( { open } ) => {
-					return (
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								open();
-							} }
-						>
-							{ __( 'Media Library' ) }
-						</Button>
-					);
-				} }
+				render={ libraryButton }
 			/>
 		);
 
@@ -345,15 +355,16 @@ export function MediaPlaceholder( {
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
+										onClick={ openFileDialog }
 									>
 										{ __( 'Upload' ) }
 									</Button>
-									{ mediaLibraryButton }
+									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
 									{ renderCancelLink() }
 								</>
 							);
-							return renderPlaceholder( content, openFileDialog );
+							return renderPlaceholder( content );
 						} }
 					/>
 				</>
@@ -376,7 +387,7 @@ export function MediaPlaceholder( {
 					>
 						{ __( 'Upload' ) }
 					</FormFileUpload>
-					{ mediaLibraryButton }
+					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderCancelLink() }
 				</>
@@ -384,7 +395,7 @@ export function MediaPlaceholder( {
 			return renderPlaceholder( content );
 		}
 
-		return renderPlaceholder( mediaLibraryButton );
+		return renderPlaceholder( uploadMediaLibraryButton );
 	};
 
 	if ( dropZoneUIOnly || disableMediaButtons ) {

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

@@ -38,6 +38,7 @@ function MediaPlaceholder( props ) {
 		labels = {},
 		icon,
 		onSelect,
+		onFocus,
 		__experimentalOnlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
@@ -175,7 +176,7 @@ function MediaPlaceholder( props ) {
 							accessibilityRole={ 'button' }
 							accessibilityHint={ accessibilityHint }
 							onPress={ ( event ) => {
-								props.onFocus( event );
+								onFocus?.( event );
 								open();
 							} }
 						>

package/src/components/media-placeholder/style.scss

@@ -11,6 +11,8 @@
 	// Selector requires a lot of specificity to override base styles.
 	input[type="url"].block-editor-media-placeholder__url-input-field {
 		width: 100%;
+		min-width: 200px;
+
 		@include break-small() {
 			width: 300px;
 		}