@wordpress/edit-site 5.1.0 → 5.3.0

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'
@@ -171,7 +182,12 @@ function useFontAppearance( prefix, name ) {
 	};
 }
 
-export default function TypographyPanel( { name, element, headingLevel } ) {
+export default function TypographyPanel( {
+	name,
+	element,
+	headingLevel,
+	variation = '',
+} ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
 	if ( element === 'heading' ) {
@@ -179,18 +195,37 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	} 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 );

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,8 +5,15 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
+	createSlotFill,
+	DropdownMenu,
 } from '@wordpress/components';
-import { getBlockTypes } from '@wordpress/blocks';
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+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';
 
 /**
  * Internal dependencies
@@ -25,9 +32,47 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+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 { 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' ),
+					},
+					{
+						title: __( 'Additional CSS' ),
+						onClick: loadCustomCSS,
+					},
+				] }
+			/>
+		</GlobalStylesMenuFill>
+	);
+}
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -43,14 +88,61 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function ContextScreens( { name } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+function BlockStyleVariationsScreens( { name } ) {
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	if ( ! blockStyleVariations?.length ) {
+		return null;
+	}
+
+	return blockStyleVariations.map( ( variation ) => (
+		<ContextScreens
+			key={ variation.name + name }
+			name={ name }
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( name ) +
+				'/variations/' +
+				encodeURIComponent( variation.name )
+			}
+			variation={ variation.name }
+		/>
+	) );
+}
+
+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 );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
 
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } />
+				<ScreenTypography name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -78,7 +170,7 @@ function ContextScreens( { name } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } />
+				<ScreenColors name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -90,36 +182,48 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/background' }
 			>
-				<ScreenBackgroundColor name={ name } />
+				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } />
+				<ScreenLinkColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/heading' }
 			>
-				<ScreenHeadingColor name={ name } />
+				<ScreenHeadingColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor name={ name } />
+				<ScreenButtonColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } />
+				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } />
+				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
+				<ScreenCSS name={ name } />
+			</GlobalStylesNavigationScreen>
+
+			{ !! blockStyleVariations?.length && (
+				<BlockStylesNavigationScreens
+					parentMenu={ parentMenu }
+					blockStyles={ blockStyleVariations }
+					blockName={ name }
+				/>
+			) }
 		</>
 	);
 }
@@ -154,6 +258,7 @@ function GlobalStylesStyleBook( { onClose } ) {
 
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
+
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -186,17 +291,25 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 				<ContextScreens
 					key={ 'screens-block-' + block.name }
 					name={ block.name }
+					parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
 				/>
 			) ) }
 
+			{ blocks.map( ( block, index ) => {
+				return (
+					<BlockStyleVariationsScreens
+						key={ 'screens-block-styles-' + block.name + index }
+						name={ block.name }
+					/>
+				);
+			} ) }
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
-			<GlobalStylesNavigationScreen path="/css">
-				<ScreenCSS />
-			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesActionMenu />
 		</NavigatorProvider>
 	);
 }
-
+export { GlobalStylesMenuSlot };
 export default GlobalStylesUI;