@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

package/src/components/global-styles/ui.js

@@ -1,448 +0,0 @@
-/**
- * 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 } 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;
-				}
-				if ( blockName === 'typography' ) {
-					// Go to typography Global Styles.
-					navigator.goTo( '/typography' );
-					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;

package/src/components/global-styles/utils.js

@@ -1,88 +0,0 @@
-/**
- *
- * @param {string} variation The variation name.
- *
- * @return {string} The variation class name.
- */
-export function getVariationClassName( variation ) {
-	if ( ! variation ) {
-		return '';
-	}
-	return `is-style-${ variation }`;
-}
-
-/**
- * Iterates through the presets array and searches for slugs that start with the specified
- * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
- * and returns one greater than the highest found suffix, ensuring that the new index is unique.
- *
- * @param {Array}  presets    The array of preset objects, each potentially containing a slug property.
- * @param {string} slugPrefix The prefix to look for in the preset slugs.
- *
- * @return {number} The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
- */
-export function getNewIndexFromPresets( presets, slugPrefix ) {
-	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
-	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
-		if ( typeof preset?.slug === 'string' ) {
-			const matches = preset?.slug.match( nameRegex );
-			if ( matches ) {
-				const id = parseInt( matches[ 1 ], 10 );
-				if ( id > currentHighest ) {
-					return id;
-				}
-			}
-		}
-		return currentHighest;
-	}, 0 );
-	return highestPresetValue + 1;
-}
-
-function getFontFamilyFromSetting( fontFamilies, setting ) {
-	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
-		return null;
-	}
-
-	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
-	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
-
-	return fontFamilies.find(
-		( fontFamily ) => fontFamily.slug === fontFamilySlug
-	);
-}
-
-export function getFontFamilies( themeJson ) {
-	const themeFontFamilies =
-		themeJson?.settings?.typography?.fontFamilies?.theme;
-	const customFontFamilies =
-		themeJson?.settings?.typography?.fontFamilies?.custom;
-
-	let fontFamilies = [];
-	if ( themeFontFamilies && customFontFamilies ) {
-		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
-	} else if ( themeFontFamilies ) {
-		fontFamilies = themeFontFamilies;
-	} else if ( customFontFamilies ) {
-		fontFamilies = customFontFamilies;
-	}
-	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
-	const bodyFontFamily = getFontFamilyFromSetting(
-		fontFamilies,
-		bodyFontFamilySetting
-	);
-
-	const headingFontFamilySetting =
-		themeJson?.styles?.elements?.heading?.typography?.fontFamily;
-
-	let headingFontFamily;
-	if ( ! headingFontFamilySetting ) {
-		headingFontFamily = bodyFontFamily;
-	} else {
-		headingFontFamily = getFontFamilyFromSetting(
-			fontFamilies,
-			themeJson?.styles?.elements?.heading?.typography?.fontFamily
-		);
-	}
-
-	return [ bodyFontFamily, headingFontFamily ];
-}

package/src/components/global-styles/variations/style.scss

@@ -1,43 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-global-styles-variations_item {
-	box-sizing: border-box;
-	// To round the outline in Windows 10 high contrast mode.
-	cursor: pointer;
-
-	.edit-site-global-styles-variations_item-preview {
-		border-radius: $radius-small;
-		outline: $border-width solid rgba($black, 0.1);
-		outline-offset: -$border-width;
-		overflow: hidden;
-		position: relative;
-		@media not (prefers-reduced-motion) {
-			// Add the same transition that block style variations and other buttons have.
-			transition: outline 0.1s linear;
-		}
-
-		&.is-pill {
-			height: $button-size-compact;
-
-			.block-editor-iframe__scale-container {
-				overflow: hidden;
-			}
-		}
-	}
-
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
-		outline-color: rgba($black, 0.3);
-	}
-
-	&.is-active .edit-site-global-styles-variations_item-preview,
-	&:focus-visible .edit-site-global-styles-variations_item-preview {
-		outline-color: $gray-900;
-		outline-offset: $border-width;
-		outline-width: var(--wp-admin-border-width-focus);
-	}
-
-	&:focus-visible .edit-site-global-styles-variations_item-preview {
-		outline-color: var(--wp-admin-theme-color);
-	}
-}

package/src/components/global-styles/variations/variation.js

@@ -1,108 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Tooltip } from '@wordpress/components';
-import { useMemo, useContext, useState } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import { _x, sprintf } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { unlock } from '../../../lock-unlock';
-
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
-	blockEditorPrivateApis
-);
-
-export default function Variation( {
-	variation,
-	children,
-	isPill,
-	properties,
-	showTooltip,
-} ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-
-	const context = useMemo( () => {
-		let merged = mergeBaseAndUserConfigs( base, variation );
-		if ( properties ) {
-			merged = filterObjectByProperties( merged, properties );
-		}
-		return {
-			user: variation,
-			base,
-			merged,
-			setUserConfig: () => {},
-		};
-	}, [ variation, base, properties ] );
-
-	const selectVariation = () => setUserConfig( variation );
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo(
-		() => areGlobalStyleConfigsEqual( user, variation ),
-		[ user, variation ]
-	);
-
-	let label = variation?.title;
-	if ( variation?.description ) {
-		label = sprintf(
-			/* translators: 1: variation title. 2: variation description. */
-			_x( '%1$s (%2$s)', 'variation label' ),
-			variation?.title,
-			variation?.description
-		);
-	}
-
-	const content = (
-		<div
-			className={ clsx( 'edit-site-global-styles-variations_item', {
-				'is-active': isActive,
-			} ) }
-			role="button"
-			onClick={ selectVariation }
-			onKeyDown={ selectOnEnter }
-			tabIndex="0"
-			aria-label={ label }
-			aria-current={ isActive }
-			onFocus={ () => setIsFocused( true ) }
-			onBlur={ () => setIsFocused( false ) }
-		>
-			<div
-				className={ clsx(
-					'edit-site-global-styles-variations_item-preview',
-					{ 'is-pill': isPill }
-				) }
-			>
-				{ children( isFocused ) }
-			</div>
-		</div>
-	);
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			{ showTooltip ? (
-				<Tooltip text={ variation?.title }>{ content }</Tooltip>
-			) : (
-				content
-			) }
-		</GlobalStylesContext.Provider>
-	);
-}