@wordpress/block-editor 12.0.0 → 12.2.0

package/src/components/off-canvas-editor/branch.js

@@ -1,238 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalTreeGridRow as TreeGridRow,
-	__experimentalTreeGridCell as TreeGridCell,
-} from '@wordpress/components';
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import { memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import { Appender } from './appender';
-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
- * the list position of a block.
- *
- * When a block is collapsed, we do not count their children as part of that total. In the current drag
- * implementation dragged blocks and their children are not counted.
- *
- * @param {Object}  block               block tree
- * @param {Object}  expandedState       state that notes which branches are collapsed
- * @param {Array}   draggedClientIds    a list of dragged client ids
- * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
- * @return {number} block count
- */
-function countBlocks(
-	block,
-	expandedState,
-	draggedClientIds,
-	isExpandedByDefault
-) {
-	const isDragged = draggedClientIds?.includes( block.clientId );
-	if ( isDragged ) {
-		return 0;
-	}
-	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
-
-	if ( isExpanded ) {
-		return (
-			1 +
-			block.innerBlocks.reduce(
-				countReducer(
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				),
-				0
-			)
-		);
-	}
-	return 1;
-}
-const countReducer =
-	( expandedState, draggedClientIds, isExpandedByDefault ) =>
-	( count, block ) => {
-		const isDragged = draggedClientIds?.includes( block.clientId );
-		if ( isDragged ) {
-			return count;
-		}
-		const isExpanded =
-			expandedState[ block.clientId ] ?? isExpandedByDefault;
-		if ( isExpanded && block.innerBlocks.length > 0 ) {
-			return (
-				count +
-				countBlocks(
-					block,
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				)
-			);
-		}
-		return count + 1;
-	};
-
-const noop = () => {};
-
-function ListViewBranch( props ) {
-	const {
-		blocks,
-		selectBlock = noop,
-		showBlockMovers,
-		selectedClientIds,
-		level = 1,
-		path = '',
-		isBranchSelected = false,
-		listPosition = 0,
-		fixedListWindow,
-		isExpanded,
-		parentId,
-		shouldShowInnerBlocks = true,
-		showAppender: showAppenderProp = true,
-	} = props;
-
-	const isContentLocked = useSelect(
-		( select ) => {
-			return !! (
-				parentId &&
-				select( blockEditorStore ).getTemplateLock( parentId ) ===
-					'contentOnly'
-			);
-		},
-		[ parentId ]
-	);
-
-	const { expandedState, draggedClientIds } = useListViewContext();
-
-	if ( isContentLocked ) {
-		return null;
-	}
-
-	// Only show the appender at the first level.
-	const showAppender = showAppenderProp && level === 1;
-
-	const filteredBlocks = blocks.filter( Boolean );
-	const blockCount = filteredBlocks.length;
-
-	// The appender means an extra row in List View, so add 1 to the row count.
-	const rowCount = showAppender ? blockCount + 1 : blockCount;
-	let nextPosition = listPosition;
-
-	return (
-		<>
-			{ filteredBlocks.map( ( block, index ) => {
-				const { clientId, innerBlocks } = block;
-
-				if ( index > 0 ) {
-					nextPosition += countBlocks(
-						filteredBlocks[ index - 1 ],
-						expandedState,
-						draggedClientIds,
-						isExpanded
-					);
-				}
-
-				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPosition );
-
-				const position = index + 1;
-				const updatedPath =
-					path.length > 0
-						? `${ path }_${ position }`
-						: `${ position }`;
-				const hasNestedBlocks = !! innerBlocks?.length;
-
-				const shouldExpand =
-					hasNestedBlocks && shouldShowInnerBlocks
-						? expandedState[ clientId ] ?? isExpanded
-						: undefined;
-
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
-				const showBlock = isDragged || blockInView;
-
-				// Make updates to the selected or dragged blocks synchronous,
-				// but asynchronous for any other block.
-				const isSelected = isClientIdSelected(
-					clientId,
-					selectedClientIds
-				);
-				const isSelectedBranch =
-					isBranchSelected || ( isSelected && hasNestedBlocks );
-				return (
-					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
-						{ showBlock && (
-							<ListViewBlock
-								block={ block }
-								selectBlock={ selectBlock }
-								isSelected={ isSelected }
-								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
-								level={ level }
-								position={ position }
-								rowCount={ rowCount }
-								siblingBlockCount={ blockCount }
-								showBlockMovers={ showBlockMovers }
-								path={ updatedPath }
-								isExpanded={ shouldExpand }
-								listPosition={ nextPosition }
-								selectedClientIds={ selectedClientIds }
-							/>
-						) }
-						{ ! showBlock && (
-							<tr>
-								<td className="block-editor-list-view-placeholder" />
-							</tr>
-						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
-							<ListViewBranch
-								parentId={ clientId }
-								blocks={ innerBlocks }
-								selectBlock={ selectBlock }
-								showBlockMovers={ showBlockMovers }
-								level={ level + 1 }
-								path={ updatedPath }
-								listPosition={ nextPosition + 1 }
-								fixedListWindow={ fixedListWindow }
-								isBranchSelected={ isSelectedBranch }
-								selectedClientIds={ selectedClientIds }
-								isExpanded={ isExpanded }
-								showAppender={ showAppenderProp }
-							/>
-						) }
-					</AsyncModeProvider>
-				);
-			} ) }
-			{ showAppender && (
-				<TreeGridRow
-					level={ level }
-					setSize={ rowCount }
-					positionInSet={ rowCount }
-					isExpanded={ true }
-				>
-					<TreeGridCell>
-						{ ( treeGridCellProps ) => (
-							<Appender
-								clientId={ parentId }
-								nestingLevel={ level }
-								blockCount={ blockCount }
-								{ ...treeGridCellProps }
-							/>
-						) }
-					</TreeGridCell>
-				</TreeGridRow>
-			) }
-		</>
-	);
-}
-
-export default memo( ListViewBranch );

package/src/components/off-canvas-editor/context.js

@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const ListViewContext = createContext( {} );
-
-export const useListViewContext = () => useContext( ListViewContext );

package/src/components/off-canvas-editor/drop-indicator.js

@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Popover } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-
-export default function ListViewDropIndicator( {
-	listViewRef,
-	blockDropTarget,
-} ) {
-	const { rootClientId, clientId, dropPosition } = blockDropTarget || {};
-
-	const [ rootBlockElement, blockElement ] = useMemo( () => {
-		if ( ! listViewRef.current ) {
-			return [];
-		}
-
-		// The rootClientId will be defined whenever dropping into inner
-		// block lists, but is undefined when dropping at the root level.
-		const _rootBlockElement = rootClientId
-			? listViewRef.current.querySelector(
-					`[data-block="${ rootClientId }"]`
-			  )
-			: undefined;
-
-		// The clientId represents the sibling block, the dragged block will
-		// usually be inserted adjacent to it. It will be undefined when
-		// dropping a block into an empty block list.
-		const _blockElement = clientId
-			? listViewRef.current.querySelector(
-					`[data-block="${ clientId }"]`
-			  )
-			: undefined;
-
-		return [ _rootBlockElement, _blockElement ];
-	}, [ rootClientId, clientId ] );
-
-	// The targetElement is the element that the drop indicator will appear
-	// before or after. When dropping into an empty block list, blockElement
-	// is undefined, so the indicator will appear after the rootBlockElement.
-	const targetElement = blockElement || rootBlockElement;
-
-	const getDropIndicatorIndent = useCallback( () => {
-		if ( ! rootBlockElement ) {
-			return 0;
-		}
-
-		// Calculate the indent using the block icon of the root block.
-		// Using a classname selector here might be flaky and could be
-		// improved.
-		const targetElementRect = targetElement.getBoundingClientRect();
-		const rootBlockIconElement = rootBlockElement.querySelector(
-			'.block-editor-block-icon'
-		);
-		const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-		return rootBlockIconRect.right - targetElementRect.left;
-	}, [ rootBlockElement, targetElement ] );
-
-	const style = useMemo( () => {
-		if ( ! targetElement ) {
-			return {};
-		}
-
-		const indent = getDropIndicatorIndent();
-
-		return {
-			width: targetElement.offsetWidth - indent,
-		};
-	}, [ getDropIndicatorIndent, targetElement ] );
-
-	const popoverAnchor = useMemo( () => {
-		const isValidDropPosition =
-			dropPosition === 'top' ||
-			dropPosition === 'bottom' ||
-			dropPosition === 'inside';
-		if ( ! targetElement || ! isValidDropPosition ) {
-			return undefined;
-		}
-
-		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 );
-			},
-		};
-	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
-
-	if ( ! targetElement ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			animate={ false }
-			anchor={ popoverAnchor }
-			focusOnMount={ false }
-			className="block-editor-list-view-drop-indicator"
-			variant="unstyled"
-		>
-			<div
-				style={ style }
-				className="block-editor-list-view-drop-indicator__line"
-			/>
-		</Popover>
-	);
-}

package/src/components/off-canvas-editor/expander.js

@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
-import { isRTL } from '@wordpress/i18n';
-
-export default function ListViewExpander( { onClick } ) {
-	return (
-		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
-		//
-		// The expander component is implemented as a pseudo element in the w3 example
-		// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
-		//
-		// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
-		// For the current tree grid implementation, please do not try to make this a button.
-		//
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-		<span
-			className="block-editor-list-view__expander"
-			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
-			aria-hidden="true"
-		>
-			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
-		</span>
-	);
-}

package/src/components/off-canvas-editor/index.js

@@ -1,271 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	useMergeRefs,
-	__experimentalUseFixedWindowList as useFixedWindowList,
-} from '@wordpress/compose';
-import {
-	__experimentalTreeGrid as TreeGrid,
-	__experimentalTreeGridRow as TreeGridRow,
-	__experimentalTreeGridCell as TreeGridCell,
-} from '@wordpress/components';
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useReducer,
-	forwardRef,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ListViewBranch from './branch';
-import { ListViewContext } from './context';
-import ListViewDropIndicator from './drop-indicator';
-import useBlockSelection from './use-block-selection';
-import useListViewClientIds from './use-list-view-client-ids';
-import useListViewDropZone from './use-list-view-drop-zone';
-import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
-import { store as blockEditorStore } from '../../store';
-
-const expanded = ( state, action ) => {
-	if ( Array.isArray( action.clientIds ) ) {
-		return {
-			...state,
-			...action.clientIds.reduce(
-				( newState, id ) => ( {
-					...newState,
-					[ id ]: action.type === 'expand',
-				} ),
-				{}
-			),
-		};
-	}
-	return state;
-};
-
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
-
-/**
- * Show a hierarchical list of blocks.
- *
- * @param {Object}   props                         Components props.
- * @param {string}   props.id                      An HTML element id for the root element of ListView.
- * @param {string}   props.parentClientId          The client id of the parent block.
- * @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}   props.LeafMoreMenu            Optional more menu substitution.
- * @param {string}   props.description             Optional accessible description for the tree grid component.
- * @param {string}   props.onSelect                Optional callback to be invoked when a block is selected.
- * @param {string}   props.showAppender            Flag to show or hide the block appender.
- * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
- * @param {Object}   ref                           Forwarded ref.
- */
-function OffCanvasEditor(
-	{
-		id,
-		parentClientId,
-		blocks,
-		showBlockMovers = false,
-		isExpanded = false,
-		showAppender = true,
-		LeafMoreMenu,
-		description = __( 'Block navigation structure' ),
-		onSelect,
-		renderAdditionalBlockUI,
-	},
-	ref
-) {
-	const { getBlock } = useSelect( blockEditorStore );
-	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
-
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
-		( select ) => {
-			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, blocks ]
-	);
-
-	const { updateBlockSelection } = useBlockSelection();
-
-	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
-
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
-	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
-
-	const isMounted = useRef( false );
-	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
-		firstSelectedBlockClientId: selectedClientIds[ 0 ],
-		setExpandedState,
-	} );
-	const selectEditorBlock = useCallback(
-		( event, blockClientId ) => {
-			updateBlockSelection( event, blockClientId );
-			setSelectedTreeId( blockClientId );
-			if ( onSelect ) {
-				onSelect( getBlock( blockClientId ) );
-			}
-		},
-		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
-	);
-	useEffect( () => {
-		isMounted.current = true;
-	}, [] );
-
-	// 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,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
-		}
-	);
-
-	const expand = useCallback(
-		( blockClientId ) => {
-			if ( ! blockClientId ) {
-				return;
-			}
-			setExpandedState( {
-				type: 'expand',
-				clientIds: [ blockClientId ],
-			} );
-		},
-		[ setExpandedState ]
-	);
-	const collapse = useCallback(
-		( blockClientId ) => {
-			if ( ! blockClientId ) {
-				return;
-			}
-			setExpandedState( {
-				type: 'collapse',
-				clientIds: [ blockClientId ],
-			} );
-		},
-		[ setExpandedState ]
-	);
-	const expandRow = useCallback(
-		( row ) => {
-			expand( row?.dataset?.block );
-		},
-		[ expand ]
-	);
-	const collapseRow = useCallback(
-		( row ) => {
-			collapse( row?.dataset?.block );
-		},
-		[ collapse ]
-	);
-	const focusRow = useCallback(
-		( event, startRow, endRow ) => {
-			if ( event.shiftKey ) {
-				updateBlockSelection(
-					event,
-					startRow?.dataset?.block,
-					endRow?.dataset?.block
-				);
-			}
-		},
-		[ updateBlockSelection ]
-	);
-
-	const contextValue = useMemo(
-		() => ( {
-			isTreeGridMounted: isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-			LeafMoreMenu,
-			renderAdditionalBlockUI,
-		} ),
-		[
-			isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-			LeafMoreMenu,
-			renderAdditionalBlockUI,
-		]
-	);
-
-	return (
-		<AsyncModeProvider value={ true }>
-			<ListViewDropIndicator
-				listViewRef={ elementRef }
-				blockDropTarget={ blockDropTarget }
-			/>
-			<div className="offcanvas-editor-list-view-tree-wrapper">
-				<TreeGrid
-					id={ id }
-					className="block-editor-list-view-tree"
-					aria-label={ __( 'Block navigation structure' ) }
-					ref={ treeGridRef }
-					onCollapseRow={ collapseRow }
-					onExpandRow={ expandRow }
-					onFocusRow={ focusRow }
-					// eslint-disable-next-line jsx-a11y/aria-props
-					aria-description={ description }
-				>
-					<ListViewContext.Provider value={ contextValue }>
-						<ListViewBranch
-							parentId={ parentClientId }
-							blocks={ clientIdsTree }
-							selectBlock={ selectEditorBlock }
-							showBlockMovers={ showBlockMovers }
-							fixedListWindow={ fixedListWindow }
-							selectedClientIds={ selectedClientIds }
-							isExpanded={ isExpanded }
-							shouldShowInnerBlocks={ shouldShowInnerBlocks }
-							showAppender={ showAppender }
-						/>
-						<TreeGridRow
-							level={ 1 }
-							setSize={ 1 }
-							positionInSet={ 1 }
-							isExpanded={ true }
-						>
-							{ ! clientIdsTree.length && (
-								<TreeGridCell withoutGridItem>
-									<div className="offcanvas-editor-list-view-is-empty">
-										{ __(
-											'Your menu is currently empty. Add your first menu item to get started.'
-										) }
-									</div>
-								</TreeGridCell>
-							) }
-						</TreeGridRow>
-					</ListViewContext.Provider>
-				</TreeGrid>
-			</div>
-		</AsyncModeProvider>
-	);
-}
-
-export default forwardRef( OffCanvasEditor );