@wordpress/edit-site 5.29.0 → 5.30.0

package/src/components/global-styles/screen-revisions/index.js

@@ -73,7 +73,11 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
-		setEditorCanvasContainerView( undefined );
+		const canvasContainerView =
+			editorCanvasContainerView === 'global-styles-revisions:style-book'
+				? 'style-book'
+				: undefined;
+		setEditorCanvasContainerView( canvasContainerView );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -99,7 +103,6 @@ function ScreenRevisions() {
 			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
 		) {
 			goTo( '/' ); // Return to global styles main panel.
-			setEditorCanvasContainerView( editorCanvasContainerView );
 		}
 	}, [ editorCanvasContainerView ] );
 

package/src/components/global-styles/screen-root.js

@@ -24,7 +24,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
-import StylesPreview from './preview';
+import PreviewStyles from './preview-styles';
 import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -58,7 +58,7 @@ function ScreenRoot() {
 				<VStack spacing={ 4 }>
 					<Card>
 						<CardMedia>
-							<StylesPreview />
+							<PreviewStyles />
 						</CardMedia>
 					</Card>
 					{ hasVariations && (

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

@@ -9,9 +9,11 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import TypographyElements from './typogrphy-elements';
+import TypographyElements from './typography-elements';
+import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -19,6 +21,14 @@ function ScreenTypography() {
 			select( editorStore ).getEditorSettings().fontLibraryEnabled,
 		[]
 	);
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+			filter: ( variation ) =>
+				variation?.settings?.typography?.fontFamilies &&
+				Object.keys( variation?.settings?.typography?.fontFamilies )
+					.length,
+		} );
 
 	return (
 		<>
@@ -30,7 +40,14 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ fontLibraryEnabled && <FontFamilies /> }
+					{ !! typographyVariations.length && (
+						<TypographyVariations />
+					) }
+					{ ! window.__experimentalDisableFontLibrary && (
+						<VStack spacing={ 3 }>
+							{ fontLibraryEnabled && <FontFamilies /> }
+						</VStack>
+					) }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/global-styles/style-variations-container.js

@@ -1,104 +1,17 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
+import { useMemo } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
-import { unlock } from '../../lock-unlock';
-
-const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
-	blockEditorPrivateApis
-);
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return 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">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+import PreviewStyles from './preview-styles';
+import Variation from './variations/variation';
 
 export default function StyleVariationsContainer() {
 	const variations = useSelect( ( select ) => {
@@ -128,7 +41,16 @@ export default function StyleVariationsContainer() {
 			className="edit-site-global-styles-style-variations-container"
 		>
 			{ withEmptyVariation.map( ( variation, index ) => (
-				<Variation key={ index } variation={ variation } />
+				<Variation key={ index } variation={ variation }>
+					{ ( isFocused ) => (
+						<PreviewStyles
+							label={ variation?.title }
+							withHoverView
+							isFocused={ isFocused }
+							variation={ variation }
+						/>
+					) }
+				</Variation>
 			) ) }
 		</Grid>
 	);

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

@@ -91,40 +91,6 @@
 	margin: 0;
 }
 
-.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;
-
-	.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;
-	}
-
-	&.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;
-	}
-}
-
 .edit-site-global-styles-icon-with-current-color {
 	fill: currentColor;
 }

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 ( ! 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,44 @@
+.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;
+	}
+}
+
+.edit-site-global-styles_preview-typography {
+	font-size: 22px;
+	line-height: 44px;
+	text-align: center;
+}

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,30 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Subtitle from '../subtitle';
+import Variation from './variation';
+import StylesPreviewColors from '../preview-colors';
+
+export default function ColorVariations( { variations } ) {
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
+			<Grid columns={ 3 }>
+				{ variations.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,85 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } 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 { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import PreviewTypography from '../preview-typography';
+import Subtitle from '../subtitle';
+import { getFontFamilies } from '../utils';
+import Variation from './variation';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export default function TypographyVariations() {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+			filter: ( variation ) =>
+				variation?.settings?.typography?.fontFamilies &&
+				Object.keys( variation?.settings?.typography?.fontFamilies )
+					.length,
+		} );
+
+	const { base } = useContext( GlobalStylesContext );
+
+	/*
+	 * Filter duplicate variations based on the font families used in the variation.
+	 */
+	const uniqueTypographyVariations = typographyVariations?.length
+		? Object.values(
+				typographyVariations.reduce( ( acc, variation ) => {
+					const [ bodyFontFamily, headingFontFamily ] =
+						getFontFamilies(
+							mergeBaseAndUserConfigs( base, variation )
+						);
+					if (
+						headingFontFamily?.name &&
+						bodyFontFamily?.name &&
+						! acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						]
+					) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					}
+
+					return acc;
+				}, {} )
+		  )
+		: [];
+
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
+			<Grid
+				columns={ 3 }
+				className="edit-site-global-styles-style-variations-container"
+			>
+				{ typographyVariations && typographyVariations.length
+					? uniqueTypographyVariations.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation }>
+								{ () => (
+									<PreviewTypography
+										variation={ variation }
+									/>
+								) }
+							</Variation>
+					  ) )
+					: null }
+			</Grid>
+		</VStack>
+	);
+}