Reuse the TypographyPanel in the block inspector

WordPress · Jan 26, 2023 · 453e4a5 · 453e4a5
1 parent 6ceed6f
commit 453e4a5
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 802 deletions.
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -63,7 +63,7 @@ const FONT_WEIGHTS = [
  * @param {boolean} hasFontWeights Whether font weights are enabled and present.
  * @return {string} A label representing what font appearance is being edited.
  */
-export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
 	}

diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -130,13 +130,30 @@ function useHasTextDecorationControl( name, element ) {
 	return supports.includes( 'textDecoration' );
 }
 
+function TypographyToolsPanel( { ...props } ) {
+	return <ToolsPanel label={ __( 'Typography' ) } { ...props } />;
+}
+
+const DEFAULT_CONTROLS = {
+	fontFamily: true,
+	fontSize: true,
+	fontAppearance: true,
+	lineHeight: true,
+	letterSpacing: true,
+	textTransform: true,
+	textDecoration: true,
+};
+
 export default function TypographyPanel( {
+	as: Wrapper = TypographyToolsPanel,
 	name,
 	element,
 	value,
 	onChange,
-	inherit,
+	inherit = value,
 	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -154,11 +171,16 @@ export default function TypographyPanel( {
 		fontFamiliesPerOrigin.default;
 	const fontFamily = decodeValue( inherit?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
+		const slug = fontFamilies?.find(
+			( { fontFamily: f } ) => f === newValue
+		)?.slug;
 		onChange( {
 			...value,
 			typography: {
 				...value?.typography,
-				fontFamily: newValue,
+				fontFamily: slug
+					? `var:preset|font-family|${ slug }`
+					: newValue,
 			},
 		} );
 	};
@@ -307,13 +329,14 @@ export default function TypographyPanel( {
 	};
 
 	return (
-		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
+		<Wrapper resetAll={ resetAll }>
 			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font family' ) }
 					hasValue={ hasFontFamily }
 					onDeselect={ resetFontFamily }
-					isShownByDefault
+					isShownByDefault={ defaultControls.fontFamily }
+					panelId={ panelId }
 				>
 					<FontFamilyControl
 						fontFamilies={ fontFamilies }
@@ -329,7 +352,8 @@ export default function TypographyPanel( {
 					label={ __( 'Font size' ) }
 					hasValue={ hasFontSize }
 					onDeselect={ resetFontSize }
-					isShownByDefault
+					isShownByDefault={ defaultControls.fontSize }
+					panelId={ panelId }
 				>
 					<FontSizePicker
 						value={ fontSize }
@@ -349,7 +373,8 @@ export default function TypographyPanel( {
 					label={ appearanceControlLabel }
 					hasValue={ hasFontAppearance }
 					onDeselect={ resetFontAppearance }
-					isShownByDefault
+					isShownByDefault={ defaultControls.fontAppearance }
+					panelId={ panelId }
 				>
 					<FontAppearanceControl
 						value={ {
@@ -370,7 +395,8 @@ export default function TypographyPanel( {
 					label={ __( 'Line height' ) }
 					hasValue={ hasLineHeight }
 					onDeselect={ resetLineHeight }
-					isShownByDefault
+					isShownByDefault={ defaultControls.lineHeight }
+					panelId={ panelId }
 				>
 					<LineHeightControl
 						__nextHasNoMarginBottom
@@ -387,7 +413,8 @@ export default function TypographyPanel( {
 					label={ __( 'Letter spacing' ) }
 					hasValue={ hasLetterSpacing }
 					onDeselect={ resetLetterSpacing }
-					isShownByDefault
+					isShownByDefault={ defaultControls.letterSpacing }
+					panelId={ panelId }
 				>
 					<LetterSpacingControl
 						value={ letterSpacing }
@@ -402,7 +429,8 @@ export default function TypographyPanel( {
 					label={ __( 'Letter case' ) }
 					hasValue={ hasTextTransform }
 					onDeselect={ resetTextTransform }
-					isShownByDefault
+					isShownByDefault={ defaultControls.textTransform }
+					panelId={ panelId }
 				>
 					<TextTransformControl
 						value={ textTransform }
@@ -420,7 +448,8 @@ export default function TypographyPanel( {
 					label={ __( 'Text decoration' ) }
 					hasValue={ hasTextDecoration }
 					onDeselect={ resetTextDecoration }
-					isShownByDefault
+					isShownByDefault={ defaultControls.textDecoration }
+					panelId={ panelId }
 				>
 					<TextDecorationControl
 						value={ textDecoration }
@@ -430,6 +459,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</ToolsPanel>
+		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -13,8 +13,6 @@ import TokenList from '@wordpress/token-list';
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import FontFamilyControl from '../components/font-family';
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 
@@ -105,62 +103,6 @@ function addEditProps( settings ) {
 	return settings;
 }
 
-export function FontFamilyEdit( {
-	setAttributes,
-	attributes: { fontFamily },
-} ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-
-	const value = fontFamilies?.find(
-		( { slug } ) => fontFamily === slug
-	)?.fontFamily;
-
-	function onChange( newValue ) {
-		const predefinedFontFamily = fontFamilies?.find(
-			( { fontFamily: f } ) => f === newValue
-		);
-		setAttributes( {
-			fontFamily: predefinedFontFamily?.slug,
-		} );
-	}
-
-	return (
-		<FontFamilyControl
-			className="block-editor-hooks-font-family-control"
-			fontFamilies={ fontFamilies }
-			value={ value }
-			onChange={ onChange }
-			size="__unstable-large"
-			__nextHasNoMarginBottom
-		/>
-	);
-}
-
-/**
- * Custom hook that checks if font-family functionality is disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean} Whether setting is disabled.
- */
-export function useIsFontFamilyDisabled( { name } ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	return (
-		! fontFamilies ||
-		fontFamilies.length === 0 ||
-		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
-	);
-}
-
-/**
- * Checks if there is a current value set for the font family block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font family value set.
- */
-export function hasFontFamilyValue( props ) {
-	return !! props.attributes.fontFamily;
-}
-
 /**
  * Resets the font family block support attribute. This can be used when
  * disabling the font family support controls for a block via a progressive