Improve dropcap behavior (#28685)

* Try: Fix dropcap behavior. * Remove comments.
WordPress · Mar 1, 2021 · d3b7629 · d3b7629
1 parent 3fb70dc
commit d3b7629
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 47 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -14,19 +14,11 @@ import {
 	InspectorControls,
 	RichText,
 	useBlockProps,
-	getFontSize,
 	__experimentalUseEditorFeature as useEditorFeature,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
 import { formatLtr } from '@wordpress/icons';
 
-function getComputedStyle( node, pseudo ) {
-	return node.ownerDocument.defaultView.getComputedStyle( node, pseudo );
-}
-
 const name = 'core/paragraph';
 
 function ParagraphRTLToolbar( { direction, setDirection } ) {
@@ -50,23 +42,6 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	);
 }
 
-function useDropCapMinHeight( ref, isDisabled, dependencies ) {
-	const [ minHeight, setMinHeight ] = useState();
-
-	useEffect( () => {
-		if ( isDisabled ) {
-			setMinHeight();
-			return;
-		}
-
-		setMinHeight(
-			getComputedStyle( ref.current, 'first-letter' ).lineHeight
-		);
-	}, [ isDisabled, ...dependencies ] );
-
-	return minHeight;
-}
-
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -75,34 +50,14 @@ function ParagraphBlock( {
 	setAttributes,
 	clientId,
 } ) {
-	const {
-		align,
-		content,
-		direction,
-		dropCap,
-		placeholder,
-		fontSize,
-		style,
-	} = attributes;
+	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useEditorFeature( 'typography.dropCap' );
-	const ref = useRef();
-	const inlineFontSize = style?.fontSize;
-	const size = useSelect(
-		( select ) => {
-			const { fontSizes } = select( blockEditorStore ).getSettings();
-			return getFontSize( fontSizes, fontSize, inlineFontSize ).size;
-		},
-		[ fontSize, inlineFontSize ]
-	);
-	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: { direction, minHeight },
+		style: { direction },
 	} );
 
 	return (

diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
@@ -28,6 +28,11 @@
 	font-style: normal;
 }
 
+// Prevent the dropcap from breaking out of the box when a background is applied.
+p.has-drop-cap.has-background {
+	overflow: hidden;
+}
+
 p.has-background {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }