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/line-height.js

@@ -7,6 +7,8 @@ import { hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import LineHeightControl from '../components/line-height-control';
+import useEditorFeature from '../components/use-editor-feature';
+
 import { cleanEmptyObject } from './utils';
 
 export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight';
@@ -23,8 +25,15 @@ export function LineHeightEdit( props ) {
 		name: blockName,
 		attributes: { style },
 	} = props;
+	// Don't render the controls if disabled by editor settings
+	const isDisabled = useEditorFeature(
+		'__experimentalDisableCustomLineHeight'
+	);
 
-	if ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) ) {
+	if (
+		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) ||
+		isDisabled
+	) {
 		return null;
 	}
 

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

@@ -9,28 +9,14 @@ 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 { 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';
 
-const styleSupportKeys = [
-	COLOR_SUPPORT_KEY,
-	LINE_HEIGHT_SUPPORT_KEY,
-	FONT_SIZE_SUPPORT_KEY,
-];
-
-const typographySupportKeys = [
-	LINE_HEIGHT_SUPPORT_KEY,
-	FONT_SIZE_SUPPORT_KEY,
-];
+const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, COLOR_SUPPORT_KEY ];
 
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
@@ -139,20 +125,8 @@ export function addEditProps( settings ) {
  */
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const hasTypographySupport = typographySupportKeys.some( ( key ) =>
-			hasBlockSupport( blockName, 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 } />,
 		];

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

@@ -0,0 +1,47 @@
+/**
+ * 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 } from './line-height';
+import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
+
+export const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
+
+export function TypographyPanel( props ) {
+	const { name: blockName } = props;
+	const hasTypographySupport = TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
+	);
+
+	const contentMarkup = (
+		<>
+			<FontSizeEdit { ...props } />
+			<LineHeightEdit { ...props } />
+		</>
+	);
+	const hasContent = !! contentMarkup;
+	const shouldRender =
+		Platform.OS === 'web' && hasTypographySupport && hasContent;
+
+	if ( ! shouldRender ) return null;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Typography' ) }>
+				{ contentMarkup }
+			</PanelBody>
+		</InspectorControls>
+	);
+}