Since we've introduced block support for border and background color,…

… the default and solid block styles were, aside from the text alignment, redundant. So we have removed them.

To compensate for the alignment, this commit adds a text alignment block control.
Deprecated blocks will still have the `is-style-solid-class`, so we keep the styles targeting it, and also ensure that we set the new attribute `textAlign` to "left" when it's present.

Add specificity to the left and right text align styles so that the block alignment controls have a great chance of overriding theme styles.

lib/experimental-default-theme.json

@@ -226,14 +226,14 @@
 				"border": {
 					"customRadius": true
 				}
-			}
-		},
-		"core/pullquote": {
-			"border": {
-				"customColor": true,
-				"customRadius": true,
-				"customStyle": true,
-				"customWidth": true
+			},
+			"core/pullquote": {
+				"border": {
+					"customColor": true,
+					"customRadius": true,
+					"customStyle": true,
+					"customWidth": true
+				}
 			}
 		}
 	}

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

@@ -1,7 +1,10 @@
 {
 	"apiVersion": 2,
 	"name": "core/pullquote",
+	"title": "Pullquote",
 	"category": "text",
+	"description": "Give special visual emphasis to a quote from your text.",
+	"textdomain": "default",
 	"attributes": {
 		"value": {
 			"type": "string",

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

@@ -178,6 +178,7 @@ const deprecated = [
 				className,
 				backgroundColor: isSolidColorStyle ? mainColor : undefined,
 				borderColor: isSolidColorStyle ? undefined : mainColor,
+				textAlign: isSolidColorStyle ? 'left' : undefined,
 				style,
 				...attributes,
 			};
@@ -335,6 +336,7 @@ const deprecated = [
 				className,
 				backgroundColor: isSolidColorStyle ? mainColor : undefined,
 				borderColor: isSolidColorStyle ? undefined : mainColor,
+				textAlign: isSolidColorStyle ? 'left' : undefined,
 				style,
 				...attributes,
 			};
@@ -458,6 +460,7 @@ const deprecated = [
 				className,
 				backgroundColor: isSolidColorStyle ? mainColor : undefined,
 				borderColor: isSolidColorStyle ? undefined : mainColor,
+				textAlign: isSolidColorStyle ? 'left' : undefined,
 				style,
 				...attributes,
 			};

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

@@ -1,8 +1,18 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -21,53 +31,69 @@ function PullQuoteEdit( {
 	isSelected,
 	insertBlocksAfter,
 } ) {
-	const { value, citation } = attributes;
-	const blockProps = useBlockProps();
+	const { textAlign, citation, value } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
 	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
 
 	return (
-		<Figure { ...blockProps }>
-			<BlockQuote>
-				<RichText
-					identifier="value"
-					multiline
-					value={ value }
-					onChange={ ( nextValue ) =>
-						setAttributes( {
-							value: nextValue,
-						} )
-					}
-					aria-label={ __( 'Pullquote text' ) }
-					placeholder={
-						// translators: placeholder text used for the quote
-						__( 'Add quote' )
-					}
-					textAlign="center"
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
 				/>
-				{ shouldShowCitation && (
+			</BlockControls>
+			<Figure { ...blockProps }>
+				<BlockQuote>
 					<RichText
-						identifier="citation"
-						value={ citation }
-						aria-label={ __( 'Pullquote citation text' ) }
-						placeholder={
-							// translators: placeholder text used for the citation
-							__( 'Add citation' )
-						}
-						onChange={ ( nextCitation ) =>
+						identifier="value"
+						multiline
+						value={ value }
+						onChange={ ( nextValue ) =>
 							setAttributes( {
-								citation: nextCitation,
+								value: nextValue,
 							} )
 						}
-						className="wp-block-pullquote__citation"
-						__unstableMobileNoFocusOnMount
-						textAlign="center"
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						aria-label={ __( 'Pullquote text' ) }
+						placeholder={
+							// translators: placeholder text used for the quote
+							__( 'Add quote' )
 						}
+						textAlign="center"
 					/>
-				) }
-			</BlockQuote>
-		</Figure>
+					{ shouldShowCitation && (
+						<RichText
+							identifier="citation"
+							value={ citation }
+							aria-label={ __( 'Pullquote citation text' ) }
+							placeholder={
+								// translators: placeholder text used for the citation
+								__( 'Add citation' )
+							}
+							onChange={ ( nextCitation ) =>
+								setAttributes( {
+									citation: nextCitation,
+								} )
+							}
+							className="wp-block-pullquote__citation"
+							__unstableMobileNoFocusOnMount
+							textAlign="center"
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( 'core/paragraph' )
+								)
+							}
+						/>
+					) }
+				</BlockQuote>
+			</Figure>
+		</>
 	);
 }
 

packages/block-library/src/pullquote/editor.scss

@@ -1,3 +1,5 @@
+.wp-block-pullquote.has-text-align-left,
+.wp-block-pullquote.has-text-align-right,
 .wp-block[data-align="left"] > .wp-block-pullquote,
 .wp-block[data-align="right"] > .wp-block-pullquote {
 	& p {
@@ -12,6 +14,7 @@
 	}
 }
 
+// .is-style-solid-color is deprecated.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {
 		font-size: 32px;

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

@@ -1,14 +1,25 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { value, citation } = attributes;
+	const { textAlign, citation, value } = attributes;
 	const shouldShowCitation = ! RichText.isEmpty( citation );
 
 	return (
-		<figure { ...useBlockProps.save() }>
+		<figure
+			{ ...useBlockProps.save( {
+				className: classnames( {
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				} ),
+			} ) }
+		>
 			<blockquote>
 				<RichText.Content value={ value } multiline />
 				{ shouldShowCitation && (

packages/block-library/src/pullquote/style.scss

@@ -1,14 +1,16 @@
 .wp-block-pullquote {
 	margin: 0 0 1em 0;
 	padding: 3em 0;
-	text-align: center;
+	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 
 	p,
 	blockquote,
 	cite {
 		color: inherit;
 	}
 
+	&.has-text-align-left,
+	&.has-text-align-right,
 	&.alignleft,
 	&.alignright {
 		max-width: $content-width * 0.5;
@@ -32,17 +34,27 @@
 	}
 }
 
+// Ensure that we are reasonably specific to override theme defaults.
+.wp-block-pullquote.has-text-align-left blockquote {
+	text-align: left;
+}
+
+// Ensure that we are reasonably specific to override theme defaults.
+.wp-block-pullquote.has-text-align-right blockquote {
+	text-align: right;
+}
+
+// .is-style-solid-color is deprecated.
 .wp-block-pullquote:not(.is-style-solid-color) {
 	background: none;
 }
 
+// .is-style-solid-color is deprecated.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {
 		margin-left: auto;
 		margin-right: auto;
-		text-align: left;
-
 		max-width: 60%;
 
 		p {

packages/e2e-tests/fixtures/blocks/core__pullquote__custom-colors.html

@@ -1,3 +1,3 @@
-<!-- wp:pullquote {"style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}},"className":"is-style-default"} -->
-<figure class="wp-block-pullquote is-style-default has-border-color has-text-color has-background" style="background-color:#3486aa;border-color:#045679;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
+<!-- wp:pullquote {"textAlign":"right","style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}},"className":"is-style-default"} -->
+<figure class="wp-block-pullquote is-style-default has-border-color has-text-align-right has-text-color has-background" style="background-color:#3486aa;border-color:#045679;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
 <!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__custom-colors.json

@@ -6,6 +6,7 @@
 		"attributes": {
 			"value": "<p>pullquote</p>",
 			"citation": "citation",
+			"textAlign": "right",
 			"className": "is-style-default",
 			"style": {
 				"color": {
@@ -18,6 +19,6 @@
 			}
 		},
 		"innerBlocks": [],
-		"originalContent": "<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>"
+		"originalContent": "<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-align-right has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>"
 	}
 ]

packages/e2e-tests/fixtures/blocks/core__pullquote__custom-colors.parsed.json

@@ -2,6 +2,7 @@
 	{
 		"blockName": "core/pullquote",
 		"attrs": {
+			"textAlign": "right",
 			"style": {
 				"color": {
 					"background": "#3486aa",
@@ -14,9 +15,9 @@
 			"className": "is-style-default"
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-align-right has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>\n"
+			"\n<figure class=\"wp-block-pullquote is-style-default has-border-color has-text-align-right has-text-color has-background\" style=\"background-color:#3486aa;border-color:#045679;color:#ffefef\"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>\n"
 		]
 	}
 ]

packages/e2e-tests/fixtures/blocks/core__pullquote__custom-colors.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:pullquote {"className":"is-style-default","style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}}} -->
-<figure class="wp-block-pullquote is-style-default has-border-color has-text-color has-background" style="background-color:#3486aa;border-color:#045679;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
+<!-- wp:pullquote {"textAlign":"right","className":"is-style-default","style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}}} -->
+<figure class="wp-block-pullquote has-text-align-right is-style-default has-border-color has-text-color has-background" style="background-color:#3486aa;border-color:#045679;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
 <!-- /wp:pullquote -->

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.json

@@ -6,6 +6,7 @@
 		"attributes": {
 			"className": "has-background has-black-background-color is-style-solid-color",
 			"backgroundColor": "black",
+			"textAlign": "left",
 			"value": "<p>pullquote</p>",
 			"citation": "before block supports",
 			"textColor": "white"

packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:pullquote {"className":"has-background has-black-background-color is-style-solid-color","backgroundColor":"black","textColor":"white"} -->
-<figure class="wp-block-pullquote has-background has-black-background-color is-style-solid-color has-white-color has-black-background-color has-text-color has-background"><blockquote><p>pullquote</p><cite>before block supports</cite></blockquote></figure>
+<!-- wp:pullquote {"textAlign":"left","className":"has-background has-black-background-color is-style-solid-color","backgroundColor":"black","textColor":"white"} -->
+<figure class="wp-block-pullquote has-text-align-left has-background has-black-background-color is-style-solid-color has-white-color has-black-background-color has-text-color has-background"><blockquote><p>pullquote</p><cite>before block supports</cite></blockquote></figure>
 <!-- /wp:pullquote -->