Block library: Refactor Quote block to use class names for text align (…

…#16779) * Block library: Refactor Quote block to use class names for text align * Refactor CSS theme styles to use new text align classes
WordPress · Aug 29, 2019 · ce58b88 · ce58b88
1 parent e1e924c
commit ce58b88
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 6 deletions.
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
@@ -28,6 +28,19 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: blockAttributes,
+		save( { attributes } ) {
+			const { align, value, citation } = attributes;
+
+			return (
+				<blockquote style={ { textAlign: align ? align : null } }>
+					<RichText.Content multiline value={ value } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import { BlockQuotation } from '@wordpress/components';
 
 export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
 	const { align, value, citation } = attributes;
+
 	return (
 		<>
 			<BlockControls>
@@ -17,7 +23,11 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 					} }
 				/>
 			</BlockControls>
-			<BlockQuotation className={ className } style={ { textAlign: align } }>
+			<BlockQuotation
+				className={ classnames( className, {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+			>
 				<RichText
 					identifier="value"
 					multiline

diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,8 +11,12 @@ import { RichText } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { align, value, citation } = attributes;
 
+	const className = classnames( {
+		[ `has-text-align-${ align }` ]: align,
+	} );
+
 	return (
-		<blockquote style={ { textAlign: align ? align : null } }>
+		<blockquote className={ className }>
 			<RichText.Content multiline value={ value } />
 			{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 		</blockquote>

diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -13,16 +13,16 @@
 		font-style: normal;
 	}
 
-	&[style*="text-align:right"],
-	&[style*="text-align: right"] {
+	&.has-text-align-right,
+	&.has-text-align-right {
 		border-left: none;
 		border-right: 4px solid $black;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&[style*="text-align:center"],
-	&[style*="text-align: center"] {
+	&.has-text-align-center,
+	&.has-text-align-center {
 		border: none;
 		padding-left: 0;
 	}

diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html
@@ -0,0 +1,6 @@
+<!-- wp:core/quote {"align":"right"} -->
+<blockquote style="text-align:right" class="wp-block-quote">
+	<p>Testing deprecated quote block...</p>
+	<cite>...with a caption</cite>
+</blockquote>
+<!-- /wp:core/quote -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json
@@ -0,0 +1,14 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/quote",
+        "isValid": true,
+        "attributes": {
+            "value": "<p>Testing deprecated quote block...</p>",
+            "citation": "...with a caption",
+            "align": "right"
+        },
+        "innerBlocks": [],
+        "originalContent": "<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json
@@ -0,0 +1,22 @@
+[
+    {
+        "blockName": "core/quote",
+        "attrs": {
+            "align": "right"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>\n",
+        "innerContent": [
+            "\n<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:quote {"align":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><p>Testing deprecated quote block...</p><cite>...with a caption</cite></blockquote>
+<!-- /wp:quote -->