packages/edit-widgets/src/components/layout/interface.js - trunk - githubmirror/gutenberg

packages/edit-widgets/src/components/layout/interface.js
101 строка3 KB
Marco Ciampini
ESLint: Replace strict config with bulk suppressions (#81248)
07 авг 2026, 14:34
07 авг 2026, 14:347f43eaf
import { useViewportMatch } from '@wordpress/compose';
import { BlockBreadcrumb } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import {
	InterfaceSkeleton,
	ComplementaryArea,
	store as interfaceStore,
} from '@wordpress/interface';
import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';
import Header from '../header';
import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
import { store as editWidgetsStore } from '../../store';
import SecondarySidebar from '../secondary-sidebar';

const interfaceLabels = {
	/* translators: accessibility text for the widgets screen top bar landmark region. */
	header: __( 'Widgets top bar' ),
	/* translators: accessibility text for the widgets screen content landmark region. */
	body: __( 'Widgets and blocks' ),
	/* translators: accessibility text for the widgets screen settings landmark region. */
	sidebar: __( 'Widgets settings' ),
	/* translators: accessibility text for the widgets screen footer landmark region. */
	footer: __( 'Widgets footer' ),
};

function Interface( { blockEditorSettings } ) {
	const isMobileViewport = useViewportMatch( 'medium', '<' );
	const isHugeViewport = useViewportMatch( 'huge', '>=' );
	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
		useDispatch( editWidgetsStore );
	const {
		hasBlockBreadCrumbsEnabled,
		hasSidebarEnabled,
		isInserterOpened,
		isListViewOpened,
	} = useSelect(
		( select ) => ( {
			hasSidebarEnabled: !! select(
				interfaceStore
			).getActiveComplementaryArea( editWidgetsStore.name ),
			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
			isListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),
			hasBlockBreadCrumbsEnabled: !! select( preferencesStore ).get(
				'core/edit-widgets',
				'showBlockBreadcrumbs'
			),
		} ),
		[]
	);

	// Inserter and Sidebars are mutually exclusive
	useEffect( () => {
		if ( hasSidebarEnabled && ! isHugeViewport ) {
			setIsInserterOpened( false );
			setIsListViewOpened( false );
		}
	}, [ hasSidebarEnabled, isHugeViewport ] );

	useEffect( () => {
		if ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {
			closeGeneralSidebar();
		}
	}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );

	const secondarySidebarLabel = isListViewOpened
		? __( 'List View' )
		: __( 'Block Library' );

	const hasSecondarySidebar = isListViewOpened || isInserterOpened;

	return (
		<InterfaceSkeleton
			labels={ {
				...interfaceLabels,
				secondarySidebar: secondarySidebarLabel,
			} }
			header={ <Header /> }
			secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
			sidebar={ <ComplementaryArea.Slot scope="core/edit-widgets" /> }
			content={
				<>
					<WidgetAreasBlockEditorContent
						blockEditorSettings={ blockEditorSettings }
					/>
				</>
			}
			footer={
				hasBlockBreadCrumbsEnabled &&
				! isMobileViewport && (
					<div className="edit-widgets-layout__footer">
						<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />
					</div>
				)
			}
		/>
	);
}

export default Interface;