ui.js

/**
 * WordPress dependencies
 */
import {
	Navigator,
	useNavigator,
	createSlotFill,
	DropdownMenu,
	MenuGroup,
	MenuItem,
} from '@wordpress/components';
import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
	privateApis as blockEditorPrivateApis,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';
import { moreVertical } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
import { useEffect, Fragment } from '@wordpress/element';
import { usePrevious } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import ScreenRoot from './screen-root';
import {
	useBlockHasGlobalStyles,
	default as ScreenBlockList,
} from './screen-block-list';
import ScreenBlock from './screen-block';
import ScreenTypography from './screen-typography';
import ScreenTypographyElement from './screen-typography-element';
import FontSize from './font-sizes/font-size';
import FontSizes from './font-sizes/font-sizes';
import ScreenColors from './screen-colors';
import ScreenColorPalette from './screen-color-palette';
import ScreenBackground from './screen-background';
import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
import ScreenLayout from './screen-layout';
import ScreenStyleVariations from './screen-style-variations';
import StyleBook from '../style-book';
import ScreenCSS from './screen-css';
import ScreenRevisions from './screen-revisions';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';

const SLOT_FILL_NAME = 'GlobalStylesMenu';
const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
	createSlotFill( SLOT_FILL_NAME );

function GlobalStylesActionMenu() {
	const [ canReset, onReset ] = useGlobalStylesReset();
	const { toggle } = useDispatch( preferencesStore );
	const { canEditCSS } = useSelect( ( select ) => {
		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
			select( coreStore );

		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
		const globalStyles = globalStylesId
			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
			: undefined;

		return {
			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
		};
	}, [] );
	const { setEditorCanvasContainerView } = unlock(
		useDispatch( editSiteStore )
	);
	const loadCustomCSS = () => {
		setEditorCanvasContainerView( 'global-styles-css' );
	};

	return (
		<GlobalStylesMenuFill>
			<DropdownMenu
				icon={ moreVertical }
				label={ __( 'More' ) }
				toggleProps={ { size: 'compact' } }
			>
				{ ( { onClose } ) => (
					<>
						<MenuGroup>
							{ canEditCSS && (
								<MenuItem onClick={ loadCustomCSS }>
									{ __( 'Additional CSS' ) }
								</MenuItem>
							) }
							<MenuItem
								onClick={ () => {
									toggle(
										'core/edit-site',
										'welcomeGuideStyles'
									);
									onClose();
								} }
							>
								{ __( 'Welcome Guide' ) }
							</MenuItem>
						</MenuGroup>
						<MenuGroup>
							<MenuItem
								onClick={ () => {
									onReset();
									onClose();
								} }
								disabled={ ! canReset }
							>
								{ __( 'Reset styles' ) }
							</MenuItem>
						</MenuGroup>
					</>
				) }
			</DropdownMenu>
		</GlobalStylesMenuFill>
	);
}

function GlobalStylesNavigationScreen( { className, ...props } ) {
	return (
		<Navigator.Screen
			className={ [
				'edit-site-global-styles-sidebar__navigator-screen',
				className,
			]
				.filter( Boolean )
				.join( ' ' ) }
			{ ...props }
		/>
	);
}

function BlockStylesNavigationScreens( {
	parentMenu,
	blockStyles,
	blockName,
} ) {
	return blockStyles.map( ( style, index ) => (
		<GlobalStylesNavigationScreen
			key={ index }
			path={ parentMenu + '/variations/' + style.name }
		>
			<ScreenBlock name={ blockName } variation={ style.name } />
		</GlobalStylesNavigationScreen>
	) );
}

function ContextScreens( { name, parentMenu = '' } ) {
	const blockStyleVariations = useSelect(
		( select ) => {
			const { getBlockStyles } = select( blocksStore );
			return getBlockStyles( name );
		},
		[ name ]
	);

	return (
		<>
			<GlobalStylesNavigationScreen
				path={ parentMenu + '/colors/palette' }
			>
				<ScreenColorPalette name={ name } />
			</GlobalStylesNavigationScreen>

			{ !! blockStyleVariations?.length && (
				<BlockStylesNavigationScreens
					parentMenu={ parentMenu }
					blockStyles={ blockStyleVariations }
					blockName={ name }
				/>
			) }
		</>
	);
}

function GlobalStylesStyleBook() {
	const navigator = useNavigator();
	const { path } = navigator.location;
	return (
		<StyleBook
			isSelected={ ( blockName ) =>
				// Match '/blocks/core%2Fbutton' and
				// '/blocks/core%2Fbutton/typography', but not
				// '/blocks/core%2Fbuttons'.
				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
				path.startsWith(
					`/blocks/${ encodeURIComponent( blockName ) }/`
				)
			}
			onSelect={ ( blockName ) => {
				if (
					STYLE_BOOK_COLOR_GROUPS.find(
						( group ) => group.slug === blockName
					)
				) {
					// Go to color palettes Global Styles.
					navigator.goTo( '/colors/palette' );
					return;
				}

				// Now go to the selected block.
				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
			} }
		/>
	);
}

function GlobalStylesBlockLink() {
	const navigator = useNavigator();
	const { selectedBlockName, selectedBlockClientId } = useSelect(
		( select ) => {
			const { getSelectedBlockClientId, getBlockName } =
				select( blockEditorStore );
			const clientId = getSelectedBlockClientId();
			return {
				selectedBlockName: getBlockName( clientId ),
				selectedBlockClientId: clientId,
			};
		},
		[]
	);
	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
	// When we're in the `Blocks` screen enable deep linking to the selected block.
	useEffect( () => {
		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
			return;
		}
		const currentPath = navigator.location.path;
		if (
			currentPath !== '/blocks' &&
			! currentPath.startsWith( '/blocks/' )
		) {
			return;
		}
		const newPath = '/blocks/' + encodeURIComponent( selectedBlockName );
		// Avoid navigating to the same path. This can happen when selecting
		// a new block of the same type.
		if ( newPath !== currentPath ) {
			navigator.goTo( newPath, { skipFocus: true } );
		}
	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
}

function GlobalStylesEditorCanvasContainerLink() {
	const { goTo, location } = useNavigator();
	const editorCanvasContainerView = useSelect(
		( select ) =>
			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
		[]
	);
	const path = location?.path;
	const isRevisionsOpen = path === '/revisions';

	// If the user switches the editor canvas container view, redirect
	// to the appropriate screen. This effectively allows deep linking to the
	// desired screens from outside the global styles navigation provider.
	useEffect( () => {
		switch ( editorCanvasContainerView ) {
			case 'global-styles-revisions':
			case 'global-styles-revisions:style-book':
				if ( ! isRevisionsOpen ) {
					goTo( '/revisions' );
				}
				break;
			case 'global-styles-css':
				goTo( '/css' );
				break;
			// The stand-alone style book is open
			// and the revisions panel is open,
			// close the revisions panel.
			// Otherwise keep the style book open while
			// browsing global styles panel.
			//
			// Falling through as it matches the default scenario.
			case 'style-book':
			default:
				// In general, if the revision screen is in view but the
				// `editorCanvasContainerView` is not a revision view, close it.
				// This also includes the scenario when the stand-alone style
				// book is open, in which case we want the user to close the
				// revisions screen and browse global styles.
				if ( isRevisionsOpen ) {
					goTo( '/', { isBack: true } );
				}
				break;
		}
	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
}

function useNavigatorSync( parentPath, onPathChange ) {
	const navigator = useNavigator();
	const { path: childPath } = navigator.location;
	const previousParentPath = usePrevious( parentPath );
	const previousChildPath = usePrevious( childPath );
	useEffect( () => {
		if ( parentPath !== childPath ) {
			if ( parentPath !== previousParentPath ) {
				navigator.goTo( parentPath );
			} else if ( childPath !== previousChildPath ) {
				onPathChange( childPath );
			}
		}
	}, [
		onPathChange,
		parentPath,
		previousChildPath,
		previousParentPath,
		childPath,
		navigator,
	] );
}

// This component is used to wrap the hook in order to conditionally execute it
// when the parent component is used on controlled mode.
function NavigationSync( { path: parentPath, onPathChange, children } ) {
	useNavigatorSync( parentPath, onPathChange );
	return children;
}

function GlobalStylesUI( { path, onPathChange } ) {
	const blocks = getBlockTypes();
	const editorCanvasContainerView = useSelect(
		( select ) =>
			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
		[]
	);

	return (
		<Navigator
			className="edit-site-global-styles-sidebar__navigator-provider"
			initialPath="/"
		>
			{ path && onPathChange && (
				<NavigationSync path={ path } onPathChange={ onPathChange } />
			) }
			<GlobalStylesNavigationScreen path="/">
				<ScreenRoot />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/variations">
				<ScreenStyleVariations />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/blocks">
				<ScreenBlockList />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography">
				<ScreenTypography />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/font-sizes">
				<FontSizes />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
				<FontSize />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/text">
				<ScreenTypographyElement element="text" />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/link">
				<ScreenTypographyElement element="link" />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/heading">
				<ScreenTypographyElement element="heading" />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/caption">
				<ScreenTypographyElement element="caption" />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/typography/button">
				<ScreenTypographyElement element="button" />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/colors">
				<ScreenColors />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/shadows">
				<ScreenShadows />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
				<ScreenShadowsEdit />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/layout">
				<ScreenLayout />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/css">
				<ScreenCSS />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/revisions">
				<ScreenRevisions />
			</GlobalStylesNavigationScreen>

			<GlobalStylesNavigationScreen path="/background">
				<ScreenBackground />
			</GlobalStylesNavigationScreen>

			{ blocks.map( ( block ) => (
				<GlobalStylesNavigationScreen
					key={ 'menu-block-' + block.name }
					path={ '/blocks/' + encodeURIComponent( block.name ) }
				>
					<ScreenBlock name={ block.name } />
				</GlobalStylesNavigationScreen>
			) ) }

			<ContextScreens />

			{ blocks.map( ( block ) => (
				<ContextScreens
					key={ 'screens-block-' + block.name }
					name={ block.name }
					parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
				/>
			) ) }

			{ 'style-book' === editorCanvasContainerView && (
				<GlobalStylesStyleBook />
			) }

			<GlobalStylesActionMenu />
			<GlobalStylesBlockLink />
			<GlobalStylesEditorCanvasContainerLink />
		</Navigator>
	);
}
export { GlobalStylesMenuSlot };
export default GlobalStylesUI;