Try: Fix dropcap behavior.

WordPress · Feb 3, 2021 · ede1948 · ede1948
1 parent 92baa9b
commit ede1948
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -14,17 +14,17 @@ import {
 	InspectorControls,
 	RichText,
 	useBlockProps,
-	getFontSize,
+	//getFontSize,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
+/*import { useSelect } from '@wordpress/data';
+import { useEffect, useRef, useState } from '@wordpress/element';*/
 import { formatLtr } from '@wordpress/icons';
 
-function getComputedStyle( node, pseudo ) {
+/*function getComputedStyle( node, pseudo ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node, pseudo );
-}
+}*/
 
 const name = 'core/paragraph';
 
@@ -49,7 +49,7 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	);
 }
 
-function useDropCapMinHeight( ref, isDisabled, dependencies ) {
+/*function useDropCapMinHeight( ref, isDisabled, dependencies ) {
 	const [ minHeight, setMinHeight ] = useState();
 
 	useEffect( () => {
@@ -64,7 +64,7 @@ function useDropCapMinHeight( ref, isDisabled, dependencies ) {
 	}, [ isDisabled, ...dependencies ] );
 
 	return minHeight;
-}
+}*/
 
 function ParagraphBlock( {
 	attributes,
@@ -79,11 +79,11 @@ function ParagraphBlock( {
 		direction,
 		dropCap,
 		placeholder,
-		fontSize,
-		style,
+		//fontSize,
+		//style,
 	} = attributes;
 	const isDropCapFeatureEnabled = useEditorFeature( 'typography.dropCap' );
-	const ref = useRef();
+	/*const ref = useRef();
 	const inlineFontSize = style?.fontSize;
 	const size = useSelect(
 		( select ) => {
@@ -93,14 +93,14 @@ function ParagraphBlock( {
 		[ fontSize, inlineFontSize ]
 	);
 	const hasDropCap = isDropCapFeatureEnabled && dropCap;
-	const minHeight = useDropCapMinHeight( ref, ! hasDropCap, [ size ] );
+	const minHeight = useDropCapMinHeight( ref, ! hasDropCap, [ size ] ); */
 	const blockProps = useBlockProps( {
-		ref,
+		//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;
 }