@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -1,347 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalTreeGridCell as TreeGridCell,
-	__experimentalTreeGridItem as TreeGridItem,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { moreVertical } from '@wordpress/icons';
-import {
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	memo,
-} from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ListViewLeaf from './leaf';
-import {
-	BlockMoverUpButton,
-	BlockMoverDownButton,
-} from '../block-mover/button';
-import ListViewBlockContents from './block-contents';
-import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
-import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
-import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
-import { useBlockLock } from '../block-lock';
-
-function ListViewBlock( {
-	block: { clientId },
-	isDragged,
-	isSelected,
-	isBranchSelected,
-	selectBlock,
-	position,
-	level,
-	rowCount,
-	siblingBlockCount,
-	showBlockMovers,
-	path,
-	isExpanded,
-	selectedClientIds,
-	preventAnnouncement,
-} ) {
-	const cellRef = useRef( null );
-	const [ isHovered, setIsHovered ] = useState( false );
-
-	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 =
-		forceSelectionContentLock ||
-		( isSelected && selectedClientIds[ 0 ] === clientId );
-	const isLastSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected &&
-			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
-
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
-		[ clientId ]
-	);
-
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
-	const onMouseEnter = useCallback( () => {
-		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-	const onMouseLeave = useCallback( () => {
-		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-
-	const selectEditorBlock = useCallback(
-		( event ) => {
-			selectBlock( event, clientId );
-			event.preventDefault();
-		},
-		[ clientId, selectBlock ]
-	);
-
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
-		},
-		[ selectBlock ]
-	);
-
-	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
-		useListViewContext();
-
-	const toggleExpanded = useCallback(
-		( event ) => {
-			// Prevent shift+click from opening link in a new window when toggling.
-			event.preventDefault();
-			event.stopPropagation();
-			if ( isExpanded === true ) {
-				collapse( clientId );
-			} else if ( isExpanded === false ) {
-				expand( clientId );
-			}
-		},
-		[ clientId, expand, collapse, isExpanded ]
-	);
-
-	const instanceId = useInstanceId( ListViewBlock );
-
-	if ( ! block ) {
-		return null;
-	}
-
-	// 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 =
-		!! block &&
-		hasBlockSupport( block.name, '__experimentalToolbar', true );
-
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		siblingBlockCount,
-		level
-	);
-
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Options' );
-
-	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
-		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered || isSelected }
-	);
-
-	const listViewBlockSettingsClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isFirstSelectedBlock }
-	);
-
-	let colSpan;
-	if ( hasRenderedMovers ) {
-		colSpan = 1;
-	} else if ( ! showBlockActions ) {
-		colSpan = 2;
-	}
-
-	const classes = classnames( {
-		'is-selected': isSelected || forceSelectionContentLock,
-		'is-first-selected': isFirstSelectedBlock,
-		'is-last-selected': isLastSelectedBlock,
-		'is-branch-selected': isBranchSelected,
-		'is-dragging': isDragged,
-		'has-single-cell': ! showBlockActions,
-	} );
-
-	// Only include all selected blocks if the currently clicked on block
-	// is one of the selected blocks. This ensures that if a user attempts
-	// to alter a block that isn't part of the selection, they're still able
-	// to do so.
-	const dropdownClientIds = selectedClientIds.includes( clientId )
-		? selectedClientIds
-		: [ clientId ];
-
-	const MoreMenuComponent = LeafMoreMenu
-		? LeafMoreMenu
-		: BlockSettingsDropdown;
-
-	return (
-		<ListViewLeaf
-			className={ classes }
-			onMouseEnter={ onMouseEnter }
-			onMouseLeave={ onMouseLeave }
-			onFocus={ onMouseEnter }
-			onBlur={ onMouseLeave }
-			level={ level }
-			position={ position }
-			rowCount={ rowCount }
-			path={ path }
-			id={ `list-view-block-${ clientId }` }
-			data-block={ clientId }
-			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 || forceSelectionContentLock }
-				aria-expanded={ isContentLocked ? undefined : isExpanded }
-				aria-describedby={ descriptionId }
-			>
-				{ ( { ref, tabIndex, onFocus } ) => (
-					<div className="block-editor-list-view-block__contents-container">
-						<ListViewBlockContents
-							block={ block }
-							onClick={ selectEditorBlock }
-							onToggleExpanded={ toggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							ref={ ref }
-							tabIndex={ tabIndex }
-							onFocus={ onFocus }
-							isExpanded={ isExpanded }
-							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
-						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
-							{ blockPositionDescription }
-						</div>
-					</div>
-				) }
-			</TreeGridCell>
-			{ hasRenderedMovers && (
-				<>
-					<TreeGridCell
-						className={ moverCellClassName }
-						withoutGridItem
-					>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverUpButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverDownButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-					</TreeGridCell>
-				</>
-			) }
-
-			{ showBlockActions && (
-				<>
-					<TreeGridCell
-						className={ listViewBlockSettingsClassName }
-						aria-selected={
-							!! isSelected || forceSelectionContentLock
-						}
-					>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<>
-								<MoreMenuComponent
-									clientIds={ dropdownClientIds }
-									block={ block }
-									clientId={ clientId }
-									icon={ moreVertical }
-									label={ settingsAriaLabel }
-									toggleProps={ {
-										ref,
-										className:
-											'block-editor-list-view-block__menu',
-										tabIndex,
-										onFocus,
-									} }
-									disableOpenOnArrowDown
-									__experimentalSelectBlock={
-										updateSelection
-									}
-								/>
-							</>
-						) }
-					</TreeGridCell>
-				</>
-			) }
-		</ListViewLeaf>
-	);
-}
-
-export default memo( ListViewBlock );

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>
-	);
-}