@wordpress/edit-site 5.29.0 → 5.31.0

package/src/components/global-styles/typography-example.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { unlock } from '../../lock-unlock';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFontFamilies } from './utils';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export default function PreviewTypography( { fontSize, variation } ) {
+	const { base } = useContext( GlobalStylesContext );
+	let config = base;
+	if ( variation ) {
+		config = mergeBaseAndUserConfigs( base, variation );
+	}
+	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
+	const bodyPreviewStyle = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
+	const headingPreviewStyle = headingFontFamilies
+		? getFamilyPreviewStyle( headingFontFamilies )
+		: {};
+
+	if ( fontSize ) {
+		bodyPreviewStyle.fontSize = fontSize;
+		headingPreviewStyle.fontSize = fontSize;
+	}
+
+	return (
+		<motion.div
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: 0.3,
+				type: 'tween',
+			} }
+			style={ {
+				textAlign: 'center',
+			} }
+		>
+			<span style={ headingPreviewStyle }>
+				{ _x( 'A', 'Uppercase letter A' ) }
+			</span>
+			<span style={ bodyPreviewStyle }>
+				{ _x( 'a', 'Lowercase letter A' ) }
+			</span>
+		</motion.div>
+	);
+}

package/src/components/global-styles/typography-preview.js

@@ -27,6 +27,7 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 		prefix + 'color.background',
 		name
 	);
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
 	const [ fontStyle ] = useGlobalStyle(
@@ -53,7 +54,8 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 			className="edit-site-typography-preview"
 			style={ {
 				fontFamily: fontFamily ?? 'serif',
-				background: gradientValue ?? backgroundColor,
+				background:
+					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
 				color,
 				fontSize,
 				fontStyle,

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

@@ -230,12 +230,14 @@ function GlobalStylesBlockLink() {
 }
 
 function GlobalStylesEditorCanvasContainerLink() {
-	const { goTo } = useNavigator();
+	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
@@ -249,11 +251,33 @@ function GlobalStylesEditorCanvasContainerLink() {
 			case 'global-styles-css':
 				goTo( '/css' );
 				break;
+			case 'style-book':
+				/*
+				 * 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.
+				 */
+				if ( isRevisionsOpen ) {
+					goTo( '/' );
+				}
+				break;
 			default:
+				/*
+				 * Example: the user has navigated to "Browse styles" or elsewhere
+				 * and changes the editorCanvasContainerView, e.g., closes the style book.
+				 * The panel should not be affected.
+				 * Exclude revisions panel from this behavior,
+				 * as it should close when the editorCanvasContainerView doesn't correspond.
+				 */
+				if ( path !== '/' && ! isRevisionsOpen ) {
+					return;
+				}
 				goTo( '/' );
 				break;
 		}
-	}, [ editorCanvasContainerView, goTo ] );
+	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
 function GlobalStylesUI() {

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

@@ -10,3 +10,40 @@ export function getVariationClassName( variation ) {
 	}
 	return `is-style-${ variation }`;
 }
+
+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 fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	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

@@ -0,0 +1,38 @@
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		box-shadow: 0 0 0 $border-width $gray-200;
+		// Shown in Windows 10 high contrast mode.
+		outline: 1px solid transparent;
+
+		.edit-site-global-styles-color-variations & {
+			padding: $grid-unit-10;
+		}
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 $border-width $gray-900;
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
+	}
+
+	&:hover .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+
+	&:focus .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	&:focus-visible {
+		// Shown in Windows 10 high contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: 0;
+	}
+}

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

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { unlock } from '../../../lock-unlock';
+
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+
+export default function Variation( { variation, children } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
+	const context = useMemo(
+		() => ( {
+			user: {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			},
+			base,
+			merged: mergeBaseAndUserConfigs( base, variation ),
+			setUserConfig: () => {},
+		} ),
+		[ variation, base ]
+	);
+
+	const selectVariation = () => {
+		setUserConfig( () => ( {
+			settings: variation.settings,
+			styles: variation.styles,
+		} ) );
+	};
+
+	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$s: variation title. %2$s variation description. */
+			__( '%1$s (%2$s)' ),
+			variation?.title,
+			variation?.description
+		);
+	}
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			<div
+				className={ classnames(
+					'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="edit-site-global-styles-variations_item-preview">
+					{ children( isFocused ) }
+				</div>
+			</div>
+		</GlobalStylesContext.Provider>
+	);
+}

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

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Variation from './variation';
+import StylesPreviewColors from '../preview-colors';
+import { useColorVariations } from '../hooks';
+
+export default function ColorVariations() {
+	const colorVariations = useColorVariations();
+
+	if ( ! colorVariations?.length ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			<Grid columns={ 3 }>
+				{ colorVariations.map( ( variation, index ) => (
+					<Variation key={ index } variation={ variation }>
+						{ () => <StylesPreviewColors /> }
+					</Variation>
+				) ) }
+			</Grid>
+		</VStack>
+	);
+}

package/src/components/global-styles/{variations-panel.js → variations/variations-panel.js}

@@ -8,7 +8,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 
-import { NavigationButtonAsItem } from './navigation-button';
+import { NavigationButtonAsItem } from '../navigation-button';
 
 function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useTypographyVariations } from '../hooks';
+import TypographyExample from '../typography-example';
+import PreviewIframe from '../preview-iframe';
+import Variation from './variation';
+
+export default function TypographyVariations() {
+	const typographyVariations = useTypographyVariations();
+
+	if ( ! typographyVariations?.length ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			<Grid
+				columns={ 3 }
+				className="edit-site-global-styles-style-variations-container"
+			>
+				{ typographyVariations &&
+					typographyVariations.length &&
+					typographyVariations.map( ( variation, index ) => (
+						<Variation key={ index } variation={ variation }>
+							{ ( isFocused ) => (
+								<PreviewIframe
+									label={ variation?.title }
+									isFocused={ isFocused }
+								>
+									{ ( { ratio, key } ) => (
+										<HStack
+											key={ key }
+											spacing={ 10 * ratio }
+											justify="center"
+											style={ {
+												height: '100%',
+												overflow: 'hidden',
+											} }
+										>
+											<TypographyExample
+												variation={ variation }
+												fontSize={ 85 * ratio }
+											/>
+										</HStack>
+									) }
+								</PreviewIframe>
+							) }
+						</Variation>
+					) ) }
+			</Grid>
+		</VStack>
+	);
+}

package/src/components/header-edit-mode/index.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import {
 	BlockToolbar,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -42,6 +43,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
 export default function HeaderEditMode() {
@@ -52,8 +54,6 @@ export default function HeaderEditMode() {
 		blockSelectionStart,
 		showIconLabels,
 		editorCanvasView,
-		hasFixedToolbar,
-		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const { getEditedPostType } = select( editSiteStore );
 		const { getBlockSelectionStart, __unstableGetEditorMode } =
@@ -70,14 +70,13 @@ export default function HeaderEditMode() {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			isDistractionFree: getPreference( 'core', 'distractionFree' ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
+	const { showFixedToolbar } = useShowBlockTools();
+	const showTopToolbar = isLargeViewport && showFixedToolbar;
 	const blockToolbarRef = useRef();
 	const disableMotion = useReducedMotion();
 
@@ -90,8 +89,6 @@ export default function HeaderEditMode() {
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	const hasBlockSelected = !! blockSelectionStart;
-
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
 		if ( blockSelectionStart ) {
@@ -128,7 +125,7 @@ export default function HeaderEditMode() {
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
 					/>
-					{ isTopToolbar && (
+					{ showTopToolbar && (
 						<>
 							<div
 								className={ classnames(
@@ -144,24 +141,21 @@ export default function HeaderEditMode() {
 								ref={ blockToolbarRef }
 								name="block-toolbar"
 							/>
-							{ hasBlockSelected && (
-								<Button
-									className="edit-site-header-edit-mode__block-tools-toggle"
-									icon={
-										isBlockToolsCollapsed ? next : previous
-									}
-									onClick={ () => {
-										setIsBlockToolsCollapsed(
-											( collapsed ) => ! collapsed
-										);
-									} }
-									label={
-										isBlockToolsCollapsed
-											? __( 'Show block tools' )
-											: __( 'Hide block tools' )
-									}
-								/>
-							) }
+							<Button
+								className="edit-site-header-edit-mode__block-tools-toggle"
+								icon={ isBlockToolsCollapsed ? next : previous }
+								onClick={ () => {
+									setIsBlockToolsCollapsed(
+										( collapsed ) => ! collapsed
+									);
+								} }
+								label={
+									isBlockToolsCollapsed
+										? __( 'Show block tools' )
+										: __( 'Hide block tools' )
+								}
+								size="compact"
+							/>
 						</>
 					) }
 				</motion.div>
@@ -173,7 +167,7 @@ export default function HeaderEditMode() {
 						'edit-site-header-edit-mode__center',
 						{
 							'is-collapsed':
-								! isBlockToolsCollapsed && isLargeViewport,
+								! isBlockToolsCollapsed && showTopToolbar,
 						}
 					) }
 				>

package/src/components/header-edit-mode/more-menu/index.js

@@ -4,13 +4,14 @@
 import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external } from '@wordpress/icons';
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { external, moreVertical } from '@wordpress/icons';
 import {
-	ActionItem,
-	MoreMenuDropdown,
-	store as interfaceStore,
-} from '@wordpress/interface';
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -55,10 +56,18 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	return (
 		<>
-			<MoreMenuDropdown
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
 				toggleProps={ {
 					showTooltip: ! showIconLabels,
 					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
 				} }
 			>
 				{ ( { onClose } ) => (
@@ -162,7 +171,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal />
 			<EditSitePreferencesModal />
 		</>

package/src/components/header-edit-mode/style.scss

@@ -256,3 +256,7 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__block-tools-toggle {
 	margin-left: 2px; // Allow focus ring to be fully visible
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -46,4 +46,8 @@ export const textFormattingShortcuts = [
 			'Convert the current paragraph or heading to a heading of level 1 to 6.'
 		),
 	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
 ];

package/src/components/keyboard-shortcuts/global.js

@@ -4,29 +4,41 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function KeyboardShortcutsGlobal() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
+	const { hasNonPostEntityChanges } = useSelect( editorStore );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const isDirty = !! dirtyEntityRecords.length;
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
 		const isSaving = dirtyEntityRecords.some( ( record ) =>
 			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
-
-		if ( ! isSaving && isDirty ) {
-			setIsSaveViewOpened( true );
+		const _hasNonPostEntityChanges = hasNonPostEntityChanges();
+		const isViewMode = getCanvasMode() === 'view';
+		if (
+			( ! hasDirtyEntities || ! _hasNonPostEntityChanges || isSaving ) &&
+			! isViewMode
+		) {
+			return;
 		}
+		// At this point, we know that there are dirty entities, other than
+		// the edited post, and we're not in the process of saving, so open
+		// save view.
+		setIsSaveViewOpened( true );
 	} );
 
 	return null;

package/src/components/layout/index.js

@@ -70,6 +70,7 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
+		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -96,6 +97,9 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -172,6 +176,7 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
+						'is-zoom-out': isZoomOutMode,
 					}
 				) }
 			>

package/src/components/layout/router.js

@@ -45,12 +45,7 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// List layout is still experimental.
-	// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.
-	const isListLayout =
-		isCustom !== 'true' &&
-		layout === 'list' &&
-		window?.__experimentalAdminViews;
+	const isListLayout = isCustom !== 'true' && layout === 'list';
 
 	if ( path === '/pages' ) {
 		return {
@@ -80,7 +75,7 @@ export default function useLayoutAreas() {
 	}
 
 	// Templates
-	if ( path === '/wp_template/all' ) {
+	if ( path === '/wp_template' ) {
 		return {
 			areas: {
 				content: (