@wordpress/block-editor/src/components/block-navigation/tree.js

Generic block editor.

/**
 * WordPress dependencies
 */

import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
import { useEffect, useMemo, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */
import BlockNavigationBranch from './branch';
import { BlockNavigationContext } from './context';
import useBlockNavigationDropZone from './use-block-navigation-drop-zone';

/**
 * Wrap `BlockNavigationRows` with `TreeGrid`. BlockNavigationRows is a
 * recursive component (it renders itself), so this ensures TreeGrid is only
 * present at the very top of the navigation grid.
 *
 * @param {Object}  props                                          Components props.
 * @param {boolean} props.__experimentalFeatures                   Flag to enable experimental features.
 * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
 */
export default function BlockNavigationTree( {
	__experimentalFeatures,
	__experimentalPersistentListViewFeatures,
	...props
} ) {
	let {
		ref: treeGridRef,
		target: blockDropTarget,
	} = useBlockNavigationDropZone();

	const isMounted = useRef( false );
	useEffect( () => {
		isMounted.current = true;
	}, [] );

	if ( ! __experimentalFeatures ) {
		blockDropTarget = undefined;
	}

	const contextValue = useMemo(
		() => ( {
			__experimentalFeatures,
			__experimentalPersistentListViewFeatures,
			blockDropTarget,
			isTreeGridMounted: isMounted.current,
		} ),
		[
			__experimentalFeatures,
			__experimentalPersistentListViewFeatures,
			blockDropTarget,
			isMounted.current,
		]
	);

	return (
		<TreeGrid
			className="block-editor-block-navigation-tree"
			aria-label={ __( 'Block navigation structure' ) }
			ref={ treeGridRef }
		>
			<BlockNavigationContext.Provider value={ contextValue }>
				<BlockNavigationBranch { ...props } />
			</BlockNavigationContext.Provider>
		</TreeGrid>
	);
}