Fix: Drop Cap + alignment produces a gap between paragraphs (#18831)

WordPress · Dec 5, 2019 · 8966f52 · 8966f52
1 parent e3e2091
commit 8966f52
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -24,8 +24,16 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Browser dependencies
+ */
+const { getComputedStyle } = window;
+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 ) => {
@@ -48,6 +56,27 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	) );
 }
 
+function useDropCapMinimumHeight( isDropCap, deps ) {
+	const [ minimumHeight, setMinimumHeight ] = useState();
+	useEffect(
+		() => {
+			const element = querySelector( PARAGRAPH_DROP_CAP_SELECTOR );
+			if ( isDropCap && element ) {
+				setMinimumHeight(
+					getComputedStyle(
+						element,
+						'first-letter'
+					).height
+				);
+			} else if ( minimumHeight ) {
+				setMinimumHeight( undefined );
+			}
+		},
+		[ isDropCap, minimumHeight, setMinimumHeight, ...deps ]
+	);
+	return minimumHeight;
+}
+
 function ParagraphBlock( {
 	attributes,
 	className,
@@ -65,6 +94,7 @@ function ParagraphBlock( {
 		direction,
 	} = attributes;
 
+	const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size ] );
 	const {
 		TextColor,
 		BackgroundColor,
@@ -125,6 +155,7 @@ function ParagraphBlock( {
 						style={ {
 							fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
 							direction,
+							minHeight: dropCapMinimumHeight,
 						} }
 						value={ content }
 						onChange={ ( newContent ) => setAttributes( { content: newContent } ) }

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -15,3 +15,8 @@
 	min-height: $empty-paragraph-height / 2;
 	line-height: $editor-line-height;
 }
+
+// Overwrite the inline style to make the height collapse when the paragraph editable gets focus.
+.block-editor-block-list__block[data-type="core/paragraph"] .has-drop-cap:focus {
+	min-height: $empty-paragraph-height / 2 !important;
+}
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
@@ -28,13 +28,6 @@
 	font-style: normal;
 }
 
-.has-drop-cap:not(:focus)::after {
-	content: "";
-	display: table;
-	clear: both;
-	padding-top: $block-padding;
-}
-
 p.has-background {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }