Paragraph: store subscription for selected block only (#56967)

WordPress · Dec 12, 2023 · dc95863 · dc95863 · github-actions · Dec 12, 2023
1 parent 45d7bab
commit dc95863
Showing 1 changed file with 49 additions and 36 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -49,6 +49,48 @@ function hasDropCapDisabled( align ) {
 	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
 }
 
+function DropCapControl( { clientId, attributes, setAttributes } ) {
+	// Please do no add a useSelect call to the paragraph block unconditionaly.
+	// Every useSelect added to a (frequestly used) block will degrade the load
+	// and type bit. By moving it within InspectorControls, the subscription is
+	// now only added for the selected block(s).
+	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
+
+	if ( ! isDropCapFeatureEnabled ) {
+		return null;
+	}
+
+	const { align, dropCap } = attributes;
+
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! dropCap }
+			label={ __( 'Drop cap' ) }
+			onDeselect={ () => setAttributes( { dropCap: undefined } ) }
+			resetAllFilter={ () => ( { dropCap: undefined } ) }
+			panelId={ clientId }
+		>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Drop cap' ) }
+				checked={ !! dropCap }
+				onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
+				help={ helpText }
+				disabled={ hasDropCapDisabled( align ) ? true : false }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -58,7 +100,6 @@ function ParagraphBlock( {
 	clientId,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
-	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
@@ -68,15 +109,6 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 
-	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
-		helpText = __( 'Not available for aligned text.' );
-	} else if ( dropCap ) {
-		helpText = __( 'Showing large initial letter.' );
-	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -98,32 +130,13 @@ function ParagraphBlock( {
 					}
 				/>
 			</BlockControls>
-			{ isDropCapFeatureEnabled && (
-				<InspectorControls group="typography">
-					<ToolsPanelItem
-						hasValue={ () => !! dropCap }
-						label={ __( 'Drop cap' ) }
-						onDeselect={ () =>
-							setAttributes( { dropCap: undefined } )
-						}
-						resetAllFilter={ () => ( { dropCap: undefined } ) }
-						panelId={ clientId }
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Drop cap' ) }
-							checked={ !! dropCap }
-							onChange={ () =>
-								setAttributes( { dropCap: ! dropCap } )
-							}
-							help={ helpText }
-							disabled={
-								hasDropCapDisabled( align ) ? true : false
-							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+			<InspectorControls group="typography">
+				<DropCapControl
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
 			<RichText
 				identifier="content"
 				tagName="p"