Global Styles: Upsize typography panel components

WordPress · Jul 26, 2022 · 33780b2 · 33780b2
1 parent c81fb68
commit 33780b2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 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
@@ -88,6 +88,7 @@ export default function FontAppearanceControl( props ) {
 		hasFontStyles = true,
 		hasFontWeights = true,
 		value: { fontStyle, fontWeight },
+		...otherProps
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
 	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
@@ -205,6 +206,7 @@ export default function FontAppearanceControl( props ) {
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
+				{ ...otherProps }
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }

diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -26,13 +26,15 @@ export default function LetterSpacingControl( {
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
 	return (
 		<UnitControl
+			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
@@ -21,6 +21,7 @@ const LineHeightControl = ( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
@@ -89,6 +90,7 @@ const LineHeightControl = ( {
 			style={ deprecatedStyles }
 		>
 			<NumberControl
+				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }

diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -136,6 +136,7 @@ export default function TypographyPanel( { name, element } ) {
 					fontFamilies={ fontFamilies }
 					value={ fontFamily }
 					onChange={ setFontFamily }
+					size="__unstable-large"
 				/>
 			) }
 			{ supports.includes( 'fontSize' ) && (
@@ -144,14 +145,17 @@ export default function TypographyPanel( { name, element } ) {
 					onChange={ setFontSize }
 					fontSizes={ fontSizes }
 					disableCustomFontSizes={ disableCustomFontSizes }
+					size="__unstable-large"
 				/>
 			) }
 			{ hasLineHeightEnabled && (
 				<Spacer marginBottom={ 6 }>
 					<LineHeightControl
 						__nextHasNoMarginBottom={ true }
+						__unstableInputWidth={ '50%' }
 						value={ lineHeight }
 						onChange={ setLineHeight }
+						size="__unstable-large"
 					/>
 				</Spacer>
 			) }
@@ -170,12 +174,16 @@ export default function TypographyPanel( { name, element } ) {
 					} }
 					hasFontStyles={ hasFontStyles }
 					hasFontWeights={ hasFontWeights }
+					size="__unstable-large"
+					__nextUnconstrainedWidth
 				/>
 			) }
 			{ hasLetterSpacingControl && (
 				<LetterSpacingControl
 					value={ letterSpacing }
 					onChange={ setLetterSpacing }
+					size="__unstable-large"
+					__unstableInputWidth={ '50%' }
 				/>
 			) }
 		</PanelBody>