Add support for text alignment

WordPress · May 19, 2021 · dcd1dbb · dcd1dbb
1 parent 8dad8c8
commit dcd1dbb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
@@ -20,6 +20,9 @@
 			"default": "",
 			"__experimentalRole": "content"
 		},
+		"textAlign": {
+			"type": "string"
+		},
 		"mainColor": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
@@ -12,6 +12,8 @@ import { Platform, useEffect, useRef } from '@wordpress/element';
 import {
 	RichText,
 	ContrastChecker,
+	AlignmentToolbar,
+	BlockControls,
 	InspectorControls,
 	withColors,
 	PanelColorSettings,
@@ -33,7 +35,7 @@ import { SOLID_COLOR_CLASS } from './shared';
 function PullQuoteEdit( {
 	colorUtils,
 	textColor,
-	attributes: { value, citation },
+	attributes: { value, citation, textAlign },
 	setAttributes,
 	setTextColor,
 	setMainColor,
@@ -108,12 +110,13 @@ function PullQuoteEdit( {
 					style={ {
 						color: textColor.color,
 					} }
-					className={
-						textColor.color &&
-						classnames( 'has-text-color', {
+					className={ classnames( {
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+						...( textColor.color && {
+							'has-text-color': true,
 							[ textColor.class ]: textColor.class,
-						} )
-					}
+						} ),
+					} ) }
 				>
 					<RichText
 						identifier="value"
@@ -157,6 +160,14 @@ function PullQuoteEdit( {
 					) }
 				</BlockQuote>
 			</Figure>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextTextAlign ) =>
+						setAttributes( { textAlign: nextTextAlign } )
+					}
+				/>
+			</BlockControls>
 			{ Platform.OS === 'web' && (
 				<InspectorControls>
 					<PanelColorSettings

diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
@@ -26,10 +26,12 @@ export default function save( { attributes } ) {
 		customTextColor,
 		value,
 		citation,
+		textAlign,
 		className,
 	} = attributes;
 
 	const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+	const isTextColorSet = Boolean( textColor || customTextColor );
 
 	let figureClasses, figureStyles;
 
@@ -56,11 +58,13 @@ export default function save( { attributes } ) {
 	}
 
 	const blockquoteTextColorClass = getColorClassName( 'color', textColor );
-	const blockquoteClasses =
-		( textColor || customTextColor ) &&
-		classnames( 'has-text-color', {
+	const blockquoteClasses = classnames( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
+		...( isTextColorSet && {
+			'has-text-color': true,
 			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
-		} );
+		} ),
+	} );
 
 	const blockquoteStyles = blockquoteTextColorClass
 		? undefined

diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
@@ -21,6 +21,7 @@
 	footer {
 		position: relative;
 	}
+
 	.has-text-color a {
 		color: inherit;
 	}
@@ -30,15 +31,32 @@
 	background: none;
 }
 
+/*
+ * 1. Defining `text-align` on the parent would get overwritten by the theme’s
+*     defintion of the default style.
+ * 2. When no text alignment is set, the solid color style aligns text to the
+ *    side, not center.
+ * 3. Twenty Twenty-One has a hardcoded `text-align` on `blockquote::before`.
+ *    The only way to make the decorative quotation mark follow the same
+ *    alignment as its parent (both in the editor and on the front-end) is
+ *    by resetting the property with `!important`.
+ */
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
+
 	blockquote {
 		margin-left: auto;
 		margin-right: auto;
-		text-align: left;
-
 		max-width: 60%;
 
+		&:not([class*="has-text-align-"]) { /* 1 */
+			text-align: left; /* 2 */
+		}
+
+		&::before {
+			text-align: inherit !important; /* 3 */
+		}
+
 		p {
 			margin-top: 0;
 			margin-bottom: 0;