Blocks: Use cite instead of footer for the pullquote block's markup

WordPress · Dec 8, 2017 · dcf2a9d · dcf2a9d
1 parent f9fdeae
commit dcf2a9d
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 41 deletions.
diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss
@@ -11,7 +11,7 @@
 }
 
 .wp-block-pullquote {
-	footer .blocks-editable__tinymce[data-is-empty="true"]:before {
+	cite .blocks-editable__tinymce[data-is-empty="true"]:before {
 		font-size: 14px;
 		font-family: $default-font;
 	}

diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js
@@ -24,6 +24,27 @@ const toEditableValue = value => map( value, ( subValue => subValue.children ) )
 const fromEditableValue = value => map( value, ( subValue ) => ( {
 	children: subValue,
 } ) );
+const blockAttributes = {
+	value: {
+		type: 'array',
+		source: 'query',
+		selector: 'blockquote > p',
+		query: {
+			children: {
+				source: 'node',
+			},
+		},
+	},
+	citation: {
+		type: 'array',
+		source: 'children',
+		selector: 'cite',
+	},
+	align: {
+		type: 'string',
+		default: 'none',
+	},
+};
 
 registerBlockType( 'core/pullquote', {
 
@@ -33,27 +54,7 @@ registerBlockType( 'core/pullquote', {
 
 	category: 'formatting',
 
-	attributes: {
-		value: {
-			type: 'array',
-			source: 'query',
-			selector: 'blockquote > p',
-			query: {
-				children: {
-					source: 'node',
-				},
-			},
-		},
-		citation: {
-			type: 'array',
-			source: 'children',
-			selector: 'footer',
-		},
-		align: {
-			type: 'string',
-			default: 'none',
-		},
-	},
+	attributes: blockAttributes,
 
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
@@ -123,9 +124,35 @@ registerBlockType( 'core/pullquote', {
 					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
 				) }
 				{ citation && citation.length > 0 && (
-					<footer>{ citation }</footer>
+					<cite>{ citation }</cite>
 				) }
 			</blockquote>
 		);
 	},
+
+	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+			citation: {
+				type: 'array',
+				source: 'children',
+				selector: 'footer',
+			},
+		},
+
+		save( { attributes } ) {
+			const { value, citation, align } = attributes;
+
+			return (
+				<blockquote className={ `align${ align }` }>
+					{ value && value.map( ( paragraph, i ) =>
+						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
+					) }
+					{ citation && citation.length > 0 && (
+						<footer>{ citation }</footer>
+					) }
+				</blockquote>
+			);
+		},
+	} ],
 } );
diff --git a/blocks/library/pullquote/style.scss b/blocks/library/pullquote/style.scss
@@ -21,15 +21,15 @@
 		line-height: 1.6;
 	}
 
-	footer {
+	cite {
 		color: $dark-gray-600;
 		position: relative;
 		font-weight: 900;
 		text-transform: uppercase;
 		font-size: 13px;
 	}
 
-	footer p {
+	cite p {
 		font-family: $default-font;
 	}
 }
diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss
@@ -2,7 +2,7 @@
 	margin: 0 0 16px;
 	box-shadow: inset 0px 0px 0px 0px $light-gray-500;
 
-	footer {
+	cite {
 		color: $dark-gray-100;
 		margin-top: 1em;
 		position: relative;
@@ -17,7 +17,7 @@
 			font-style: italic;
 			line-height: 1.6;
 		}
-		footer {
+		cite {
 			font-size: 19px;
 			text-align: right;
 		}

diff --git a/blocks/test/fixtures/core__pullquote.html b/blocks/test/fixtures/core__pullquote.html
@@ -1,5 +1,5 @@
 <!-- wp:core/pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
-<p>Testing pullquote block...</p><footer>...with a caption</footer>
+<p>Testing pullquote block...</p><cite>...with a caption</cite>
 </blockquote>
 <!-- /wp:core/pullquote -->
diff --git a/blocks/test/fixtures/core__pullquote.json b/blocks/test/fixtures/core__pullquote.json
@@ -23,6 +23,6 @@
             ],
             "align": "none"
         },
-        "originalContent": "<blockquote class=\"wp-block-pullquote alignnone\">\n<p>Testing pullquote block...</p><footer>...with a caption</footer>\n</blockquote>"
+        "originalContent": "<blockquote class=\"wp-block-pullquote alignnone\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>"
     }
 ]
diff --git a/blocks/test/fixtures/core__pullquote.parsed.json b/blocks/test/fixtures/core__pullquote.parsed.json
@@ -3,7 +3,7 @@
         "blockName": "core/pullquote",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-pullquote alignnone\">\n<p>Testing pullquote block...</p><footer>...with a caption</footer>\n</blockquote>\n"
+        "innerHTML": "\n<blockquote class=\"wp-block-pullquote alignnone\">\n<p>Testing pullquote block...</p><cite>...with a caption</cite>\n</blockquote>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__pullquote.serialized.html b/blocks/test/fixtures/core__pullquote.serialized.html
@@ -1,6 +1,4 @@
 <!-- wp:pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
-    <p>Testing pullquote block...</p>
-    <footer>...with a caption</footer>
-</blockquote>
+    <p>Testing pullquote block...</p><cite>...with a caption</cite></blockquote>
 <!-- /wp:pullquote -->
diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.html b/blocks/test/fixtures/core__pullquote__multi-paragraph.html
@@ -2,6 +2,6 @@
 <blockquote class="wp-block-pullquote alignnone">
     <p>Paragraph <strong>one</strong></p>
     <p>Paragraph two</p>
-    <footer>by whomever</footer>
+    <cite>by whomever</cite>
 </blockquote>
 <!-- /wp:core/pullquote -->
diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.json b/blocks/test/fixtures/core__pullquote__multi-paragraph.json
@@ -47,6 +47,6 @@
             ],
             "align": "none"
         },
-        "originalContent": "<blockquote class=\"wp-block-pullquote alignnone\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <footer>by whomever</footer>\n</blockquote>"
+        "originalContent": "<blockquote class=\"wp-block-pullquote alignnone\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <cite>by whomever</cite>\n</blockquote>"
     }
 ]
diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json b/blocks/test/fixtures/core__pullquote__multi-paragraph.parsed.json
@@ -3,7 +3,7 @@
         "blockName": "core/pullquote",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-pullquote alignnone\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <footer>by whomever</footer>\n</blockquote>\n"
+        "innerHTML": "\n<blockquote class=\"wp-block-pullquote alignnone\">\n    <p>Paragraph <strong>one</strong></p>\n    <p>Paragraph two</p>\n    <cite>by whomever</cite>\n</blockquote>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html b/blocks/test/fixtures/core__pullquote__multi-paragraph.serialized.html
@@ -1,7 +1,5 @@
 <!-- wp:pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
     <p>Paragraph <strong>one</strong></p>
-    <p>Paragraph two</p>
-    <footer>by whomever</footer>
-</blockquote>
+    <p>Paragraph two</p><cite>by whomever</cite></blockquote>
 <!-- /wp:pullquote -->
diff --git a/phpunit/fixtures/long-content.html b/phpunit/fixtures/long-content.html
@@ -110,7 +110,7 @@ <h2>Media Rich</h2>
 <!-- wp:pullquote -->
 <blockquote class="wp-block-pullquote alignnone">
 <p>Code is Poetry</p>
-<footer>The WordPress community</footer>
+<cite>The WordPress community</cite>
 </blockquote>
 <!-- /wp:pullquote -->
 <!-- wp:paragraph {"align":"center"} -->

diff --git a/post-content.js b/post-content.js
@@ -135,7 +135,7 @@ window._wpGutenbergPost.content = {
 		'<!-- /wp:paragraph -->',
 
 		'<!-- wp:pullquote -->',
-		'<blockquote class="wp-block-pullquote alignnone"><p>Code is Poetry</p><footer>The WordPress community</footer></blockquote>',
+		'<blockquote class="wp-block-pullquote alignnone"><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote>',
 		'<!-- /wp:pullquote -->',
 
 		'<!-- wp:paragraph {"align":"center"} -->',