@wordpress/block-editor 12.1.0 → 12.3.0

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

package/src/components/off-canvas-editor/leaf-more-menu.js

@@ -1,158 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import {
-	addSubmenu,
-	chevronUp,
-	chevronDown,
-	moreVertical,
-} from '@wordpress/icons';
-import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockTitle from '../block-title';
-import { useListViewContext } from './context';
-
-const POPOVER_PROPS = {
-	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
-};
-
-const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
-
-function AddSubmenuItem( { block, onClose } ) {
-	const { expandedState, expand } = useListViewContext();
-	const { insertBlock, replaceBlock, replaceInnerBlocks } =
-		useDispatch( blockEditorStore );
-
-	const clientId = block.clientId;
-	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
-		block.name
-	);
-	return (
-		<MenuItem
-			icon={ addSubmenu }
-			disabled={ isDisabled }
-			onClick={ () => {
-				const updateSelectionOnInsert = false;
-				const newLink = createBlock( 'core/navigation-link' );
-
-				if ( block.name === 'core/navigation-submenu' ) {
-					insertBlock(
-						newLink,
-						block.innerBlocks.length,
-						clientId,
-						updateSelectionOnInsert
-					);
-				} else {
-					// Convert to a submenu if the block currently isn't one.
-					const newSubmenu = createBlock(
-						'core/navigation-submenu',
-						block.attributes,
-						block.innerBlocks
-					);
-
-					// The following must happen as two independent actions.
-					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
-					// selector to determine which block is "active". As the UX needs the newLink to be
-					// the "active" block it must be the last block to be inserted.
-					// Therefore the Submenu is first created and **then** the newLink is inserted
-					// thus ensuring it is the last inserted block.
-					replaceBlock( clientId, newSubmenu );
-
-					replaceInnerBlocks(
-						newSubmenu.clientId,
-						[ newLink ],
-						updateSelectionOnInsert
-					);
-				}
-				if ( ! expandedState[ block.clientId ] ) {
-					expand( block.clientId );
-				}
-				onClose();
-			} }
-		>
-			{ __( 'Add submenu link' ) }
-		</MenuItem>
-	);
-}
-
-export default function LeafMoreMenu( props ) {
-	const { block } = props;
-	const { clientId } = block;
-
-	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
-		useDispatch( blockEditorStore );
-
-	const removeLabel = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		BlockTitle( { clientId, maximumLength: 25 } )
-	);
-
-	const rootClientId = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-
-			return getBlockRootClientId( clientId );
-		},
-		[ clientId ]
-	);
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			className="block-editor-block-settings-menu"
-			popoverProps={ POPOVER_PROPS }
-			noIcons
-			{ ...props }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							icon={ chevronUp }
-							onClick={ () => {
-								moveBlocksUp( [ clientId ], rootClientId );
-								onClose();
-							} }
-						>
-							{ __( 'Move up' ) }
-						</MenuItem>
-						<MenuItem
-							icon={ chevronDown }
-							onClick={ () => {
-								moveBlocksDown( [ clientId ], rootClientId );
-								onClose();
-							} }
-						>
-							{ __( 'Move down' ) }
-						</MenuItem>
-						<AddSubmenuItem block={ block } onClose={ onClose } />
-					</MenuGroup>
-					<MenuGroup>
-						<MenuItem
-							onClick={ () => {
-								removeBlocks( [ clientId ], false );
-								onClose();
-							} }
-						>
-							{ removeLabel }
-						</MenuItem>
-					</MenuGroup>
-				</>
-			) }
-		</DropdownMenu>
-	);
-}

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

@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { animated } from '@react-spring/web';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useMovingAnimation from '../use-moving-animation';
-
-const AnimatedTreeGridRow = animated( TreeGridRow );
-
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
-
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames(
-				'block-editor-list-view-leaf',
-				'offcanvas-editor-list-view-leaf',
-				className
-			) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}

package/src/components/off-canvas-editor/link-ui.js

@@ -1,167 +0,0 @@
-// Note: this file is copied directly from packages/block-library/src/navigation-link/link-ui.js
-
-/**
- * WordPress dependencies
- */
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { Popover, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { switchToBlockType } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import LinkControl from '../link-control';
-import BlockIcon from '../block-icon';
-
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-export function getSuggestionsQuery( type, kind ) {
-	switch ( type ) {
-		case 'post':
-		case 'page':
-			return { type: 'post', subtype: type };
-		case 'category':
-			return { type: 'term', subtype: 'category' };
-		case 'tag':
-			return { type: 'term', subtype: 'post_tag' };
-		case 'post_format':
-			return { type: 'post-format' };
-		default:
-			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type };
-			}
-			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type };
-			}
-			return {};
-	}
-}
-
-/**
- * Add transforms to Link Control
- *
- * @param {Object} props          Component props.
- * @param {string} props.clientId Block client ID.
- */
-function LinkControlTransforms( { clientId } ) {
-	const { getBlock, blockTransforms } = useSelect(
-		( select ) => {
-			const {
-				getBlock: _getBlock,
-				getBlockRootClientId,
-				getBlockTransformItems,
-			} = select( blockEditorStore );
-
-			return {
-				getBlock: _getBlock,
-				blockTransforms: getBlockTransformItems(
-					_getBlock( clientId ),
-					getBlockRootClientId( clientId )
-				),
-			};
-		},
-		[ clientId ]
-	);
-
-	const { replaceBlock } = useDispatch( blockEditorStore );
-
-	const featuredBlocks = [
-		'core/page-list',
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-
-	const transforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
-	if ( ! transforms?.length ) {
-		return null;
-	}
-
-	if ( ! clientId ) {
-		return null;
-	}
-
-	return (
-		<div className="link-control-transform">
-			<h3 className="link-control-transform__subheading">
-				{ __( 'Transform' ) }
-			</h3>
-			<div className="link-control-transform__items">
-				{ transforms.map( ( item ) => {
-					return (
-						<Button
-							key={ `transform-${ item.name }` }
-							onClick={ () =>
-								replaceBlock(
-									clientId,
-									switchToBlockType(
-										getBlock( clientId ),
-										item.name
-									)
-								)
-							}
-							className="link-control-transform__item"
-						>
-							<BlockIcon icon={ item.icon } />
-							{ item.title }
-						</Button>
-					);
-				} ) }
-			</div>
-		</div>
-	);
-}
-
-export function LinkUI( props ) {
-	const { label, url, opensInNewTab, type, kind } = props.link;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
-
-	return (
-		<Popover
-			placement="bottom"
-			onClose={ props.onClose }
-			anchor={ props.anchor }
-			shift
-		>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				className={ props.className }
-				value={ link }
-				showInitialSuggestions={ true }
-				withCreateSuggestion={ props.hasCreateSuggestion }
-				noDirectEntry={ !! type }
-				noURLSuggestion={ !! type }
-				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
-				onChange={ props.onChange }
-				onRemove={ props.onRemove }
-				onCancel={ props.onCancel }
-				renderControlBottom={
-					! url
-						? () => (
-								<LinkControlTransforms
-									clientId={ props.clientId }
-								/>
-						  )
-						: null
-				}
-			/>
-		</Popover>
-	);
-}

package/src/components/off-canvas-editor/style.scss

@@ -1,34 +0,0 @@
-.offcanvas-editor-appender .block-editor-inserter__toggle {
-	background-color: #1e1e1e;
-	color: #fff;
-	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
-	height: 24px;
-	min-width: 24px;
-	padding: 0;
-
-	&:hover,
-	&:focus {
-		background: var(--wp-admin-theme-color);
-		color: #fff;
-	}
-}
-
-.offcanvas-editor-appender__description {
-	display: none;
-}
-
-.offcanvas-editor-list-view-tree-wrapper {
-	max-width: 100%;
-	overflow-x: auto;
-}
-
-.offcanvas-editor-list-view-leaf {
-	display: block;
-	// sidebar width - tab panel padding
-	max-width: $sidebar-width - (2 * $grid-unit-20);
-}
-
-.offcanvas-editor-list-view-is-empty {
-	margin-left: $grid-unit-20;
-}