@wordpress/block-editor 10.3.0 → 10.5.0

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

@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useMergeRefs,
+	__experimentalUseFixedWindowList as useFixedWindowList,
+} from '@wordpress/compose';
+import { __experimentalTreeGrid as TreeGrid } 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 {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, clientId ) => {
+			updateBlockSelection( event, clientId );
+			setSelectedTreeId( clientId );
+		},
+		[ 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(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
+		},
+		[ setExpandedState ]
+	);
+	const collapse = useCallback(
+		( clientId ) => {
+			if ( ! clientId ) {
+				return;
+			}
+			setExpandedState( { type: 'collapse', clientIds: [ clientId ] } );
+		},
+		[ 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 }
+			/>
+			<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 }
+					/>
+				</ListViewContext.Provider>
+			</TreeGrid>
+		</AsyncModeProvider>
+	);
+}
+export default forwardRef( __ExperimentalOffCanvasEditor );

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

@@ -0,0 +1,48 @@
+/**
+ * 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', className ) }
+			level={ level }
+			positionInSet={ position }
+			setSize={ rowCount }
+			{ ...props }
+		>
+			{ children }
+		</AnimatedTreeGridRow>
+	);
+}

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

@@ -0,0 +1,397 @@
+.block-editor-list-view-tree {
+	width: 100%;
+	border-collapse: collapse;
+	padding: 0;
+	margin: 0;
+
+	// Move upwards when in modal.
+	.components-modal__content & {
+		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
+		width: calc(100% + #{ $grid-unit-15 });
+	}
+}
+
+.block-editor-list-view-leaf {
+	// Use position relative for row animation.
+	position: relative;
+
+	// The background has to be applied to the td, not tr, or border-radius won't work.
+	&.is-selected td {
+		background: var(--wp-admin-theme-color);
+	}
+	&.is-selected .block-editor-list-view-block-contents,
+	&.is-selected .components-button.has-icon {
+		color: $white;
+	}
+	&.is-selected .block-editor-list-view-block-contents {
+		// Hide selection styles while a user is dragging blocks/files etc.
+		.is-dragging-components-draggable & {
+			background: none;
+			color: $gray-900;
+		}
+	}
+	&.is-selected .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+	&.is-selected .block-editor-list-view-block__menu:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
+	}
+
+	&.is-dragging {
+		display: none;
+	}
+
+	// Border radius for corners of the selected item.
+	&.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:first-child {
+		border-bottom-left-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:last-child {
+		border-bottom-right-radius: $radius-block-ui;
+	}
+	&.is-branch-selected:not(.is-selected) {
+		// Lighten a CSS variable without introducing a new SASS variable
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+	}
+	&.is-branch-selected.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-branch-selected.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
+	}
+	&[aria-expanded="false"] {
+		&.is-branch-selected.is-first-selected td:first-child {
+			border-top-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-first-selected td:last-child {
+			border-top-right-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:first-child {
+			border-bottom-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:last-child {
+			border-bottom-right-radius: $radius-block-ui;
+		}
+	}
+	&.is-branch-selected:not(.is-selected) td {
+		border-radius: 0;
+	}
+
+
+	// List View renders a fixed number of items and relies on each item having a fixed 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.
+	.block-editor-list-view-block-contents {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: auto;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
+		text-align: left;
+		color: $gray-900;
+		border-radius: $radius-block-ui;
+		position: relative;
+		white-space: nowrap;
+
+		&.is-dropping-before::before {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			top: -2px;
+			right: 0;
+			left: 0;
+			border-top: 4px solid var(--wp-admin-theme-color);
+		}
+
+		.components-modal__content & {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+	.block-editor-list-view-block-contents:focus {
+		box-shadow: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: -(24px + 5px); // Icon size + padding.
+			bottom: 0;
+			left: 0;
+			border-radius: inherit;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			z-index: 2;
+			pointer-events: none;
+
+			// Hide focus styles while a user is dragging blocks/files etc.
+			.is-dragging-components-draggable & {
+				box-shadow: none;
+			}
+		}
+	}
+	// Fix focus styling width when one row has fewer cells.
+	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
+		right: 0;
+	}
+
+	.block-editor-list-view-block__menu:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		z-index: 1;
+
+		// Hide focus styles while a user is dragging blocks/files etc.
+		.is-dragging-components-draggable & {
+			box-shadow: none;
+		}
+	}
+
+	&.is-visible .block-editor-list-view-block-contents {
+		opacity: 1;
+		@include edit-post__fade-in-animation;
+	}
+
+	.block-editor-block-icon {
+		align-self: flex-start;
+		margin-right: $grid-unit-10;
+		width: $icon-size;
+	}
+
+	.block-editor-list-view-block__menu-cell,
+	.block-editor-list-view-block__mover-cell,
+	.block-editor-list-view-block__contents-cell {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	.block-editor-list-view-block__menu-cell,
+	.block-editor-list-view-block__mover-cell {
+		line-height: 0;
+		width: $button-size;
+		vertical-align: middle;
+		@include reduce-motion("transition");
+
+		> * {
+			opacity: 0;
+		}
+
+		// Show on hover, visible, and show above to keep the hit area size.
+		&:hover,
+		&.is-visible {
+			position: relative;
+			z-index: 1;
+
+			> * {
+				opacity: 1;
+				@include edit-post__fade-in-animation;
+			}
+		}
+
+		&,
+		.components-button.has-icon {
+			width: 24px;
+			min-width: 24px;
+			padding: 0;
+		}
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: $grid-unit-05;
+
+		.components-button.has-icon {
+			height: 24px;
+		}
+	}
+
+	.block-editor-list-view-block__mover-cell-alignment-wrapper {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	// Keep the tap target large but the focus target small.
+	.block-editor-block-mover-button {
+		position: relative;
+		width: $button-size;
+		height: $button-size-small;
+
+		// Position the icon.
+		svg {
+			position: relative;
+			height: $button-size-small;
+		}
+
+		&.is-up-button {
+			margin-top: -$grid-unit-15 * 0.5;
+			align-items: flex-end;
+			svg {
+				bottom: -$grid-unit-05;
+			}
+		}
+
+		&.is-down-button {
+			margin-bottom: -$grid-unit-15 * 0.5;
+			align-items: flex-start;
+			svg {
+				top: -$grid-unit-05;
+			}
+		}
+
+		// Tweak size and position of focus ring.
+		&::before {
+			height: 16px;
+			min-width: 100%;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	.block-editor-inserter__toggle {
+		background: $gray-900;
+		color: $white;
+		height: $grid-unit-30;
+		margin: 6px 6px 6px 1px;
+		min-width: $grid-unit-30;
+
+		&:active {
+			color: $white;
+		}
+	}
+
+	.block-editor-list-view-block-select-button__label-wrapper {
+		min-width: 120px;
+	}
+
+	.block-editor-list-view-block-select-button__title {
+		flex: 1;
+		position: relative;
+
+		.components-truncate {
+			position: absolute;
+			width: 100%;
+			transform: translateY(-50%);
+		}
+	}
+
+	.block-editor-list-view-block-select-button__anchor-wrapper {
+		position: relative;
+		max-width: min(110px, 40%);
+		width: 100%;
+	}
+
+	.block-editor-list-view-block-select-button__anchor {
+		position: absolute;
+		right: 0;
+		transform: translateY(-50%);
+		background: rgba($black, 0.1);
+		border-radius: $radius-block-ui;
+		padding: 2px 6px;
+		max-width: 100%;
+		box-sizing: border-box;
+	}
+
+	&.is-selected .block-editor-list-view-block-select-button__anchor {
+		background: rgba($black, 0.3);
+	}
+
+	.block-editor-list-view-block-select-button__lock {
+		line-height: 0;
+		width: 24px;
+		min-width: 24px;
+		margin-left: auto;
+		padding: 0;
+		vertical-align: middle;
+	}
+}
+
+.block-editor-list-view-block-select-button__description,
+.block-editor-list-view-appender__description {
+	display: none;
+}
+
+.block-editor-list-view-block__contents-cell,
+.block-editor-list-view-appender__cell {
+	.block-editor-list-view-block__contents-container,
+	.block-editor-list-view-appender__container {
+		display: flex;
+	}
+}
+
+// Chevron container metrics.
+.block-editor-list-view__expander {
+	height: $icon-size;
+	margin-left: $grid-unit-05;
+	width: $icon-size;
+}
+
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+.block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
+	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+}
+
+.block-editor-list-view-leaf:not([aria-level="1"]) {
+	.block-editor-list-view__expander {
+		margin-right: 4px;
+	}
+}
+
+@for $i from 0 to $block-navigation-max-indent {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+		@if $i - 1 >= 0 {
+			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
+		}
+		@else {
+			margin-left: ( $icon-size * $i );
+		}
+	}
+}
+
+.block-editor-list-view-leaf .block-editor-list-view__expander {
+	visibility: hidden;
+}
+
+// Point downwards when open.
+.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+	visibility: visible;
+	transition: transform 0.2s ease;
+	transform: rotate(90deg);
+	@include reduce-motion("transition");
+}
+
+// Point rightwards when closed
+.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+	visibility: visible;
+	transform: rotate(0deg);
+	transition: transform 0.2s ease;
+	@include reduce-motion("transition");
+}
+
+.block-editor-list-view-drop-indicator {
+	pointer-events: none;
+
+	.block-editor-list-view-drop-indicator__line {
+		background: var(--wp-admin-theme-color);
+		height: $border-width;
+	}
+}
+
+.block-editor-list-view-placeholder {
+	padding: 0;
+	margin: 0;
+	height: 36px;
+}
+

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