Fix Typography panel rendering from style hooks

packages/block-editor/src/components/line-height-control/index.js

@@ -8,7 +8,6 @@ import { ZERO } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import useEditorFeature from '../use-editor-feature';
 import {
 	BASE_DEFAULT_VALUE,
 	RESET_VALUE,
@@ -17,14 +16,6 @@ import {
 } from './utils';
 
 export default function LineHeightControl( { value: lineHeight, onChange } ) {
-	// Don't render the controls if disabled by editor settings
-	const isDisabled = useEditorFeature(
-		'__experimentalDisableCustomLineHeight'
-	);
-	if ( isDisabled ) {
-		return null;
-	}
-
 	const isDefined = isLineHeightDefined( lineHeight );
 
 	const handleOnKeyDown = ( event ) => {

packages/block-editor/src/hooks/font-size.js

@@ -98,16 +98,16 @@ function addEditProps( settings ) {
  */
 export function FontSizeEdit( props ) {
 	const {
-		name: blockName,
 		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
+	const isDisabled = useIsFontSizeDisabled( props );
 
 	const { fontSizes } = useSelect( ( select ) =>
 		select( 'core/block-editor' ).getSettings()
 	);
 
-	if ( ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ) {
+	if ( isDisabled ) {
 		return null;
 	}
 
@@ -136,6 +136,23 @@ export function FontSizeEdit( props ) {
 	);
 }
 
+/**
+ * Custom hook that checks if font-size settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether setting is disabled.
+ */
+export function useIsFontSizeDisabled( { name: blockName } = {} ) {
+	const { fontSizes } = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSettings()
+	);
+	const hasFontSizes = fontSizes.length;
+
+	return (
+		! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes
+	);
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',

packages/block-editor/src/hooks/line-height.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -20,11 +21,11 @@ export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight';
  */
 export function LineHeightEdit( props ) {
 	const {
-		name: blockName,
 		attributes: { style },
 	} = props;
+	const isDisabled = useIsLineHeightDisabled( props );
 
-	if ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) ) {
+	if ( isDisabled ) {
 		return null;
 	}
 
@@ -47,3 +48,21 @@ export function LineHeightEdit( props ) {
 		/>
 	);
 }
+
+/**
+ * Custom hook that checks if line-height settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether setting is disabled.
+ */
+export function useIsLineHeightDisabled( { name: blockName } = {} ) {
+	const isDisabled = useSelect( ( select ) => {
+		const editorSettings = select( 'core/block-editor' ).getSettings();
+
+		return editorSettings.__experimentalDisableCustomLineHeight;
+	} );
+
+	return (
+		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
+	);
+}

packages/block-editor/src/hooks/style.js

@@ -9,36 +9,25 @@ import { has, get } from 'lodash';
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InspectorControls from '../components/inspector-controls';
-import SpacingPanelControl from '../components/spacing-panel-control';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
-import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
-import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
+import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
 import {
 	PADDING_SUPPORT_KEY,
 	PaddingEdit,
 	paddingStyleMappings,
 } from './padding';
+import SpacingPanelControl from '../components/spacing-panel-control';
 
 const styleSupportKeys = [
+	...TYPOGRAPHY_SUPPORT_KEYS,
 	COLOR_SUPPORT_KEY,
-	LINE_HEIGHT_SUPPORT_KEY,
-	FONT_SIZE_SUPPORT_KEY,
 	PADDING_SUPPORT_KEY,
 ];
 
-const typographySupportKeys = [
-	LINE_HEIGHT_SUPPORT_KEY,
-	FONT_SIZE_SUPPORT_KEY,
-];
-
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
@@ -148,24 +137,14 @@ export function addEditProps( settings ) {
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		const hasTypographySupport = typographySupportKeys.some( ( key ) =>
-			hasBlockSupport( blockName, key )
-		);
 
 		const hasPaddingSupport = hasBlockSupport(
 			blockName,
 			PADDING_SUPPORT_KEY
 		);
 
 		return [
-			Platform.OS === 'web' && hasTypographySupport && (
-				<InspectorControls key="typography">
-					<PanelBody title={ __( 'Typography' ) }>
-						<FontSizeEdit { ...props } />
-						<LineHeightEdit { ...props } />
-					</PanelBody>
-				</InspectorControls>
-			),
+			<TypographyPanel key="typography" { ...props } />,
 			<ColorEdit key="colors" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
 			hasPaddingSupport && (

packages/block-editor/src/hooks/typography.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+
+import {
+	LINE_HEIGHT_SUPPORT_KEY,
+	LineHeightEdit,
+	useIsLineHeightDisabled,
+} from './line-height';
+import {
+	FONT_SIZE_SUPPORT_KEY,
+	FontSizeEdit,
+	useIsFontSizeDisabled,
+} from './font-size';
+
+export const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
+
+export function TypographyPanel( props ) {
+	const isDisabled = useIsTypographyDisabled( props );
+	const isSupported = hasTypographySupport( props.name );
+
+	if ( isDisabled || ! isSupported ) return null;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Typography' ) }>
+				<FontSizeEdit { ...props } />
+				<LineHeightEdit { ...props } />
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+const hasTypographySupport = ( blockName ) => {
+	return (
+		Platform.OS === 'web' &&
+		TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+			hasBlockSupport( blockName, key )
+		)
+	);
+};
+
+function useIsTypographyDisabled( props = {} ) {
+	const configs = [
+		useIsFontSizeDisabled( props ),
+		useIsLineHeightDisabled( props ),
+	];
+
+	return configs.filter( Boolean ).length === configs.length;
+}