@wordpress/edit-site 5.2.0 → 5.3.1

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

@@ -8,6 +8,7 @@ import {
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
 	__experimentalTextDecorationControl as TextDecorationControl,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
@@ -19,7 +20,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );
@@ -38,14 +42,21 @@ export function useHasTypographyPanel( name ) {
 
 function useHasFontFamilyControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
+		'typography.fontFamilies',
+		name
+	);
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ||
+		fontFamiliesPerOrigin?.theme ||
+		fontFamiliesPerOrigin?.default;
 	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
 }
 
 function useHasLineHeightControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'typography.lineHeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.lineHeight', name )[ 0 ] &&
 		supports.includes( 'lineHeight' )
 	);
 }
@@ -53,10 +64,10 @@ function useHasLineHeightControl( name ) {
 function useHasAppearanceControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	return hasFontStyles || hasFontWeights;
 }
@@ -64,10 +75,10 @@ function useHasAppearanceControl( name ) {
 function useAppearanceControlLabel( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
@@ -79,7 +90,7 @@ function useAppearanceControlLabel( name ) {
 }
 
 function useHasLetterSpacingControl( name, element ) {
-	const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
+	const setting = useGlobalSetting( 'typography.letterSpacing', name )[ 0 ];
 	if ( ! setting ) {
 		return false;
 	}
@@ -91,7 +102,7 @@ function useHasLetterSpacingControl( name, element ) {
 }
 
 function useHasTextTransformControl( name, element ) {
-	const setting = useSetting( 'typography.textTransform', name )[ 0 ];
+	const setting = useGlobalSetting( 'typography.textTransform', name )[ 0 ];
 	if ( ! setting ) {
 		return false;
 	}
@@ -110,16 +121,16 @@ function useHasTextDecorationControl( name, element ) {
 }
 
 function useStyleWithReset( path, blockName ) {
-	const [ style, setStyle ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const [ style, setStyle ] = useGlobalStyle( path, blockName );
+	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
 	const hasStyle = () => !! userStyle;
 	const resetStyle = () => setStyle( undefined );
 	return [ style, setStyle, hasStyle, resetStyle ];
 }
 
 function useFontSizeWithReset( path, blockName ) {
-	const [ fontSize, setStyleCallback ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const [ fontSize, setStyleCallback ] = useGlobalStyle( path, blockName );
+	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
 	const hasFontSize = () => !! userStyle;
 	const resetFontSize = () => setStyleCallback( undefined );
 	const setFontSize = ( newValue, metadata ) => {
@@ -138,20 +149,20 @@ function useFontSizeWithReset( path, blockName ) {
 }
 
 function useFontAppearance( prefix, name ) {
-	const [ fontStyle, setFontStyle ] = useStyle(
+	const [ fontStyle, setFontStyle ] = useGlobalStyle(
 		prefix + 'typography.fontStyle',
 		name
 	);
-	const [ userFontStyle ] = useStyle(
+	const [ userFontStyle ] = useGlobalStyle(
 		prefix + 'typography.fontStyle',
 		name,
 		'user'
 	);
-	const [ fontWeight, setFontWeight ] = useStyle(
+	const [ fontWeight, setFontWeight ] = useGlobalStyle(
 		prefix + 'typography.fontWeight',
 		name
 	);
-	const [ userFontWeight ] = useStyle(
+	const [ userFontWeight ] = useGlobalStyle(
 		prefix + 'typography.fontWeight',
 		name,
 		'user'
@@ -175,7 +186,7 @@ export default function TypographyPanel( {
 	name,
 	element,
 	headingLevel,
-	variationPath = '',
+	variation = '',
 } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
@@ -184,18 +195,37 @@ export default function TypographyPanel( {
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
-	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
+	if ( variation ) {
+		prefix = prefix
+			? `variations.${ variation }.${ prefix }`
+			: `variations.${ variation }`;
+	}
+	const [ fontSizesPerOrigin ] = useGlobalSetting(
+		'typography.fontSizes',
+		name
+	);
+	const fontSizes =
+		fontSizesPerOrigin?.custom ||
+		fontSizesPerOrigin?.theme ||
+		fontSizesPerOrigin?.default;
 
-	const disableCustomFontSizes = ! useSetting(
+	const disableCustomFontSizes = ! useGlobalSetting(
 		'typography.customFontSize',
 		name
 	)[ 0 ];
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
+		'typography.fontFamilies',
+		name
+	);
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ||
+		fontFamiliesPerOrigin?.theme ||
+		fontFamiliesPerOrigin?.default;
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
@@ -215,15 +245,9 @@ export default function TypographyPanel( {
 	}
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.fontFamily',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.fontFamily', name );
 	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset(
-			variationPath + prefix + 'typography.fontSize',
-			name
-		);
+		useFontSizeWithReset( prefix + 'typography.fontSize', name );
 	const {
 		fontStyle,
 		setFontStyle,
@@ -231,39 +255,27 @@ export default function TypographyPanel( {
 		setFontWeight,
 		hasFontAppearance,
 		resetFontAppearance,
-	} = useFontAppearance( variationPath + prefix, name );
+	} = useFontAppearance( prefix, name );
 	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.lineHeight',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.lineHeight', name );
 	const [
 		letterSpacing,
 		setLetterSpacing,
 		hasLetterSpacing,
 		resetLetterSpacing,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.letterSpacing',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
 	const [
 		textTransform,
 		setTextTransform,
 		hasTextTransform,
 		resetTextTransform,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textTransform',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textTransform', name );
 	const [
 		textDecoration,
 		setTextDecoration,
 		hasTextDecoration,
 		resetTextDecoration,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textDecoration',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
 
 	const resetAll = () => {
 		resetFontFamily();

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

@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
 export default function TypographyPreview( { name, element, headingLevel } ) {
 	let prefix = '';
@@ -11,14 +18,26 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 		prefix = `elements.${ element }.`;
 	}
 
-	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
-	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
-	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
-	const [ color ] = useStyle( prefix + 'color.text', name );
-	const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );
-	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
-	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
-	const [ letterSpacing ] = useStyle(
+	const [ fontFamily ] = useGlobalStyle(
+		prefix + 'typography.fontFamily',
+		name
+	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
+	const [ backgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
+		name
+	);
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
+	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
+	const [ fontStyle ] = useGlobalStyle(
+		prefix + 'typography.fontStyle',
+		name
+	);
+	const [ fontWeight ] = useGlobalStyle(
+		prefix + 'typography.fontWeight',
+		name
+	);
+	const [ letterSpacing ] = useGlobalStyle(
 		prefix + 'typography.letterSpacing',
 		name
 	);

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

@@ -5,10 +5,16 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
+	createSlotFill,
+	DropdownMenu,
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
-
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { experiments as blockEditorExperiments } 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';
 
 /**
  * Internal dependencies
@@ -31,6 +37,61 @@ import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
+import { unlock } from '../../experiments';
+
+const SLOT_FILL_NAME = 'GlobalStylesMenu';
+const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
+	createSlotFill( SLOT_FILL_NAME );
+
+function GlobalStylesActionMenu() {
+	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' ] ?? false,
+		};
+	}, [] );
+	const { useGlobalStylesReset } = unlock( blockEditorExperiments );
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { goTo } = useNavigator();
+	const loadCustomCSS = () => goTo( '/css' );
+	return (
+		<GlobalStylesMenuFill>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More Styles actions' ) }
+				controls={ [
+					{
+						title: __( 'Reset to defaults' ),
+						onClick: onReset,
+						isDisabled: ! canReset,
+					},
+					{
+						title: __( 'Welcome Guide' ),
+						onClick: () =>
+							toggle( 'core/edit-site', 'welcomeGuideStyles' ),
+					},
+					...( canEditCSS
+						? [
+								{
+									title: __( 'Additional CSS' ),
+									onClick: loadCustomCSS,
+								},
+						  ]
+						: [] ),
+				] }
+			/>
+		</GlobalStylesMenuFill>
+	);
+}
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -68,19 +129,27 @@ function BlockStyleVariationsScreens( { name } ) {
 				'/variations/' +
 				encodeURIComponent( variation.name )
 			}
+			variation={ variation.name }
 		/>
 	) );
 }
 
-function ContextScreens( { name, parentMenu = '' } ) {
-	const hasVariationPath = parentMenu.search( 'variations' );
-	const variationPath =
-		hasVariationPath !== -1
-			? parentMenu
-					.substring( hasVariationPath )
-					.replace( '/', '.' )
-					.concat( '', '.' )
-			: '';
+function BlockStylesNavigationScreens( {
+	parentMenu,
+	blockStyles,
+	blockName,
+} ) {
+	return blockStyles.map( ( style, index ) => (
+		<GlobalStylesNavigationScreen
+			key={ index }
+			path={ parentMenu + '/variations/' + style.name }
+		>
+			<ScreenVariation blockName={ blockName } style={ style } />
+		</GlobalStylesNavigationScreen>
+	) );
+}
+
+function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -89,24 +158,10 @@ function ContextScreens( { name, parentMenu = '' } ) {
 		[ name ]
 	);
 
-	const BlockStylesNavigationScreens = ( { blockStyles, blockName } ) => {
-		return blockStyles.map( ( style, index ) => (
-			<GlobalStylesNavigationScreen
-				key={ index }
-				path={ parentMenu + '/variations/' + style.name }
-			>
-				<ScreenVariation blockName={ blockName } style={ style } />
-			</GlobalStylesNavigationScreen>
-		) );
-	};
-
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenTypography name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -134,7 +189,7 @@ function ContextScreens( { name, parentMenu = '' } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } variationPath={ variationPath } />
+				<ScreenColors name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -146,54 +201,44 @@ function ContextScreens( { name, parentMenu = '' } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/background' }
 			>
-				<ScreenBackgroundColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenLinkColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/heading' }
 			>
-				<ScreenHeadingColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenHeadingColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenButtonColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } variationPath={ variationPath } />
+				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } variationPath={ variationPath } />
+				<ScreenLayout name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
+				<ScreenCSS name={ name } />
 			</GlobalStylesNavigationScreen>
 
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
+					parentMenu={ parentMenu }
 					blockStyles={ blockStyleVariations }
 					blockName={ name }
 				/>
@@ -280,11 +325,10 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
-			<GlobalStylesNavigationScreen path="/css">
-				<ScreenCSS />
-			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesActionMenu />
 		</NavigatorProvider>
 	);
 }
-
+export { GlobalStylesMenuSlot };
 export default GlobalStylesUI;