diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index cfbe0c34557c5b..939c1ecd10f3ba 100644 --- 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 index 8a750a271cdd4e..05c68278bb856d 100644 --- 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; }