@wordpress/block-editor 11.3.2 → 11.4.0

package/src/hooks/typography.js

@@ -2,68 +2,38 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
-import { getFontAppearanceLabel } from '../components/font-appearance-control';
-
-import {
-	LINE_HEIGHT_SUPPORT_KEY,
-	LineHeightEdit,
-	hasLineHeightValue,
-	resetLineHeight,
-	useIsLineHeightDisabled,
-} from './line-height';
-import {
-	FONT_STYLE_SUPPORT_KEY,
-	FONT_WEIGHT_SUPPORT_KEY,
-	FontAppearanceEdit,
-	hasFontAppearanceValue,
-	resetFontAppearance,
-	useIsFontAppearanceDisabled,
-	useIsFontStyleDisabled,
-	useIsFontWeightDisabled,
-} from './font-appearance';
-import {
-	FONT_FAMILY_SUPPORT_KEY,
-	FontFamilyEdit,
-	hasFontFamilyValue,
-	resetFontFamily,
-	useIsFontFamilyDisabled,
-} from './font-family';
-import {
-	FONT_SIZE_SUPPORT_KEY,
-	FontSizeEdit,
-	hasFontSizeValue,
-	resetFontSize,
-	useIsFontSizeDisabled,
-} from './font-size';
-import {
-	TEXT_DECORATION_SUPPORT_KEY,
-	TextDecorationEdit,
-	hasTextDecorationValue,
-	resetTextDecoration,
-	useIsTextDecorationDisabled,
-} from './text-decoration';
 import {
-	TEXT_TRANSFORM_SUPPORT_KEY,
-	TextTransformEdit,
-	hasTextTransformValue,
-	resetTextTransform,
-	useIsTextTransformDisabled,
-} from './text-transform';
+	default as StylesTypographyPanel,
+	useHasTypographyPanel,
+} from '../components/global-styles/typography-panel';
+
+import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
+import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
+import { FONT_SIZE_SUPPORT_KEY } from './font-size';
+import { useSetting } from '../components';
+import { cleanEmptyObject } from './utils';
 import {
-	LETTER_SPACING_SUPPORT_KEY,
-	LetterSpacingEdit,
-	hasLetterSpacingValue,
-	resetLetterSpacing,
-	useIsLetterSpacingDisabled,
-} from './letter-spacing';
+	overrideSettingsWithSupports,
+	useSupportedStyles,
+} from '../components/global-styles/hooks';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
 
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -76,159 +46,124 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 
-export function TypographyPanel( props ) {
-	const { clientId } = props;
-	const isFontFamilyDisabled = useIsFontFamilyDisabled( props );
-	const isFontSizeDisabled = useIsFontSizeDisabled( props );
-	const isFontAppearanceDisabled = useIsFontAppearanceDisabled( props );
-	const isLineHeightDisabled = useIsLineHeightDisabled( props );
-	const isTextDecorationDisabled = useIsTextDecorationDisabled( props );
-	const isTextTransformDisabled = useIsTextTransformDisabled( props );
-	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
+function TypographyInspectorControl( { children } ) {
+	return (
+		<InspectorControls group="typography">{ children }</InspectorControls>
+	);
+}
 
-	const hasFontStyles = ! useIsFontStyleDisabled( props );
-	const hasFontWeights = ! useIsFontWeightDisabled( props );
+function useBlockSettings( name ) {
+	const fontFamilies = useSetting( 'typography.fontFamilies' );
+	const fontSizes = useSetting( 'typography.fontSizes' );
+	const customFontSize = useSetting( 'typography.customFontSize' );
+	const fontStyle = useSetting( 'typography.fontStyle' );
+	const fontWeight = useSetting( 'typography.fontWeight' );
+	const lineHeight = useSetting( 'typography.lineHeight' );
+	const textDecoration = useSetting( 'typography.textDecoration' );
+	const textTransform = useSetting( 'typography.textTransform' );
+	const letterSpacing = useSetting( 'typography.letterSpacing' );
+	const supports = useSupportedStyles( name, null );
 
-	const isDisabled = useIsTypographyDisabled( props );
-	const isSupported = hasTypographySupport( props.name );
+	return useMemo( () => {
+		const rawSettings = {
+			typography: {
+				fontFamilies: {
+					custom: fontFamilies,
+				},
+				fontSizes: {
+					custom: fontSizes,
+				},
+				customFontSize,
+				fontStyle,
+				fontWeight,
+				lineHeight,
+				textDecoration,
+				textTransform,
+				letterSpacing,
+			},
+		};
+		return overrideSettingsWithSupports( rawSettings, supports );
+	}, [
+		fontFamilies,
+		fontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textDecoration,
+		textTransform,
+		letterSpacing,
+		supports,
+	] );
+}
 
-	if ( isDisabled || ! isSupported ) return null;
+export function TypographyPanel( {
+	clientId,
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const settings = useBlockSettings( name );
+	const isEnabled = useHasTypographyPanel( settings );
+	const value = useMemo( () => {
+		return {
+			...attributes.style,
+			typography: {
+				...attributes.style?.typography,
+				fontFamily: attributes.fontFamily
+					? 'var:preset|font-family|' + attributes.fontFamily
+					: undefined,
+				fontSize: attributes.fontSize
+					? 'var:preset|font-size|' + attributes.fontSize
+					: attributes.style?.typography?.fontSize,
+			},
+		};
+	}, [ attributes.style, attributes.fontSize, attributes.fontFamily ] );
 
-	const defaultControls = getBlockSupport( props.name, [
+	const onChange = ( newStyle ) => {
+		const updatedStyle = { ...omit( newStyle, [ 'fontFamily' ] ) };
+		const fontSizeValue = newStyle?.typography?.fontSize;
+		const fontFamilyValue = newStyle?.typography?.fontFamily;
+		const fontSizeSlug = fontSizeValue?.startsWith(
+			'var:preset|font-size|'
+		)
+			? fontSizeValue.substring( 'var:preset|font-size|'.length )
+			: undefined;
+		const fontFamilySlug = fontFamilyValue?.startsWith(
+			'var:preset|font-family|'
+		)
+			? fontFamilyValue.substring( 'var:preset|font-family|'.length )
+			: undefined;
+		updatedStyle.typography = {
+			...omit( updatedStyle.typography, [ 'fontFamily' ] ),
+			fontSize: fontSizeSlug ? undefined : fontSizeValue,
+		};
+		setAttributes( {
+			style: cleanEmptyObject( updatedStyle ),
+			fontFamily: fontFamilySlug,
+			fontSize: fontSizeSlug,
+		} );
+	};
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			typography: {
-				...newAttributes.style?.typography,
-				[ attribute ]: undefined,
-			},
-		},
-	} );
-
 	return (
-		<InspectorControls group="typography">
-			{ ! isFontFamilyDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontFamilyValue( props ) }
-					label={ __( 'Font family' ) }
-					onDeselect={ () => resetFontFamily( props ) }
-					isShownByDefault={ defaultControls?.fontFamily }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontFamily: undefined,
-					} ) }
-					panelId={ clientId }
-				>
-					<FontFamilyEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontSizeDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontSizeValue( props ) }
-					/* translators: Ensure translation is distinct from "Letter case" */
-					label={ __( 'Font size' ) }
-					onDeselect={ () => resetFontSize( props ) }
-					isShownByDefault={ defaultControls?.fontSize }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontSize: undefined,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontSize: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontSizeEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontAppearanceDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasFontAppearanceValue( props ) }
-					label={ getFontAppearanceLabel(
-						hasFontStyles,
-						hasFontWeights
-					) }
-					onDeselect={ () => resetFontAppearance( props ) }
-					isShownByDefault={ defaultControls?.fontAppearance }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontStyle: undefined,
-								fontWeight: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontAppearanceEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLineHeightDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLineHeightValue( props ) }
-					label={ __( 'Line height' ) }
-					onDeselect={ () => resetLineHeight( props ) }
-					isShownByDefault={ defaultControls?.lineHeight }
-					resetAllFilter={ createResetAllFilter( 'lineHeight' ) }
-					panelId={ clientId }
-				>
-					<LineHeightEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLetterSpacingDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter spacing' ) }
-					onDeselect={ () => resetLetterSpacing( props ) }
-					isShownByDefault={ defaultControls?.letterSpacing }
-					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
-					panelId={ clientId }
-				>
-					<LetterSpacingEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextDecorationDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasTextDecorationValue( props ) }
-					label={ __( 'Decoration' ) }
-					onDeselect={ () => resetTextDecoration( props ) }
-					isShownByDefault={ defaultControls?.textDecoration }
-					resetAllFilter={ createResetAllFilter( 'textDecoration' ) }
-					panelId={ clientId }
-				>
-					<TextDecorationEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextTransformDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasTextTransformValue( props ) }
-					/* translators: Ensure translation is distinct from "Font size" */
-					label={ __( 'Letter case' ) }
-					onDeselect={ () => resetTextTransform( props ) }
-					isShownByDefault={ defaultControls?.textTransform }
-					resetAllFilter={ createResetAllFilter( 'textTransform' ) }
-					panelId={ clientId }
-				>
-					<TextTransformEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<StylesTypographyPanel
+			as={ TypographyInspectorControl }
+			panelId={ clientId }
+			name={ name }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+		/>
 	);
 }
 
@@ -237,17 +172,3 @@ export const hasTypographySupport = ( blockName ) => {
 		hasBlockSupport( blockName, key )
 	);
 };
-
-function useIsTypographyDisabled( props = {} ) {
-	const configs = [
-		useIsFontAppearanceDisabled( props ),
-		useIsFontSizeDisabled( props ),
-		useIsLineHeightDisabled( props ),
-		useIsFontFamilyDisabled( props ),
-		useIsTextDecorationDisabled( props ),
-		useIsTextTransformDisabled( props ),
-		useIsLetterSpacingDisabled( props ),
-	];
-
-	return configs.filter( Boolean ).length === configs.length;
-}

package/src/index.js

@@ -20,4 +20,4 @@ export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
-export { experiments } from './experiments';
+export { privateApis } from './private-apis';

package/src/layouts/flow.js

@@ -56,7 +56,7 @@ export default {
 	getOrientation() {
 		return 'vertical';
 	},
-	getAlignments( layout ) {
+	getAlignments( layout, isBlockBasedTheme ) {
 		const alignmentInfo = getAlignmentsInfo( layout );
 		if ( layout.alignments !== undefined ) {
 			if ( ! layout.alignments.includes( 'none' ) ) {
@@ -74,6 +74,21 @@ export default {
 			{ name: 'right' },
 		];
 
+		// This is for backwards compatibility with hybrid themes.
+		if ( ! isBlockBasedTheme ) {
+			const { contentSize, wideSize } = layout;
+			if ( contentSize ) {
+				alignments.unshift( { name: 'full' } );
+			}
+
+			if ( wideSize ) {
+				alignments.unshift( {
+					name: 'wide',
+					info: alignmentInfo.wide,
+				} );
+			}
+		}
+
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;

package/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-editor'
+	);

package/src/private-apis.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+import OffCanvasEditor from './components/off-canvas-editor';
+import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
+
+/**
+ * Private @wordpress/block-editor APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+	LeafMoreMenu,
+	OffCanvasEditor,
+} );

package/src/private-apis.native.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+
+/**
+ * Private @wordpress/block-editor APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+} );

package/src/store/index.js

@@ -12,7 +12,7 @@ import * as privateActions from './private-actions';
 import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
-import { unlock } from '../experiments';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.

package/src/store/selectors.js

@@ -55,6 +55,17 @@ const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
  */
 const EMPTY_ARRAY = [];
 
+/**
+ * Shared reference to an empty Set for cases where it is important to avoid
+ * returning a new Set reference on every invocation, as in a connected or
+ * other pure component which performs `shouldComponentUpdate` check on props.
+ * This should be used as a last resort, since the normalized data should be
+ * maintained by the reducer result in state.
+ *
+ * @type {Set}
+ */
+const EMPTY_SET = new Set();
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -2722,11 +2733,15 @@ export function isBlockVisible( state, clientId ) {
  */
 export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => {
-		return new Set(
+		const visibleBlocks = new Set(
 			Object.keys( state.blockVisibility ).filter(
 				( key ) => state.blockVisibility[ key ]
 			)
 		);
+		if ( visibleBlocks.size === 0 ) {
+			return EMPTY_SET;
+		}
+		return visibleBlocks;
 	},
 	( state ) => [ state.blockVisibility ]
 );

package/tsconfig.json

@@ -5,10 +5,29 @@
 		"declarationDir": "build-types"
 	},
 	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../data" },
+		{ "path": "../date" },
 		{ "path": "../deprecated" },
+		{ "path": "../dom" },
 		{ "path": "../element" },
+		{ "path": "../escape-html" },
+		{ "path": "../private-apis" },
 		{ "path": "../hooks" },
-		{ "path": "../data" }
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../is-shallow-equal" },
+		{ "path": "../keycodes" },
+		{ "path": "../style-engine" },
+		{ "path": "../token-list" },
+		{ "path": "../url" },
+		{ "path": "../warning" },
+		{ "path": "../wordcount" }
 	],
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in

package/build/experiments.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/experiments.js"],"names":["lock","unlock","experiments","globalStyles","ExperimentalBlockEditorProvider","OffCanvasEditor"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,yBAFD,CADM;AAMP;AACA;AACA;;;;AACO,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe,EAClB,GAAGC,YADe;AAElBC,EAAAA,+BAA+B,EAA/BA,yCAFkB;AAGlBC,EAAAA,eAAe,EAAfA;AAHkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';\n\n/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\nimport OffCanvasEditor from './components/off-canvas-editor';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/block-editor'\n\t);\n\n/**\n * Experimental @wordpress/block-editor APIs.\n */\nexport const experiments = {};\nlock( experiments, {\n\t...globalStyles,\n\tExperimentalBlockEditorProvider,\n\tOffCanvasEditor,\n} );\n"]}

package/build/experiments.native.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/experiments.native.js"],"names":["lock","unlock","experiments","globalStyles","ExperimentalBlockEditorProvider"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;;;;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,yBAFD,CADM;AAMP;AACA;AACA;;;;AACO,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe,EAClB,GAAGC,YADe;AAElBC,EAAAA,+BAA+B,EAA/BA;AAFkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';\n\n/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/block-editor'\n\t);\n\n/**\n * Experimental @wordpress/block-editor APIs.\n */\nexport const experiments = {};\nlock( experiments, {\n\t...globalStyles,\n\tExperimentalBlockEditorProvider,\n} );\n"]}