From 4883a7edba4857ab0502a4acad6642a19a44c68a Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 12 Sep 2018 12:30:20 +0200
Subject: [PATCH] Add aside wrapper to pullquote (#9599)

* Add aside wrapper to pullquote

This is an alternative, per discussion, to #8821.

It adds some semantic value to the pullquote, indicating that it is intended to be separate content.

Note that we should consider doing a few other enhancements to the pullquote, if we intend to keep it:

- Let's add a transformation from Quote to Pullquote and back
- For some reason, the alignment values are not output in the markup in the editor, only on the frontend, which means the max-width we apply does not affect the content.

I could use help with both of these. I also imagine the deprecation handler needs a little extra now. @gziolo do you have bandwidth?

* Figure.

* Fix for frontend.

* Added deprecation artifacts

* Updated test fixtures
---
 .../block-library/src/pullquote/editor.scss   |  4 +-
 packages/block-library/src/pullquote/index.js | 69 ++++++++++++-------
 .../block-library/src/pullquote/style.scss    |  6 +-
 .../test/__snapshots__/index.js.snap          | 50 +++++++-------
 .../fixtures/core__pullquote.html             |  8 ++-
 .../fixtures/core__pullquote.json             |  2 +-
 .../fixtures/core__pullquote.parsed.json      |  2 +-
 .../fixtures/core__pullquote.serialized.html  |  2 +-
 .../core__pullquote__multi-paragraph.html     | 12 ++--
 .../core__pullquote__multi-paragraph.json     |  2 +-
 ...re__pullquote__multi-paragraph.parsed.json |  2 +-
 ...pullquote__multi-paragraph.serialized.html |  2 +-
 12 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index b2fc97541bda9..075f2ff5aa56f 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -20,8 +20,8 @@
 		transform: translateX(-50%);
 	}
 
-	& > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
-	& > .editor-rich-text p {
+	& blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
+	& blockquote > .editor-rich-text p {
 		font-size: 24px;
 		line-height: 1.6;
 	}
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index 539308618793d..bd4ac84feb8d8 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -55,33 +55,35 @@ export const settings = {
 		const { value, citation } = attributes;
 
 		return (
-			<blockquote className={ className }>
-				<RichText
-					multiline="p"
-					value={ toRichTextValue( value ) }
-					onChange={
-						( nextValue ) => setAttributes( {
-							value: fromRichTextValue( nextValue ),
-						} )
-					}
-					/* translators: the text of the quotation */
-					placeholder={ __( 'Write quote…' ) }
-					wrapperClassName="block-library-pullquote__content"
-				/>
-				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+			<figure className={ className }>
+				<blockquote>
 					<RichText
-						value={ citation }
-						/* translators: the individual or entity quoted */
-						placeholder={ __( 'Write citation…' ) }
+						multiline="p"
+						value={ toRichTextValue( value ) }
 						onChange={
-							( nextCitation ) => setAttributes( {
-								citation: nextCitation,
+							( nextValue ) => setAttributes( {
+								value: fromRichTextValue( nextValue ),
 							} )
 						}
-						className="wp-block-pullquote__citation"
+						/* translators: the text of the quotation */
+						placeholder={ __( 'Write quote…' ) }
+						wrapperClassName="block-library-pullquote__content"
 					/>
-				) }
-			</blockquote>
+					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+						<RichText
+							value={ citation }
+							/* translators: the individual or entity quoted */
+							placeholder={ __( 'Write citation…' ) }
+							onChange={
+								( nextCitation ) => setAttributes( {
+									citation: nextCitation,
+								} )
+							}
+							className="wp-block-pullquote__citation"
+						/>
+					) }
+				</blockquote>
+			</figure>
 		);
 	},
 
@@ -89,14 +91,29 @@ export const settings = {
 		const { value, citation } = attributes;
 
 		return (
-			<blockquote>
-				<RichText.Content value={ toRichTextValue( value ) } />
-				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
-			</blockquote>
+			<figure>
+				<blockquote>
+					<RichText.Content value={ toRichTextValue( value ) } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			</figure>
 		);
 	},
 
 	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+		},
+		save( { attributes } ) {
+			const { value, citation } = attributes;
+			return (
+				<blockquote>
+					<RichText.Content value={ toRichTextValue( value ) } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	}, {
 		attributes: {
 			...blockAttributes,
 			citation: {
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 2467adff4e543..7bc4b66cdc440 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -4,14 +4,14 @@
 
 	&.alignleft,
 	&.alignright {
-		max-width: 400px;
+		max-width: $content-width / 2;
 
-		> p {
+		p {
 			font-size: 20px;
 		}
 	}
 
-	> p {
+	p {
 		font-size: 24px;
 		line-height: 1.6;
 	}
diff --git a/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap b/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
index 0fb96fbe63061..4a96bb5863af5 100644
--- a/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
@@ -1,37 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/pullquote block edit matches snapshot 1`] = `
-<blockquote
+<figure
   class="wp-block-pullquote"
 >
-  <div
-    class="block-library-pullquote__content editor-rich-text"
-  >
-    <div>
+  <blockquote>
+    <div
+      class="block-library-pullquote__content editor-rich-text"
+    >
       <div>
-        <div
-          class="components-autocomplete"
-        >
+        <div>
           <div
-            aria-autocomplete="list"
-            aria-expanded="false"
-            aria-label="Write quote…"
-            aria-multiline="true"
-            class="editor-rich-text__tinymce"
-            contenteditable="true"
-            data-is-placeholder-visible="true"
-            role="textbox"
-          />
-          <div
-            class="editor-rich-text__tinymce"
+            class="components-autocomplete"
           >
-            <p>
-              Write quote…
-            </p>
+            <div
+              aria-autocomplete="list"
+              aria-expanded="false"
+              aria-label="Write quote…"
+              aria-multiline="true"
+              class="editor-rich-text__tinymce"
+              contenteditable="true"
+              data-is-placeholder-visible="true"
+              role="textbox"
+            />
+            <div
+              class="editor-rich-text__tinymce"
+            >
+              <p>
+                Write quote…
+              </p>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</blockquote>
+  </blockquote>
+</figure>
 `;
diff --git a/test/integration/full-content/fixtures/core__pullquote.html b/test/integration/full-content/fixtures/core__pullquote.html
index 8c13cedfe000d..87bd8b74f964c 100644
--- a/test/integration/full-content/fixtures/core__pullquote.html
+++ b/test/integration/full-content/fixtures/core__pullquote.html
@@ -1,5 +1,7 @@
 <!-- wp:core/pullquote -->
-<blockquote class="wp-block-pullquote">
-<p>Testing pullquote block...</p><cite>...with a caption</cite>
-</blockquote>
+<figure class="wp-block-pullquote">
+    <blockquote>
+    <p>Testing pullquote block...</p><cite>...with a caption</cite>
+    </blockquote>
+</figure>
 <!-- /wp:core/pullquote -->
diff --git a/test/integration/full-content/fixtures/core__pullquote.json b/test/integration/full-content/fixtures/core__pullquote.json
index 11d576614228c..a288af83867da 100644
--- a/test/integration/full-content/fixtures/core__pullquote.json
+++ b/test/integration/full-content/fixtures/core__pullquote.json
@@ -21,6 +21,6 @@
             ]
         },
         "innerBlocks": [],
-        "originalContent": "<blockquote class=\"wp-block-pullquote\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>"
+        "originalContent": "<figure class=\"wp-block-pullquote\">\n    <blockquote>\n    <p>Testing pullquote block...</p><cite>...with a caption</cite>\n    </blockquote>\n</figure>"
     }
 ]
diff --git a/test/integration/full-content/fixtures/core__pullquote.parsed.json b/test/integration/full-content/fixtures/core__pullquote.parsed.json
index c8d7f7c3c2dd6..bafaa101c2d0a 100644
--- a/test/integration/full-content/fixtures/core__pullquote.parsed.json
+++ b/test/integration/full-content/fixtures/core__pullquote.parsed.json
@@ -3,7 +3,7 @@
         "blockName": "core/pullquote",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-pullquote\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>\n"
+        "innerHTML": "\n<figure class=\"wp-block-pullquote\">\n    <blockquote>\n    <p>Testing pullquote block...</p><cite>...with a caption</cite>\n    </blockquote>\n</figure>\n"
     },
     {
         "attrs": {},
diff --git a/test/integration/full-content/fixtures/core__pullquote.serialized.html b/test/integration/full-content/fixtures/core__pullquote.serialized.html
index 00f47cf0d5e39..6ef3209575aeb 100644
--- a/test/integration/full-content/fixtures/core__pullquote.serialized.html
+++ b/test/integration/full-content/fixtures/core__pullquote.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:pullquote -->
-<blockquote class="wp-block-pullquote"><p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote>
+<figure class="wp-block-pullquote"><blockquote><p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote></figure>
 <!-- /wp:pullquote -->
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html
index 252b029f1f888..eace115333c62 100644
--- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html
+++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.html
@@ -1,7 +1,9 @@
 <!-- wp:core/pullquote -->
-<blockquote class="wp-block-pullquote">
-    <p>Paragraph <strong>one</strong></p>
-    <p>Paragraph two</p>
-    <cite>by whomever</cite>
-</blockquote>
+<figure class="wp-block-pullquote">
+    <blockquote>
+        <p>Paragraph <strong>one</strong></p>
+        <p>Paragraph two</p>
+        <cite>by whomever</cite>
+	</blockquote>
+</figure>
 <!-- /wp:core/pullquote -->
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json
index 266568fa51bc0..c889d363b653c 100644
--- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json
+++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.json
@@ -39,6 +39,6 @@
             ]
         },
         "innerBlocks": [],
-        "originalContent": "<blockquote class=\"wp-block-pullquote\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <cite>by whomever</cite>\n</blockquote>"
+        "originalContent": "<figure class=\"wp-block-pullquote\">\n    <blockquote>\n        <p>Paragraph <strong>one</strong></p>\n        <p>Paragraph two</p>\n        <cite>by whomever</cite>\n\t</blockquote>\n</figure>"
     }
 ]
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json
index 2a816764b3ae4..ee9cee5764b70 100644
--- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json
+++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.parsed.json
@@ -3,7 +3,7 @@
         "blockName": "core/pullquote",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-pullquote\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <cite>by whomever</cite>\n</blockquote>\n"
+        "innerHTML": "\n<figure class=\"wp-block-pullquote\">\n    <blockquote>\n        <p>Paragraph <strong>one</strong></p>\n        <p>Paragraph two</p>\n        <cite>by whomever</cite>\n\t</blockquote>\n</figure>\n"
     },
     {
         "attrs": {},
diff --git a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html
index 635df56edcf4f..333b051f19728 100644
--- a/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html
+++ b/test/integration/full-content/fixtures/core__pullquote__multi-paragraph.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:pullquote -->
-<blockquote class="wp-block-pullquote"><p>Paragraph <strong>one</strong></p><p>Paragraph two</p><cite>by whomever</cite></blockquote>
+<figure class="wp-block-pullquote"><blockquote><p>Paragraph <strong>one</strong></p><p>Paragraph two</p><cite>by whomever</cite></blockquote></figure>
 <!-- /wp:pullquote -->