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
WordPress · Sep 12, 2018 · 4883a7e · 4883a7e
1 parent 41d4223
commit 4883a7e
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 69 deletions.
diff --git 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
@@ -55,48 +55,65 @@ 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>
 		);
 	},
 
 	save( { attributes } ) {
 		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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 -->