@wordpress/block-editor 10.4.0 → 11.0.0

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

@@ -0,0 +1,126 @@
+/**
+ * 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

@@ -0,0 +1,26 @@
+/**
+ * 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

@@ -0,0 +1,242 @@
+/**
+ * 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';
+import { Appender } from './appender';
+
+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 {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 {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {Object}  ref                       Forwarded ref
+ */
+function __ExperimentalOffCanvasEditor(
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		selectBlockInCanvas = true,
+	},
+	ref
+) {
+	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 ]
+	);
+
+	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 );
+		},
+		[ setSelectedTreeId, updateBlockSelection ]
+	);
+	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,
+		} ),
+		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+	);
+
+	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 }
+					applicationAriaLabel={ __( 'Block navigation structure' ) }
+				>
+					<ListViewContext.Provider value={ contextValue }>
+						<ListViewBranch
+							blocks={ clientIdsTree }
+							selectBlock={ selectEditorBlock }
+							showBlockMovers={ showBlockMovers }
+							fixedListWindow={ fixedListWindow }
+							selectedClientIds={ selectedClientIds }
+							isExpanded={ isExpanded }
+							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							selectBlockInCanvas={ selectBlockInCanvas }
+						/>
+						<TreeGridRow
+							level={ 1 }
+							setSize={ 1 }
+							positionInSet={ 1 }
+							isExpanded={ true }
+						>
+							<TreeGridCell>
+								{ ( treeGridCellProps ) => (
+									<Appender { ...treeGridCellProps } />
+								) }
+							</TreeGridCell>
+						</TreeGridRow>
+					</ListViewContext.Provider>
+				</TreeGrid>
+			</div>
+		</AsyncModeProvider>
+	);
+}
+
+export default forwardRef( __ExperimentalOffCanvasEditor );

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

@@ -0,0 +1,52 @@
+/**
+ * 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

@@ -0,0 +1,166 @@
+// 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, index ) => {
+					return (
+						<Button
+							key={ `transform-${ index }` }
+							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 }
+				renderControlBottom={
+					! url
+						? () => (
+								<LinkControlTransforms
+									clientId={ props.clientId }
+								/>
+						  )
+						: null
+				}
+			/>
+		</Popover>
+	);
+}

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

@@ -0,0 +1,26 @@
+.offcanvas-editor__appender .block-editor-inserter__toggle {
+	background-color: #1e1e1e;
+	color: #fff;
+	margin: $grid-unit-10 0 0 28px;
+	border-radius: 2px;
+	height: 24px;
+	min-width: 24px;
+	padding: 0;
+
+	&:hover,
+	&:focus {
+		background: var(--wp-admin-theme-color);
+		color: #fff;
+	}
+}
+
+.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);
+}

package/src/components/off-canvas-editor/test/utils.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import { getCommonDepthClientIds } from '../utils';
+
+describe( 'getCommonDepthClientIds', () => {
+	it( 'should return start and end when no depth is provided', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[],
+			[]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
+	} );
+
+	it( 'should return deepest start and end when depths match', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1', 'start-2', 'start-3' ],
+			[ 'end-1', 'end-2', 'end-3' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
+	} );
+
+	it( 'should return shallower ids when start is shallower', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1' ],
+			[ 'end-1', 'end-2', 'end-3' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'end-2' } );
+	} );
+
+	it( 'should return shallower ids when end is shallower', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1', 'start-2', 'start-3' ],
+			[ 'end-1', 'end-2' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
+	} );
+} );