Paragraph: avoid selector to improve performance (#26150)

WordPress · Oct 19, 2020 · 1f0d0f5 · 1f0d0f5
1 parent 19e8135
commit 1f0d0f5
Showing 1 changed file with 26 additions and 44 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -19,17 +19,14 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { formatLtr } from '@wordpress/icons';
 
 function getComputedStyle( node, pseudo ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node, pseudo );
 }
 
-const querySelector = window.document.querySelector.bind( document );
-
 const name = 'core/paragraph';
-const PARAGRAPH_DROP_CAP_SELECTOR = 'p.has-drop-cap';
 
 function ParagraphRTLToolbar( { direction, setDirection } ) {
 	const isRTL = useSelect( ( select ) => {
@@ -56,38 +53,21 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	);
 }
 
-function useDropCap( isDropCap, fontSize, styleFontSize ) {
-	const isDisabled = ! useEditorFeature( 'typography.dropCap' );
-
-	const [ minimumHeight, setMinimumHeight ] = useState();
+function useDropCapMinHeight( ref, isDisabled, dependencies ) {
+	const [ minHeight, setMinHeight ] = useState();
 
-	const { fontSizes } = useSelect( ( select ) =>
-		select( 'core/block-editor' ).getSettings()
-	);
-
-	const fontSizeObject = getFontSize( fontSizes, fontSize, styleFontSize );
 	useEffect( () => {
 		if ( isDisabled ) {
+			setMinHeight();
 			return;
 		}
 
-		const element = querySelector( PARAGRAPH_DROP_CAP_SELECTOR );
-		if ( isDropCap && element ) {
-			setMinimumHeight(
-				getComputedStyle( element, 'first-letter' ).lineHeight
-			);
-		} else if ( minimumHeight ) {
-			setMinimumHeight( undefined );
-		}
-	}, [
-		isDisabled,
-		isDropCap,
-		minimumHeight,
-		setMinimumHeight,
-		fontSizeObject.size,
-	] );
+		setMinHeight(
+			getComputedStyle( ref.current, 'first-letter' ).lineHeight
+		);
+	}, [ isDisabled, ...dependencies ] );
 
-	return [ ! isDisabled, minimumHeight ];
+	return minHeight;
 }
 
 function ParagraphBlock( {
@@ -106,23 +86,25 @@ function ParagraphBlock( {
 		fontSize,
 		style,
 	} = attributes;
-	const [ isDropCapEnabled, dropCapMinimumHeight ] = useDropCap(
-		dropCap,
-		fontSize,
-		style?.fontSize
+	const isDropCapFeatureEnabled = useEditorFeature( 'typography.dropCap' );
+	const ref = useRef();
+	const inlineFontSize = style?.fontSize;
+	const size = useSelect(
+		( select ) => {
+			const { fontSizes } = select( 'core/block-editor' ).getSettings();
+			return getFontSize( fontSizes, fontSize, inlineFontSize ).size;
+		},
+		[ fontSize, inlineFontSize ]
 	);
-
-	const styles = {
-		direction,
-		minHeight: dropCapMinimumHeight,
-	};
-
+	const hasDropCap = isDropCapFeatureEnabled && dropCap;
+	const minHeight = useDropCapMinHeight( ref, ! hasDropCap, [ size ] );
 	const blockProps = useBlockProps( {
+		ref,
 		className: classnames( {
 			'has-drop-cap': dropCap,
 			[ `has-text-align-${ align }` ]: align,
 		} ),
-		style: styles,
+		style: { direction, minHeight },
 	} );
 
 	return (
@@ -141,8 +123,8 @@ function ParagraphBlock( {
 					}
 				/>
 			</BlockControls>
-			<InspectorControls>
-				{ isDropCapEnabled && (
+			{ isDropCapFeatureEnabled && (
+				<InspectorControls>
 					<PanelBody title={ __( 'Text settings' ) }>
 						<ToggleControl
 							label={ __( 'Drop cap' ) }
@@ -159,8 +141,8 @@ function ParagraphBlock( {
 							}
 						/>
 					</PanelBody>
-				) }
-			</InspectorControls>
+				</InspectorControls>
+			) }
 			<RichText
 				identifier="content"
 				tagName="p"