@wordpress/edit-site 5.3.6 → 5.5.0

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

@@ -1,186 +1,19 @@
 /**
  * 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';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
 import { unlock } from '../../private-apis';
 
-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,
+	useSettingsForBlockElement,
+	TypographyPanel: StylesTypographyPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function TypographyPanel( {
 	name,
@@ -188,234 +21,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 }`;
-	}
-	const [ fontSizesPerOrigin ] = useGlobalSetting(
-		'typography.fontSizes',
-		name
-	);
-	const fontSizes =
-		fontSizesPerOrigin?.custom ||
-		fontSizesPerOrigin?.theme ||
-		fontSizesPerOrigin?.default;
-
-	const disableCustomFontSizes = ! useGlobalSetting(
-		'typography.customFontSize',
-		name
-	)[ 0 ];
-	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
-		'typography.fontFamilies',
-		name
-	);
-	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(
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	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 settings = useSettingsForBlockElement(
+		rawSettings,
 		name,
-		element
+		usedElement
 	);
 
-	/* 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/global-styles/ui.js

@@ -24,6 +24,7 @@ import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -205,6 +206,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
+				<ScreenFilters name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

package/src/components/keyboard-shortcuts/index.js

@@ -10,7 +10,9 @@ import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -41,6 +43,38 @@ function KeyboardShortcuts() {
 		useDispatch( interfaceStore );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
@@ -85,6 +119,20 @@ function KeyboardShortcuts() {
 		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
 	} );
 
+	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/edit-site/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 
@@ -208,6 +256,28 @@ function KeyboardShortcutsRegister() {
 				character: 'm',
 			},
 		} );
+
+		registerShortcut( {
+			name: `core/edit-site/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

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" />