@wordpress/edit-site 5.28.5 → 5.30.0

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;
 }
@@ -173,7 +139,7 @@
 }
 
 .edit-site-global-styles-screen-css-help-link {
-	display: block;
+	display: inline-block;
 	margin-top: $grid-unit-10;
 }
 .edit-site-global-styles-screen-variations {

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>
+	);
+}

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

@@ -15,7 +15,6 @@ import {
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
 const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
@@ -26,7 +25,7 @@ export default function DocumentTools( {
 	isDistractionFree,
 } ) {
 	const { isVisualMode } = useSelect( ( select ) => {
-		const { getEditorMode } = select( editSiteStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
 			isVisualMode: getEditorMode() === 'visual',

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,15 +125,13 @@ export default function HeaderEditMode() {
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
 					/>
-					{ isTopToolbar && (
+					{ showTopToolbar && (
 						<>
 							<div
 								className={ classnames(
 									'selected-block-tools-wrapper',
 									{
-										'is-collapsed':
-											isBlockToolsCollapsed ||
-											! hasBlockSelected,
+										'is-collapsed': isBlockToolsCollapsed,
 									}
 								) }
 							>
@@ -146,24 +141,20 @@ 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' )
+								}
+							/>
 						</>
 					) }
 				</motion.div>
@@ -175,7 +166,7 @@ export default function HeaderEditMode() {
 						'edit-site-header-edit-mode__center',
 						{
 							'is-collapsed':
-								! isBlockToolsCollapsed && isLargeViewport,
+								! isBlockToolsCollapsed && showTopToolbar,
 						}
 					) }
 				>
@@ -208,7 +199,7 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<PostViewLink />
-					<SaveButton />
+					<SaveButton size="compact" />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />
 					) }