@wordpress/block-editor 12.1.0 → 12.2.0

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

@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { forwardRef, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import ListViewBlockSelectButton from './block-select-button';
-import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
-import { updateAttributes } from './update-attributes';
-import { LinkUI } from './link-ui';
-import { useInsertedBlock } from './use-inserted-block';
-import { useListViewContext } from './context';
-
-const BLOCKS_WITH_LINK_UI_SUPPORT = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
-
-const ListViewBlockContents = forwardRef(
-	(
-		{
-			onClick,
-			onToggleExpanded,
-			block,
-			isSelected,
-			position,
-			siblingBlockCount,
-			level,
-			isExpanded,
-			selectedClientIds,
-			...props
-		},
-		ref
-	) => {
-		const { clientId } = block;
-		const [ isLinkUIOpen, setIsLinkUIOpen ] = useState();
-		const {
-			blockMovingClientId,
-			selectedBlockInBlockEditor,
-			lastInsertedBlockClientId,
-		} = useSelect(
-			( select ) => {
-				const {
-					hasBlockMovingClientId,
-					getSelectedBlockClientId,
-					getLastInsertedBlocksClientIds,
-				} = unlock( select( blockEditorStore ) );
-				const lastInsertedBlocksClientIds =
-					getLastInsertedBlocksClientIds();
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-					lastInsertedBlockClientId:
-						lastInsertedBlocksClientIds &&
-						lastInsertedBlocksClientIds[ 0 ],
-				};
-			},
-			[ clientId ]
-		);
-
-		const {
-			insertedBlockAttributes,
-			insertedBlockName,
-			setInsertedBlockAttributes,
-		} = useInsertedBlock( lastInsertedBlockClientId );
-
-		const hasExistingLinkValue = insertedBlockAttributes?.url;
-
-		useEffect( () => {
-			if (
-				clientId === lastInsertedBlockClientId &&
-				BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
-				! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
-			) {
-				setIsLinkUIOpen( true );
-			}
-		}, [
-			lastInsertedBlockClientId,
-			clientId,
-			insertedBlockName,
-			hasExistingLinkValue,
-		] );
-
-		const { renderAdditionalBlockUI } = useListViewContext();
-
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = classnames( 'block-editor-list-view-block-contents', {
-			'is-dropping-before': isBlockMoveTarget,
-		} );
-
-		// 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 drag a block that isn't part of the selection, they're still able
-		// to drag it and rearrange its position.
-		const draggableClientIds = selectedClientIds.includes( clientId )
-			? selectedClientIds
-			: [ clientId ];
-
-		return (
-			<>
-				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
-				{ isLinkUIOpen && (
-					<LinkUI
-						clientId={ lastInsertedBlockClientId }
-						link={ insertedBlockAttributes }
-						onClose={ () => setIsLinkUIOpen( false ) }
-						hasCreateSuggestion={ false }
-						onChange={ ( updatedValue ) => {
-							updateAttributes(
-								updatedValue,
-								setInsertedBlockAttributes,
-								insertedBlockAttributes
-							);
-							setIsLinkUIOpen( false );
-						} }
-						onCancel={ () => setIsLinkUIOpen( false ) }
-					/>
-				) }
-				<BlockDraggable clientIds={ draggableClientIds }>
-					{ ( { 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 }
-							isExpanded={ isExpanded }
-							{ ...props }
-						/>
-					) }
-				</BlockDraggable>
-			</>
-		);
-	}
-);
-
-export default ListViewBlockContents;

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

@@ -1,128 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock } from '@wordpress/icons';
-import { SPACE, ENTER } from '@wordpress/keycodes';
-import { sprintf, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockIcon from '../block-icon';
-import useBlockDisplayInformation from '../use-block-display-information';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import ListViewExpander from './expander';
-import { useBlockLock } from '../block-lock';
-
-function ListViewBlockSelectButton(
-	{
-		className,
-		block,
-		onClick,
-		onToggleExpanded,
-		tabIndex,
-		onFocus,
-		onDragStart,
-		onDragEnd,
-		draggable,
-	},
-	ref
-) {
-	const { clientId } = block;
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle = useBlockDisplayTitle( {
-		clientId,
-		context: 'list-view',
-	} );
-	const { isLocked } = useBlockLock( clientId );
-
-	// The `href` attribute triggers the browser's native HTML drag operations.
-	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
-	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
-	// inside the `useOnBlockDrop` hook.
-	const onDragStartHandler = ( event ) => {
-		event.dataTransfer.clearData();
-		onDragStart?.( event );
-	};
-
-	function onKeyDownHandler( event ) {
-		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
-			onClick( event );
-		}
-	}
-
-	const editAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Edit %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Edit' );
-
-	return (
-		<>
-			<Button
-				className={ classnames(
-					'block-editor-list-view-block-select-button',
-					className
-				) }
-				onClick={ onClick }
-				onKeyDown={ onKeyDownHandler }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
-				onDragEnd={ onDragEnd }
-				draggable={ draggable }
-				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
-				title={ editAriaLabel }
-			>
-				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon
-					icon={ blockInformation?.icon }
-					showColors
-					context="list-view"
-				/>
-				<HStack
-					alignment="center"
-					className="block-editor-list-view-block-select-button__label-wrapper"
-					justify="flex-start"
-					spacing={ 1 }
-				>
-					<span className="block-editor-list-view-block-select-button__title">
-						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
-					</span>
-					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-							<Truncate
-								className="block-editor-list-view-block-select-button__anchor"
-								ellipsizeMode="auto"
-							>
-								{ blockInformation.anchor }
-							</Truncate>
-						</span>
-					) }
-					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
-							<Icon icon={ lock } />
-						</span>
-					) }
-				</HStack>
-			</Button>
-		</>
-	);
-}
-
-export default forwardRef( ListViewBlockSelectButton );

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