@wordpress/block-editor 8.6.0 → 9.0.0

package/src/components/block-navigation/dropdown.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * WordPress dependencies
  */
@@ -36,10 +41,12 @@ function BlockNavigationDropdownToggle( {
 	);
 }
 
-function BlockNavigationDropdown(
-	{ isDisabled, __experimentalFeatures, ...props },
-	ref
-) {
+function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
+	deprecated( 'wp.blockEditor.BlockNavigationDropdown', {
+		since: '6.1',
+		alternative: 'wp.components.Dropdown and wp.blockEditor.ListView',
+	} );
+
 	const hasBlocks = useSelect(
 		( select ) => !! select( blockEditorStore ).getBlockCount(),
 		[]
@@ -65,10 +72,7 @@ function BlockNavigationDropdown(
 						{ __( 'List view' ) }
 					</p>
 
-					<ListView
-						showNestedBlocks
-						__experimentalFeatures={ __experimentalFeatures }
-					/>
+					<ListView />
 				</div>
 			) }
 		/>

package/src/components/block-popover/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { Popover } from '@wordpress/components';
 import { getScrollContainer } from '@wordpress/dom';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +20,8 @@ export default function BlockPopover( {
 	clientId,
 	bottomClientId,
 	children,
+	__unstableRefreshSize,
+	__unstableCoverTarget = false,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 	...props
@@ -26,6 +29,17 @@ export default function BlockPopover( {
 	const selectedElement = useBlockElement( clientId );
 	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const style = useMemo( () => {
+		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
 		return null;
@@ -50,24 +64,27 @@ export default function BlockPopover( {
 			position="top right left"
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
-			__unstableStickyBoundaryElement={ stickyBoundaryElement }
+			__unstableStickyBoundaryElement={
+				__unstableCoverTarget ? undefined : stickyBoundaryElement
+			}
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			__unstableBoundaryParent
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
-			shouldAnchorIncludePadding
 			// Used to safeguard sticky position behavior against cases where it would permanently
 			// obscure specific sections of a block.
 			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			__unstableForcePosition={ __unstableCoverTarget }
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
 				props.className
 			) }
 		>
-			{ children }
+			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
+			{ ! __unstableCoverTarget && children }
 		</Popover>
 	);
 }

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

@@ -2,6 +2,9 @@
 .components-popover.block-editor-block-popover {
 	z-index: z-index(".block-editor-block-popover");
 	position: absolute;
+	// Shouldn't be needed but it looks
+	// like the popover is impacted by the block gap margin.
+	margin: 0 !important;
 
 	.components-popover__content {
 		margin: 0 !important;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -231,7 +231,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             >
               <button
                 aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                className="components-button components-circular-option-picker__clear is-tertiary"
                 onClick={[Function]}
                 type="button"
               >

package/src/components/color-style-selector/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
 	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -78,14 +79,22 @@ const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
 	);
 };
 
-const BlockColorsStyleSelector = ( { children, ...other } ) => (
-	<Dropdown
-		position="bottom right"
-		className="block-library-colors-selector"
-		contentClassName="block-library-colors-selector__popover"
-		renderToggle={ renderToggleComponent( other ) }
-		renderContent={ () => children }
-	/>
-);
+const BlockColorsStyleSelector = ( { children, ...other } ) => {
+	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {
+		alternative: 'block supports API',
+		since: '6.1',
+		version: '6.3',
+	} );
+
+	return (
+		<Dropdown
+			position="bottom right"
+			className="block-library-colors-selector"
+			contentClassName="block-library-colors-selector__popover"
+			renderToggle={ renderToggleComponent( other ) }
+			renderContent={ () => children }
+		/>
+	);
+};
 
 export default BlockColorsStyleSelector;

package/src/components/image-size-control/README.md

@@ -25,7 +25,7 @@ const MyImageSizeControl = () => {
 			imageHeight={ imageHeight }
 		/>
 	);
-} );
+}
 ```
 
 ## Props

package/src/components/index.js

@@ -33,7 +33,6 @@ export {
 	BlockVerticalAlignmentControl,
 } from './block-vertical-alignment-control';
 export { default as __experimentalBorderRadiusControl } from './border-radius-control';
-export { default as __experimentalBorderStyleControl } from './border-style-control';
 export {
 	// This is a typo, but kept here for back-compat.
 	ButtonBlockerAppender,

package/src/components/inserter/index.js

@@ -30,6 +30,7 @@ const defaultRenderToggle = ( {
 	blockTitle,
 	hasSingleBlockType,
 	toggleProps = {},
+	prioritizePatterns,
 } ) => {
 	let label;
 	if ( hasSingleBlockType ) {
@@ -38,6 +39,8 @@ const defaultRenderToggle = ( {
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
+	} else if ( prioritizePatterns ) {
+		label = __( 'Add pattern' );
 	} else {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
@@ -106,6 +109,7 @@ class Inserter extends Component {
 			toggleProps,
 			hasItems,
 			renderToggle = defaultRenderToggle,
+			prioritizePatterns,
 		} = this.props;
 
 		return renderToggle( {
@@ -116,6 +120,7 @@ class Inserter extends Component {
 			hasSingleBlockType,
 			directInsertBlock,
 			toggleProps,
+			prioritizePatterns,
 		} );
 	}
 
@@ -138,6 +143,7 @@ class Inserter extends Component {
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
+			prioritizePatterns,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -149,6 +155,7 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
+					prioritizePatterns={ prioritizePatterns }
 				/>
 			);
 		}
@@ -206,7 +213,11 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 			__experimentalGetDirectInsertBlock,
+			getBlockIndex,
+			getBlockCount,
+			getSettings,
 		} = select( blockEditorStore );
+
 		const { getBlockVariations } = select( blocksStore );
 
 		rootClientId =
@@ -218,6 +229,10 @@ export default compose( [
 			rootClientId
 		);
 
+		const index = getBlockIndex( clientId );
+		const blockCount = getBlockCount();
+		const settings = getSettings();
+
 		const hasSingleBlockType =
 			size( allowedBlocks ) === 1 &&
 			size(
@@ -236,6 +251,11 @@ export default compose( [
 			allowedBlockType,
 			directInsertBlock,
 			rootClientId,
+			prioritizePatterns:
+				settings.__experimentalPreferPatternsOnRoot &&
+				! rootClientId &&
+				index > 0 &&
+				( index < blockCount || blockCount === 0 ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

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

@@ -52,7 +52,7 @@ const defaultRenderToggle = ( {
 	};
 	const expandedModeViewText = (
 		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
-			{ __( 'Add Blocks' ) }
+			{ __( 'Add blocks' ) }
 		</Text>
 	);
 

package/src/components/inserter/quick-inserter.js

@@ -30,6 +30,7 @@ export default function QuickInserter( {
 	rootClientId,
 	clientId,
 	isAppender,
+	prioritizePatterns,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -48,11 +49,7 @@ export default function QuickInserter( {
 		destinationRootClientId
 	);
 
-	const {
-		setInserterIsOpened,
-		insertionIndex,
-		prioritizePatterns,
-	} = useSelect(
+	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
@@ -63,15 +60,10 @@ export default function QuickInserter( {
 
 			return {
 				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
-				prioritizePatterns:
-					settings.__experimentalPreferPatternsOnRoot &&
-					! rootClientId &&
-					index > 0 &&
-					( index < blockCount || blockCount === 0 ),
 				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId ]
 	);
 
 	const showPatterns =

package/src/components/inserter/style.native.scss

@@ -27,6 +27,7 @@
 	color: $white;
 	font-weight: 500;
 	align-self: center;
+	text-transform: capitalize;
 }
 
 .inserter-menu__list-wrapper {

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -19,7 +20,7 @@ import {
 	useCallback,
 	memo,
 } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
@@ -66,6 +67,19 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockName = useSelect(
+		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+		[ clientId ]
+	);
+
+	// When a block hides its toolbar it also hides the block settings menu,
+	// since that menu is part of the toolbar in the editor canvas.
+	// List View respects this by also hiding the block settings menu.
+	const showBlockActions = hasBlockSupport(
+		blockName,
+		'__experimentalToolbar',
+		true
+	);
 	const { isLocked } = useBlockLock( clientId );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
@@ -98,14 +112,7 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		__experimentalHideContainerBlockActions: hideContainerBlockActions,
-		isTreeGridMounted,
-		expand,
-		collapse,
-	} = useListViewContext();
+	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -123,27 +130,19 @@ function ListViewBlock( {
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
 	useEffect( () => {
-		if (
-			withExperimentalPersistentListViewFeatures &&
-			! isTreeGridMounted &&
-			isSelected
-		) {
+		if ( ! isTreeGridMounted && isSelected ) {
 			cellRef.current.focus();
 		}
 	}, [] );
 
-	const highlightBlock = withExperimentalPersistentListViewFeatures
-		? toggleBlockHighlight
-		: () => {};
-
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
-		highlightBlock( clientId, true );
-	}, [ clientId, setIsHovered, highlightBlock ] );
+		toggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
 	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
-		highlightBlock( clientId, false );
-	}, [ clientId, setIsHovered, highlightBlock ] );
+		toggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
 
 	const selectEditorBlock = useCallback(
 		( event ) => {
@@ -174,18 +173,10 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
-	const showBlockActions =
-		withExperimentalFeatures &&
-		// hide actions for blocks like core/widget-areas
-		( ! hideContainerBlockActions ||
-			( hideContainerBlockActions && level > 1 ) );
-
-	const hideBlockActions = withExperimentalFeatures && ! showBlockActions;
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
-	} else if ( hideBlockActions ) {
+	} else if ( ! showBlockActions ) {
 		colSpan = 3;
 	}
 
@@ -193,10 +184,9 @@ function ListViewBlock( {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
-		'is-branch-selected':
-			withExperimentalPersistentListViewFeatures && isBranchSelected,
+		'is-branch-selected': isBranchSelected,
 		'is-dragging': isDragged,
-		'has-single-cell': hideBlockActions,
+		'has-single-cell': ! showBlockActions,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block

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

@@ -85,21 +85,16 @@ function ListViewBranch( props ) {
 		blocks,
 		selectBlock,
 		showBlockMovers,
-		showNestedBlocks,
 		selectedClientIds,
 		level = 1,
 		path = '',
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
-		expandNested,
+		isExpanded,
 	} = props;
 
-	const {
-		expandedState,
-		draggedClientIds,
-		__experimentalPersistentListViewFeatures,
-	} = useListViewContext();
+	const { expandedState, draggedClientIds } = useListViewContext();
 
 	const filteredBlocks = compact( blocks );
 	const blockCount = filteredBlocks.length;
@@ -115,26 +110,22 @@ function ListViewBranch( props ) {
 						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
-						expandNested
+						isExpanded
 					);
 				}
 
-				const usesWindowing = __experimentalPersistentListViewFeatures;
-
 				const { itemInView } = fixedListWindow;
-				const blockInView =
-					! usesWindowing || itemInView( nextPosition );
+				const blockInView = itemInView( nextPosition );
 
 				const position = index + 1;
 				const updatedPath =
 					path.length > 0
 						? `${ path }_${ position }`
 						: `${ position }`;
-				const hasNestedBlocks =
-					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
+				const hasNestedBlocks = !! innerBlocks?.length;
 
-				const isExpanded = hasNestedBlocks
-					? expandedState[ clientId ] ?? expandNested
+				const shouldExpand = hasNestedBlocks
+					? expandedState[ clientId ] ?? isExpanded
 					: undefined;
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
@@ -164,7 +155,7 @@ function ListViewBranch( props ) {
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
-								isExpanded={ isExpanded }
+								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
 							/>
@@ -174,19 +165,18 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && isExpanded && ! isDragged && (
+						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
 								showBlockMovers={ showBlockMovers }
-								showNestedBlocks={ showNestedBlocks }
 								level={ level + 1 }
 								path={ updatedPath }
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
-								expandNested={ expandNested }
+								isExpanded={ isExpanded }
 							/>
 						) }
 					</AsyncModeProvider>

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

@@ -3,9 +3,6 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
-export const ListViewContext = createContext( {
-	__experimentalFeatures: false,
-	__experimentalPersistentListViewFeatures: false,
-} );
+export const ListViewContext = createContext( {} );
 
 export const useListViewContext = () => useContext( ListViewContext );

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

@@ -48,33 +48,17 @@ const expanded = ( state, action ) => {
 export const BLOCK_LIST_ITEM_HEIGHT = 36;
 
 /**
- * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
- * recursive component (it renders itself), so this ensures TreeGrid is only
- * present at the very top of the navigation grid.
+ * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                                          Components props.
- * @param {Array}   props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showNestedBlocks                         Flag to enable displaying nested 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 {string}  props.id                                       Unique identifier for the root list element (primarily for a11y purposes).
- * @param {boolean} props.expandNested                             Flag to determine whether nested levels are expanded by default.
- * @param {Object}  ref                                            Forwarded ref
+ * @param {Object}  props                 Components props.
+ * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers Flag to enable block movers
+ * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
+ * @param {Object}  ref                   Forwarded ref
  */
 function ListView(
-	{
-		blocks,
-		__experimentalFeatures,
-		__experimentalPersistentListViewFeatures,
-		__experimentalHideContainerBlockActions,
-		showNestedBlocks,
-		showBlockMovers,
-		id,
-		expandNested = false,
-		...props
-	},
+	{ id, blocks, showBlockMovers = false, isExpanded = false },
 	ref
 ) {
 	const {
@@ -131,7 +115,7 @@ function ListView(
 		BLOCK_LIST_ITEM_HEIGHT,
 		visibleBlockCount,
 		{
-			useWindowing: __experimentalPersistentListViewFeatures,
+			useWindowing: true,
 			windowOverscan: 40,
 		}
 	);
@@ -181,25 +165,13 @@ function ListView(
 
 	const contextValue = useMemo(
 		() => ( {
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 		} ),
-		[
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
-			isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-		]
+		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
 	);
 
 	return (
@@ -221,12 +193,10 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						showNestedBlocks={ showNestedBlocks }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
-						expandNested={ expandNested }
-						{ ...props }
+						isExpanded={ isExpanded }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>

package/src/components/url-input/index.js

@@ -418,7 +418,7 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
-			label,
+			label = null,
 			className,
 			isFullWidth,
 			instanceId,
@@ -435,8 +435,10 @@ class URLInput extends Component {
 			suggestionOptionIdPrefix,
 		} = this.state;
 
+		const inputId = `url-input-control-${ instanceId }`;
+
 		const controlProps = {
-			id: `url-input-control-${ instanceId }`,
+			id: inputId, // Passes attribute to label for the for attribute
 			label,
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
@@ -444,6 +446,7 @@ class URLInput extends Component {
 		};
 
 		const inputProps = {
+			id: inputId,
 			value,
 			required: true,
 			className: 'block-editor-url-input__input',
@@ -453,7 +456,7 @@ class URLInput extends Component {
 			placeholder,
 			onKeyDown: this.onKeyDown,
 			role: 'combobox',
-			'aria-label': __( 'URL' ),
+			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
 			'aria-owns': suggestionsListboxId,