site-editor-canvas.js

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */
import { useSelect, useDispatch } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import {
	BlockList,
	BlockTools,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
/**
 * Internal dependencies
 */
import BackButton from './back-button';
import ResizableEditor from './resizable-editor';
import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
import {
	FOCUSABLE_ENTITIES,
	NAVIGATION_POST_TYPE,
} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import PageContentFocusManager from '../page-content-focus-manager';

const LAYOUT = {
	type: 'default',
	// At the root level of the site editor, no alignments should be allowed.
	alignments: [],
};

export default function SiteEditorCanvas( { postType, postId, context } ) {
	const { clearSelectedBlock } = useDispatch( blockEditorStore );
	const isFocusMode = FOCUSABLE_ENTITIES.includes( postType );
	const { isViewMode } = useSelect( ( select ) => {
		const { getCanvasMode } = unlock( select( editSiteStore ) );

		return {
			isViewMode: getCanvasMode() === 'view',
		};
	}, [] );

	const [ resizeObserver, sizes ] = useResizeObserver();

	const settings = useSiteEditorSettings( postType, postId );

	const { hasBlocks } = useSelect( ( select ) => {
		const { getBlockCount } = select( blockEditorStore );

		const blocks = getBlockCount();

		return {
			hasBlocks: !! blocks,
		};
	}, [] );

	const isMobileViewport = useViewportMatch( 'small', '<' );
	const enableResizing =
		isFocusMode &&
		! isViewMode &&
		// Disable resizing in mobile viewport.
		! isMobileViewport;

	const contentRef = useRef();
	const isTemplateTypeNavigation = postType === NAVIGATION_POST_TYPE;

	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;

	// Hide the appender when:
	// - In navigation focus mode (should only allow the root Nav block).
	// - In view mode (i.e. not editing).
	const showBlockAppender =
		( isNavigationFocusMode && hasBlocks ) || isViewMode
			? false
			: undefined;

	const forceFullHeight = isNavigationFocusMode;

	return (
		<>
			<EditorCanvasContainer.Slot>
				{ ( [ editorCanvasView ] ) =>
					editorCanvasView ? (
						<div className="edit-site-visual-editor is-focus-mode">
							{ editorCanvasView }
						</div>
					) : (
						<BlockTools
							className={ classnames( 'edit-site-visual-editor', {
								'is-focus-mode':
									isFocusMode || !! editorCanvasView,
								'is-view-mode': isViewMode,
							} ) }
							__unstableContentRef={ contentRef }
							onClick={ ( event ) => {
								// Clear selected block when clicking on the gray background.
								if ( event.target === event.currentTarget ) {
									clearSelectedBlock();
								}
							} }
						>
							<BackButton />
							<ResizableEditor
								enableResizing={ enableResizing }
								height={
									sizes.height && ! forceFullHeight
										? sizes.height
										: '100%'
								}
							>
								<EditorCanvas
									enableResizing={ enableResizing }
									settings={ settings }
									contentRef={ contentRef }
								>
									{ resizeObserver }
									<BlockList
										className={ classnames(
											'edit-site-block-editor__block-list wp-site-blocks',
											{
												'is-navigation-block':
													isTemplateTypeNavigation,
											}
										) }
										layout={ LAYOUT }
										renderAppender={ showBlockAppender }
									/>
								</EditorCanvas>
							</ResizableEditor>
						</BlockTools>
					)
				}
			</EditorCanvasContainer.Slot>
			<PageContentFocusManager
				contentRef={ contentRef }
				context={ context }
			/>
		</>
	);
}