Add Text Alignment Support to the Pullquote Block

packages/block-editor/src/components/alignment-control/README.md

@@ -44,6 +44,13 @@ _Note:_ In this example that we render `AlignmentControl` as a child of the `Blo
 
 The current value of the alignment setting. You may only choose from the `Options` listed above.
 
+### `placeholder`
+-   **Type:** `String`
+-   **Default:** `left` for left-to-right languages, `right` for right-to-left languages
+-   **Options:**: `left`, `center`, `right`
+
+The placeholder alignment value that will be reflected by the toolbar icon when the value is `undefined`. If the content inside your block is aligned to center when no specific `value` is defined, you should set `placeholder` to `center`.
+
 ### `onChange`
 
 -   **Type:** `Function`

packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AlignmentUI should allow a custom placeholder to be specified 1`] = `
+<ToolbarDropdownMenu
+  controls={
+    Array [
+      Object {
+        "align": "left",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text left",
+      },
+      Object {
+        "align": "center",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text center",
+      },
+      Object {
+        "align": "right",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text right",
+      },
+    ]
+  }
+  icon={
+    <SVG
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+      />
+    </SVG>
+  }
+  label="Align"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+      "position": "bottom right",
+    }
+  }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
+/>
+`;
+
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
 <ToolbarGroup
   controls={

packages/block-editor/src/components/alignment-control/test/index.js

@@ -51,6 +51,17 @@ describe( 'AlignmentUI', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'center' );
 	} );
 
+	test( 'should allow a custom placeholder to be specified', () => {
+		const wrapperPlaceholder = shallow(
+			<AlignmentUI placeholder="center" />
+		);
+		expect( wrapperPlaceholder ).toMatchSnapshot();
+
+		const wrapperIllegalPlaceholder = () =>
+			shallow( <AlignmentUI placeholder="illegal-value" /> );
+		expect( wrapperIllegalPlaceholder ).not.toThrowError();
+	} );
+
 	test( 'should allow custom alignment controls to be specified', () => {
 		const wrapperCustomControls = shallow(
 			<AlignmentUI

packages/block-editor/src/components/alignment-control/ui.js

@@ -35,6 +35,7 @@ const POPOVER_PROPS = {
 
 function AlignmentUI( {
 	value,
+	placeholder,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align' ),
@@ -51,8 +52,15 @@ function AlignmentUI( {
 		( control ) => control.align === value
 	);
 
+	const placeholderAlignment = find(
+		alignmentControls,
+		( control ) => control.align === placeholder
+	);
+
 	function setIcon() {
 		if ( activeAlignment ) return activeAlignment.icon;
+		if ( placeholderAlignment ) return placeholderAlignment.icon;
+
 		return isRTL() ? alignRight : alignLeft;
 	}
 

packages/block-library/src/pullquote/block.json

@@ -20,6 +20,9 @@
 			"default": "",
 			"__experimentalRole": "content"
 		},
+		"textAlign": {
+			"type": "string"
+		},
 		"mainColor": {
 			"type": "string"
 		},

packages/block-library/src/pullquote/edit.js

@@ -7,11 +7,13 @@ import { includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 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,
@@ -56,6 +58,15 @@ function PullQuoteEdit( {
 			: { ...style, borderColor: mainColor.color },
 	};
 
+	// The default and the solid color styles align text differently when `textAlign`
+	// is undefined, so we need to make sure the placeholder icon on the `AlignmentToolbar`
+	// reflects with the default alignment properly.
+	function pullQuoteTextAlignPlaceholder() {
+		// The solid color style aligns text to the side, not center.
+		const solidColorStyleAlign = isRTL() ? 'right' : 'left';
+		return isSolidColorStyle ? solidColorStyleAlign : 'center';
+	}
+
 	function pullQuoteMainColorSetter( colorValue ) {
 		const needTextColor =
 			! textColor.color || wasTextColorAutomaticallyComputed.current;
@@ -108,12 +119,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 +169,15 @@ function PullQuoteEdit( {
 					) }
 				</BlockQuote>
 			</Figure>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					placeholder={ pullQuoteTextAlignPlaceholder() }
+					onChange={ ( nextTextAlign ) =>
+						setAttributes( { textAlign: nextTextAlign } )
+					}
+				/>
+			</BlockControls>
 			{ Platform.OS === 'web' && (
 				<InspectorControls>
 					<PanelColorSettings

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;
 
@@ -57,10 +59,13 @@ export default function save( { attributes } ) {
 
 	const blockquoteTextColorClass = getColorClassName( 'color', textColor );
 	const blockquoteClasses =
-		( textColor || customTextColor ) &&
-		classnames( 'has-text-color', {
-			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
-		} );
+		classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+			...( isTextColorSet && {
+				'has-text-color': true,
+				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+			} ),
+		} ) || undefined;
 
 	const blockquoteStyles = blockquoteTextColorClass
 		? undefined

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;

packages/e2e-tests/fixtures/blocks/core__pullquote__text-alignment.html

@@ -0,0 +1,8 @@
+<!-- wp:pullquote {"textAlign":"right"} -->
+<figure class="wp-block-pullquote">
+	<blockquote class="has-text-align-right">
+		<p>This pullquote has text aligned to right.</p>
+		<cite>So does the citation.</cite>
+	</blockquote>
+</figure>
+<!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__text-alignment.json

@@ -0,0 +1,14 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/pullquote",
+		"isValid": true,
+		"attributes": {
+			"value": "<p>This pullquote has text aligned to right.</p>",
+			"citation": "So does the citation.",
+			"textAlign": "right"
+		},
+		"innerBlocks": [],
+		"originalContent": "<figure class=\"wp-block-pullquote\">\n\t<blockquote class=\"has-text-align-right\">\n\t\t<p>This pullquote has text aligned to right.</p>\n\t\t<cite>So does the citation.</cite>\n\t</blockquote>\n</figure>"
+	}
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__text-alignment.parsed.json

@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/pullquote",
+		"attrs": {
+			"textAlign": "right"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-pullquote\">\n\t<blockquote class=\"has-text-align-right\">\n\t\t<p>This pullquote has text aligned to right.</p>\n\t\t<cite>So does the citation.</cite>\n\t</blockquote>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-pullquote\">\n\t<blockquote class=\"has-text-align-right\">\n\t\t<p>This pullquote has text aligned to right.</p>\n\t\t<cite>So does the citation.</cite>\n\t</blockquote>\n</figure>\n"
+		]
+	}
+]

packages/e2e-tests/fixtures/blocks/core__pullquote__text-alignment.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"textAlign":"right"} -->
+<figure class="wp-block-pullquote"><blockquote class="has-text-align-right"><p>This pullquote has text aligned to right.</p><cite>So does the citation.</cite></blockquote></figure>
+<!-- /wp:pullquote -->