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?

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

@@ -24,8 +24,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;
 	}

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 ) && (
+			<aside className={ className }>
+				<blockquote>
 					<RichText
-						tagName="cite"
-						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 ),
 							} )
 						}
+						/* translators: the text of the quotation */
+						placeholder={ __( 'Write quote…' ) }
+						wrapperClassName="block-library-pullquote__content"
 					/>
-				) }
-			</blockquote>
+					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+						<RichText
+							tagName="cite"
+							value={ citation }
+							/* translators: the individual or entity quoted */
+							placeholder={ __( 'Write citation…' ) }
+							onChange={
+								( nextCitation ) => setAttributes( {
+									citation: nextCitation,
+								} )
+							}
+						/>
+					) }
+				</blockquote>
+			</aside>
 		);
 	},
 

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;
 	}