@wordpress/block-editor 7.0.3 → 7.0.4

package/src/components/inserter/hooks/use-clipboard-block.native.js

@@ -21,12 +21,13 @@ export default function useClipboardBlock( destinationRootClientId ) {
 		clipboardBlock?.name,
 		destinationRootClientId
 	);
+	const blockType = getBlockType( clipboardBlock?.name );
 
-	if ( ! canAddClipboardBlock ) {
+	if ( ! canAddClipboardBlock || ! blockType ) {
 		return undefined;
 	}
 
-	const { icon, name } = getBlockType( clipboardBlock.name );
+	const { name, icon } = blockType;
 	const { attributes: initialAttributes, innerBlocks } = clipboardBlock;
 
 	return {

package/src/components/inserter/preview-panel.js

@@ -22,7 +22,7 @@ function InserterPreviewPanel( { item } ) {
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
-				{ isReusable || hoveredItemBlockType.example ? (
+				{ isReusable || hoveredItemBlockType?.example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							__experimentalPadding={ 16 }

package/src/components/inserter/style.scss

@@ -117,12 +117,11 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__tabs {
 	display: flex;
 	flex-direction: column;
-	margin-top: -$grid-unit-10;
 
 	.components-tab-panel__tabs {
 		position: sticky;
 		// Computed based off the search input height and paddings
-		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60;
+		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;

package/src/components/inspector-controls/block-support-slot-container.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+	const toolsPanelContext = useContext( ToolsPanelContext );
+	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+}

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -10,7 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
-export default function BlockSupportToolsPanel( { children, label, header } ) {
+export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { clientId, attributes } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } = select(
 			blockEditorStore
@@ -46,11 +46,13 @@ export default function BlockSupportToolsPanel( { children, label, header } ) {
 
 	return (
 		<ToolsPanel
+			className={ `${ group }-block-support-panel` }
 			label={ label }
-			header={ header }
 			resetAll={ resetAll }
 			key={ clientId }
 			panelId={ clientId }
+			hasInnerWrapper={ true }
+			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 		>
 			{ children }
 		</ToolsPanel>

package/src/components/inspector-controls/fill.js

@@ -1,7 +1,15 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import {
+	__experimentalStyleProvider as StyleProvider,
+	__experimentalToolsPanelContext as ToolsPanelContext,
+} from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -26,7 +34,20 @@ export default function InspectorControlsFill( {
 
 	return (
 		<StyleProvider document={ document }>
-			<Fill>{ children }</Fill>
+			<Fill>
+				{ ( fillProps ) => {
+					// Children passed to InspectorControlsFill will not have
+					// access to any React Context whose Provider is part of
+					// the InspectorControlsSlot tree. So we re-create the
+					// Provider in this subtree.
+					const value = ! isEmpty( fillProps ) ? fillProps : null;
+					return (
+						<ToolsPanelContext.Provider value={ value }>
+							{ children }
+						</ToolsPanelContext.Provider>
+					);
+				} }
+			</Fill>
 		</StyleProvider>
 	);
 }

package/src/components/inspector-controls/slot.js

@@ -8,6 +8,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import BlockSupportToolsPanel from './block-support-tools-panel';
+import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
@@ -31,7 +32,11 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<Slot { ...props } bubblesVirtually={ bubblesVirtually } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					bubblesVirtually={ bubblesVirtually }
+					Slot={ Slot }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}

package/src/components/link-control/style.scss

@@ -132,12 +132,16 @@ $preview-image-height: 140px;
 	border: none;
 	text-align: left;
 	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 5px;
+	border-radius: 2px;
 	height: auto;
 
 	&:hover,
 	&:focus {
-		background-color: $gray-300;
+		background-color: $gray-100;
+
+		.block-editor-link-control__search-item-type {
+			background: $white;
+		}
 	}
 
 	// The added specificity is needed to override.
@@ -231,7 +235,7 @@ $preview-image-height: 140px;
 
 		mark {
 			font-weight: 700;
-			color: $black;
+			color: inherit;
 			background-color: transparent;
 		}
 
@@ -258,7 +262,7 @@ $preview-image-height: 140px;
 
 	.block-editor-link-control__search-item-type {
 		display: block;
-		padding: 3px 8px;
+		padding: 3px 6px;
 		margin-left: auto;
 		font-size: 0.9em;
 		background-color: $gray-100;
@@ -407,7 +411,7 @@ $preview-image-height: 140px;
 	}
 }
 
-// Specificity overide
+// Specificity override
 .block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
 	padding: 10px;
 }

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

@@ -12,8 +12,6 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useListViewContext } from './context';
-import ListViewBlockSlot from './block-slot';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -32,8 +30,6 @@ const ListViewBlockContents = forwardRef(
 		},
 		ref
 	) => {
-		const { __experimentalFeatures } = useListViewContext();
-
 		const { clientId } = block;
 
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
@@ -61,40 +57,23 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<BlockDraggable clientIds={ [ block.clientId ] }>
-				{ ( { draggable, onDragStart, onDragEnd } ) =>
-					__experimentalFeatures ? (
-						<ListViewBlockSlot
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable && __experimentalFeatures }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					) : (
-						<ListViewBlockSelectButton
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onClick={ onClick }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					)
-				}
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<ListViewBlockSelectButton
+						ref={ ref }
+						className={ className }
+						block={ block }
+						onClick={ onClick }
+						onToggleExpanded={ onToggleExpanded }
+						isSelected={ isSelected }
+						position={ position }
+						siblingBlockCount={ siblingBlockCount }
+						level={ level }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+						{ ...props }
+					/>
+				) }
 			</BlockDraggable>
 		);
 	}

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

@@ -9,13 +9,10 @@ import classnames from 'classnames';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -49,23 +46,14 @@ export default function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
-	const blockParents = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlockParents( clientId );
-		},
-		[ clientId ]
-	);
 
-	const {
-		selectBlock: selectEditorBlock,
-		toggleBlockHighlight,
-	} = useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
 		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered }
+		{ 'is-visible': isHovered || isSelected }
 	);
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
@@ -74,7 +62,7 @@ export default function ListViewBlock( {
 	} = useListViewContext();
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered }
+		{ 'is-visible': isHovered || isSelected }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -90,14 +78,6 @@ export default function ListViewBlock( {
 		}
 	}, [] );
 
-	// If ListView has experimental features (such as drag and drop) enabled,
-	// leave the focus handling as it was before, to avoid accidental regressions.
-	useEffect( () => {
-		if ( withExperimentalFeatures && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [ withExperimentalFeatures, isSelected ] );
-
 	const highlightBlock = withExperimentalPersistentListViewFeatures
 		? toggleBlockHighlight
 		: () => {};
@@ -198,38 +178,13 @@ export default function ListViewBlock( {
 							icon={ moreVertical }
 							toggleProps={ {
 								ref,
+								className: 'block-editor-list-view-block__menu',
 								tabIndex,
 								onFocus,
 							} }
 							disableOpenOnArrowDown
 							__experimentalSelectBlock={ onClick }
-						>
-							{ ( { onClose } ) => (
-								<MenuGroup>
-									<MenuItem
-										onClick={ async () => {
-											if ( blockParents.length ) {
-												// If the block to select is inside a dropdown, we need to open the dropdown.
-												// Otherwise focus won't transfer to the block.
-												for ( const parent of blockParents ) {
-													await selectEditorBlock(
-														parent
-													);
-												}
-											} else {
-												// If clientId is already selected, it won't be focused (see block-wrapper.js)
-												// This removes the selection first to ensure the focus will always switch.
-												await selectEditorBlock( null );
-											}
-											await selectEditorBlock( clientId );
-											onClose();
-										} }
-									>
-										{ __( 'Go to block' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</BlockSettingsDropdown>
+						/>
 					) }
 				</TreeGridCell>
 			) }

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,30 +30,31 @@
 		}
 	}
 	&.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 {
@@ -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,37 @@
 		}
 	}
 
+	.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;
+			}
+		}
+	}
+	.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 +148,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 +169,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 +275,6 @@
 	}
 }
 
-.block-editor-list-view-block-slot__description,
 .block-editor-list-view-block-select-button__description,
 .block-editor-list-view-appender__description {
 	display: none;

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

@@ -76,6 +76,9 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
+	mediaLibraryButton,
+	placeholder,
+	style,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -178,7 +181,7 @@ export function MediaPlaceholder( {
 		onFilesUpload( event.target.files );
 	};
 
-	const renderPlaceholder = ( content ) => {
+	const defaultRenderPlaceholder = ( content ) => {
 		let { instructions, title } = labels;
 
 		if ( ! mediaUpload && ! onSelectURL ) {
@@ -246,12 +249,14 @@ export function MediaPlaceholder( {
 				notices={ notices }
 				onDoubleClick={ onDoubleClick }
 				preview={ mediaPreview }
+				style={ style }
 			>
 				{ content }
 				{ children }
 			</Placeholder>
 		);
 	};
+	const renderPlaceholder = placeholder ?? defaultRenderPlaceholder;
 
 	const renderDropZone = () => {
 		if ( disableDropZone ) {
@@ -304,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() }
@@ -316,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 }
 			/>
 		);
 
@@ -352,7 +359,7 @@ export function MediaPlaceholder( {
 									>
 										{ __( 'Upload' ) }
 									</Button>
-									{ mediaLibraryButton }
+									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
 									{ renderCancelLink() }
 								</>
@@ -380,7 +387,7 @@ export function MediaPlaceholder( {
 					>
 						{ __( 'Upload' ) }
 					</FormFileUpload>
-					{ mediaLibraryButton }
+					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderCancelLink() }
 				</>
@@ -388,7 +395,7 @@ export function MediaPlaceholder( {
 			return renderPlaceholder( content );
 		}
 
-		return renderPlaceholder( mediaLibraryButton );
+		return renderPlaceholder( uploadMediaLibraryButton );
 	};
 
 	if ( dropZoneUIOnly || disableMediaButtons ) {

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

@@ -76,3 +76,10 @@ Removes a media replace notice.
 
 -   Type: `func`
 -   Required: No
+
+### children
+
+-   Type: `Element`
+-   Required: No
+
+If passed, children are rendered inside the dropdown.

package/src/components/media-replace-flow/index.js

@@ -42,6 +42,7 @@ const MediaReplaceFlow = ( {
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
+	children,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -161,6 +162,7 @@ const MediaReplaceFlow = ( {
 								} }
 							/>
 						</MediaUploadCheck>
+						{ children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions