Disable drop cap control if text is aligned (#42326)

* Disable drop cap control if text is aligned
WordPress · Sep 29, 2022 · a6e9a24 · a6e9a24
1 parent 2a51205
commit a6e9a24
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
@@ -11,8 +11,11 @@ import {
 	getColorClassName,
 	getFontSizeClass,
 	RichText,
+	useBlockProps,
 } from '@wordpress/block-editor';
 
+import { isRTL } from '@wordpress/i18n';
+
 const supports = {
 	className: false,
 };
@@ -90,6 +93,39 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 const { style, ...restBlockAttributes } = blockAttributes;
 
 const deprecated = [
+	// Version without drop cap on aligned text.
+	{
+		supports,
+		attributes: {
+			...restBlockAttributes,
+			customTextColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customFontSize: {
+				type: 'number',
+			},
+		},
+		save( { attributes } ) {
+			const { align, content, dropCap, direction } = attributes;
+			const className = classnames( {
+				'has-drop-cap':
+					align === ( isRTL() ? 'left' : 'right' ) ||
+					align === 'center'
+						? false
+						: dropCap,
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<p { ...useBlockProps.save( { className, dir: direction } ) }>
+					<RichText.Content value={ content } />
+				</p>
+			);
+		},
+	},
 	{
 		supports,
 		attributes: {

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -48,6 +48,10 @@ function ParagraphRTLControl( { direction, setDirection } ) {
 	);
 }
 
+function hasDropCapDisabled( align ) {
+	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -65,19 +69,33 @@ function ParagraphBlock( {
 			setParagraphElement,
 		] ),
 		className: classnames( {
-			'has-drop-cap': dropCap,
+			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
 			[ `has-text-align-${ align }` ]: align,
 		} ),
 		style: { direction },
 	} );
 
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
 	return (
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
 					value={ align }
 					onChange={ ( newAlign ) =>
-						setAttributes( { align: newAlign } )
+						setAttributes( {
+							align: newAlign,
+							dropCap: hasDropCapDisabled( newAlign )
+								? false
+								: dropCap,
+						} )
 					}
 				/>
 				<ParagraphRTLControl
@@ -104,12 +122,9 @@ function ParagraphBlock( {
 							onChange={ () =>
 								setAttributes( { dropCap: ! dropCap } )
 							}
-							help={
-								dropCap
-									? __( 'Showing large initial letter.' )
-									: __(
-											'Toggle to show a large initial letter.'
-									  )
+							help={ helpText }
+							disabled={
+								hasDropCapDisabled( align ) ? true : false
 							}
 						/>
 					</ToolsPanelItem>

diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
@@ -7,11 +7,15 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { isRTL } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
 	const className = classnames( {
-		'has-drop-cap': dropCap,
+		'has-drop-cap':
+			align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
+				? false
+				: dropCap,
 		[ `has-text-align-${ align }` ]: align,
 	} );
 

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;
 }
 
+body.rtl .has-drop-cap:not(:focus)::first-letter {
+	float: initial;
+	margin-left: 0.1em;
+}
+
 // Prevent the dropcap from breaking out of the box when a background is applied.
 p.has-drop-cap.has-background {
 	overflow: hidden;