@wordpress/edit-site 5.3.3 → 5.4.0

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

@@ -1,186 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	LineHeightControl,
-	__experimentalFontFamilyControl as FontFamilyControl,
-	__experimentalFontAppearanceControl as FontAppearanceControl,
-	__experimentalLetterSpacingControl as LetterSpacingControl,
-	__experimentalTextTransformControl as TextTransformControl,
-	__experimentalTextDecorationControl as TextDecorationControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	FontSizePicker,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
 import { unlock } from '../../private-apis';
+import { useSupportedStyles } from './hooks';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-export function useHasTypographyPanel( name ) {
-	const hasFontFamily = useHasFontFamilyControl( name );
-	const hasLineHeight = useHasLineHeightControl( name );
-	const hasFontAppearance = useHasAppearanceControl( name );
-	const hasLetterSpacing = useHasLetterSpacingControl( name );
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		hasFontFamily ||
-		hasLineHeight ||
-		hasFontAppearance ||
-		hasLetterSpacing ||
-		supports.includes( 'fontSize' )
-	);
-}
-
-function useHasFontFamilyControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( 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 (
-		useGlobalSetting( 'typography.lineHeight', name )[ 0 ] &&
-		supports.includes( 'lineHeight' )
-	);
-}
-
-function useHasAppearanceControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	return hasFontStyles || hasFontWeights;
-}
-
-function useAppearanceControlLabel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	if ( ! hasFontStyles ) {
-		return __( 'Font weight' );
-	}
-	if ( ! hasFontWeights ) {
-		return __( 'Font style' );
-	}
-	return __( 'Appearance' );
-}
-
-function useHasLetterSpacingControl( name, element ) {
-	const setting = useGlobalSetting( 'typography.letterSpacing', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'letterSpacing' );
-}
-
-function useHasTextTransformControl( name, element ) {
-	const setting = useGlobalSetting( 'typography.textTransform', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'textTransform' );
-}
-
-function useHasTextDecorationControl( name, element ) {
-	// This is an exception for link elements.
-	// We shouldn't allow other blocks or elements to set textDecoration
-	// because this will be inherited by their children.
-	return ! name && element === 'link';
-}
-
-function useStyleWithReset( path, blockName ) {
-	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 ] = useGlobalStyle( path, blockName );
-	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
-	const hasFontSize = () => !! userStyle;
-	const resetFontSize = () => setStyleCallback( undefined );
-	const setFontSize = ( newValue, metadata ) => {
-		if ( !! metadata?.slug ) {
-			newValue = `var:preset|font-size|${ metadata?.slug }`;
-		}
-		setStyleCallback( newValue );
-	};
-
-	return {
-		fontSize,
-		setFontSize,
-		hasFontSize,
-		resetFontSize,
-	};
-}
-
-function useFontAppearance( prefix, name ) {
-	const [ fontStyle, setFontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ userFontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name,
-		'user'
-	);
-	const [ fontWeight, setFontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
-	const [ userFontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name,
-		'user'
-	);
-	const hasFontAppearance = () => !! userFontStyle || !! userFontWeight;
-	const resetFontAppearance = () => {
-		setFontStyle( undefined );
-		setFontWeight( undefined );
-	};
-	return {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	};
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	overrideSettingsWithSupports,
+	TypographyPanel: StylesTypographyPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function TypographyPanel( {
 	name,
@@ -188,234 +23,35 @@ export default function TypographyPanel( {
 	headingLevel,
 	variation = '',
 } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	let prefix = '';
+	let prefixParts = [];
 	if ( element === 'heading' ) {
-		prefix = `elements.${ headingLevel }.`;
+		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
-		prefix = `elements.${ element }.`;
+		prefixParts = prefixParts.concat( [ 'elements', element ] );
 	}
 	if ( variation ) {
-		prefix = prefix
-			? `variations.${ variation }.${ prefix }`
-			: `variations.${ variation }`;
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
 	}
-	const [ fontSizesPerOrigin ] = useGlobalSetting(
-		'typography.fontSizes',
-		name
-	);
-	const fontSizes =
-		fontSizesPerOrigin?.custom ||
-		fontSizesPerOrigin?.theme ||
-		fontSizesPerOrigin?.default;
+	const prefix = prefixParts.join( '.' );
 
-	const disableCustomFontSizes = ! useGlobalSetting(
-		'typography.customFontSize',
-		name
-	)[ 0 ];
-	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
-		'typography.fontFamilies',
-		name
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const usedElement = element === 'heading' ? headingLevel : element;
+	const supports = useSupportedStyles( name, usedElement );
+	const settings = useMemo(
+		() => overrideSettingsWithSupports( rawSettings, supports ),
+		[ rawSettings, supports ]
 	);
-	const fontFamilies =
-		fontFamiliesPerOrigin?.custom ||
-		fontFamiliesPerOrigin?.theme ||
-		fontFamiliesPerOrigin?.default;
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
-	const hasLineHeightEnabled = useHasLineHeightControl( name );
-	const hasAppearanceControl = useHasAppearanceControl( name );
-	const appearanceControlLabel = useAppearanceControlLabel( name );
-	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
-	const hasTextTransformControl = useHasTextTransformControl( name, element );
-	const hasTextDecorationControl = useHasTextDecorationControl(
-		name,
-		element
-	);
-
-	/* Disable font size controls when the option to style all headings is selected. */
-	let hasFontSizeEnabled = supports.includes( 'fontSize' );
-	if ( element === 'heading' && headingLevel === 'heading' ) {
-		hasFontSizeEnabled = false;
-	}
-
-	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset( prefix + 'typography.fontFamily', name );
-	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset( prefix + 'typography.fontSize', name );
-	const {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	} = useFontAppearance( prefix, name );
-	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset( prefix + 'typography.lineHeight', name );
-	const [
-		letterSpacing,
-		setLetterSpacing,
-		hasLetterSpacing,
-		resetLetterSpacing,
-	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
-	const [
-		textTransform,
-		setTextTransform,
-		hasTextTransform,
-		resetTextTransform,
-	] = useStyleWithReset( prefix + 'typography.textTransform', name );
-	const [
-		textDecoration,
-		setTextDecoration,
-		hasTextDecoration,
-		resetTextDecoration,
-	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
-
-	const resetAll = () => {
-		resetFontFamily();
-		resetFontSize();
-		resetFontAppearance();
-		resetLineHeight();
-		resetLetterSpacing();
-		resetTextTransform();
-	};
 
 	return (
-		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
-			{ hasFontFamilyEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font family' ) }
-					hasValue={ hasFontFamily }
-					onDeselect={ resetFontFamily }
-					isShownByDefault
-				>
-					<FontFamilyControl
-						fontFamilies={ fontFamilies }
-						value={ fontFamily }
-						onChange={ setFontFamily }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasFontSizeEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font size' ) }
-					hasValue={ hasFontSize }
-					onDeselect={ resetFontSize }
-					isShownByDefault
-				>
-					<FontSizePicker
-						value={ fontSize }
-						onChange={ setFontSize }
-						fontSizes={ fontSizes }
-						disableCustomFontSizes={ disableCustomFontSizes }
-						withReset={ false }
-						withSlider
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasAppearanceControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ appearanceControlLabel }
-					hasValue={ hasFontAppearance }
-					onDeselect={ resetFontAppearance }
-					isShownByDefault
-				>
-					<FontAppearanceControl
-						value={ {
-							fontStyle,
-							fontWeight,
-						} }
-						onChange={ ( {
-							fontStyle: newFontStyle,
-							fontWeight: newFontWeight,
-						} ) => {
-							setFontStyle( newFontStyle );
-							setFontWeight( newFontWeight );
-						} }
-						hasFontStyles={ hasFontStyles }
-						hasFontWeights={ hasFontWeights }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLineHeightEnabled && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Line height' ) }
-					hasValue={ hasLineHeight }
-					onDeselect={ resetLineHeight }
-					isShownByDefault
-				>
-					<LineHeightControl
-						__nextHasNoMarginBottom
-						__unstableInputWidth="auto"
-						value={ lineHeight }
-						onChange={ setLineHeight }
-						size="__unstable-large"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLetterSpacingControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Letter spacing' ) }
-					hasValue={ hasLetterSpacing }
-					onDeselect={ resetLetterSpacing }
-					isShownByDefault
-				>
-					<LetterSpacingControl
-						value={ letterSpacing }
-						onChange={ setLetterSpacing }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextTransformControl && (
-				<ToolsPanelItem
-					label={ __( 'Letter case' ) }
-					hasValue={ hasTextTransform }
-					onDeselect={ resetTextTransform }
-					isShownByDefault
-				>
-					<TextTransformControl
-						value={ textTransform }
-						onChange={ setTextTransform }
-						showNone
-						isBlock
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextDecorationControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Text decoration' ) }
-					hasValue={ hasTextDecoration }
-					onDeselect={ resetTextDecoration }
-					isShownByDefault
-				>
-					<TextDecorationControl
-						value={ textDecoration }
-						onChange={ setTextDecoration }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesTypographyPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }

package/src/components/navigation-inspector/index.js

@@ -3,14 +3,12 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	store as blockEditorStore,
 	BlockEditorProvider,
 } from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -71,11 +69,6 @@ export default function NavigationInspector( { onSelect } ) {
 		};
 	}, [] );
 
-	const navMenuListId = useInstanceId(
-		NavigationMenu,
-		'edit-site-navigation-inspector-menu'
-	);
-
 	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
 	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
 
@@ -99,14 +92,6 @@ export default function NavigationInspector( { onSelect } ) {
 		}
 	}, [ selectedNavigationBlockId ] );
 
-	let options = [];
-	if ( navigationMenus ) {
-		options = navigationMenus.map( ( { id, title } ) => ( {
-			value: id,
-			label: title.rendered,
-		} ) );
-	}
-
 	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_navigation',
@@ -137,8 +122,6 @@ export default function NavigationInspector( { onSelect } ) {
 
 	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
 
-	const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
-
 	const hasNavigationMenus = !! navigationMenus?.length;
 
 	// Entity block editor will return entities that are not currently published.
@@ -178,21 +161,6 @@ export default function NavigationInspector( { onSelect } ) {
 			{ ! hasResolvedNavigationMenus && (
 				<div className="edit-site-navigation-inspector__placeholder" />
 			) }
-			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
-				<SelectControl
-					__nextHasNoMarginBottom
-					className="edit-site-navigation-inspector__select-menu"
-					aria-controls={
-						// aria-controls should only apply when referenced element is in DOM
-						hasLoadedInnerBlocks ? navMenuListId : undefined
-					}
-					value={ currentMenuId || defaultNavigationMenuId }
-					options={ options }
-					onChange={ ( newMenuId ) =>
-						setCurrentMenuId( Number( newMenuId ) )
-					}
-				/>
-			) }
 			{ isLoading && (
 				<>
 					<div className="edit-site-navigation-inspector__placeholder is-child" />

package/src/components/navigation-inspector/navigation-menu.js

@@ -39,7 +39,7 @@ const ALLOWED_BLOCKS = {
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
-	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
@@ -56,5 +56,11 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
+	return (
+		<OffCanvasEditor
+			blocks={ innerBlocks }
+			onSelect={ onSelect }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
 }

package/src/components/sidebar/index.js

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,16 +35,6 @@ function SidebarScreens() {
 }
 
 function Sidebar() {
-	const { isDirty } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-		};
-	}, [] );
-
 	return (
 		<>
 			<NavigatorProvider
@@ -55,11 +43,10 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			{ isDirty && (
-				<div className="edit-site-sidebar__footer">
-					<SaveButton />
-				</div>
-			) }
+
+			<div className="edit-site-sidebar__footer">
+				<SaveButton />
+			</div>
 		</>
 	);
 }

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

@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings sidebar' ) }
+				closeLabel={ __( 'Close settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>

package/src/components/sidebar-edit-mode/template-card/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
+import { PanelRow, Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -13,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
+import LastRevision from './last-revision';
 
 export default function TemplateCard() {
 	const {
@@ -38,20 +40,28 @@ export default function TemplateCard() {
 	}
 
 	return (
-		<div className="edit-site-template-card">
-			<Icon className="edit-site-template-card__icon" icon={ icon } />
-			<div className="edit-site-template-card__content">
-				<div className="edit-site-template-card__header">
-					<h2 className="edit-site-template-card__title">
-						{ decodeEntities( title ) }
-					</h2>
-					<TemplateActions template={ template } />
+		<>
+			<div className="edit-site-template-card">
+				<Icon className="edit-site-template-card__icon" icon={ icon } />
+				<div className="edit-site-template-card__content">
+					<div className="edit-site-template-card__header">
+						<h2 className="edit-site-template-card__title">
+							{ decodeEntities( title ) }
+						</h2>
+						<TemplateActions template={ template } />
+					</div>
+					<div className="edit-site-template-card__description">
+						{ decodeEntities( description ) }
+					</div>
+					<TemplateAreas />
 				</div>
-				<div className="edit-site-template-card__description">
-					{ decodeEntities( description ) }
-				</div>
-				<TemplateAreas />
 			</div>
-		</div>
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
+			>
+				<LastRevision />
+			</PanelRow>
+		</>
 	);
 }