TinyMCE per block: Fix the quote markup (#175)

- Use blockquote - Use footer for the cite
WordPress · Mar 3, 2017 · b7147ea · b7147ea
1 parent b71de46
commit b7147ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html
@@ -7,7 +7,7 @@
 <body>
 	<div class="editor"></div>
 	<script>
-		window.content = '<!-- wp:heading size:h2 --><h2>1.0 Is The Loneliest Number</h2><!-- /wp --><!-- wp:quote cite:Jobs --><p>Design is not just what it looks like and feels like. Design is how it works.</p><!-- /wp --><!-- wp:paragraph --><p>Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p><!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp --><!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph --><p>Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p><!-- /wp -->';
+		window.content = '<!-- wp:heading size:h2 --><h2>1.0 Is The Loneliest Number</h2><!-- /wp --><!-- wp:quote --><blockquote><p>Design is not just what it looks like and feels like. Design is how it works.</p><footer>Steve Jobs</footer></blockquote><!-- /wp --><!-- wp:paragraph --><p>Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p><!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp --><!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph --><p>Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p><!-- /wp -->';
 	</script>
 
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">

diff --git a/tinymce-per-block/src/blocks/quote-block/index.js b/tinymce-per-block/src/blocks/quote-block/index.js
@@ -20,22 +20,39 @@ registerBlock( 'quote', {
 		div.innerHTML = rawBlock.rawContent;
 		if (
 			div.childNodes.length !== 1 ||
-			div.firstChild.nodeName !== 'P'
+			! (
+				div.firstChild.nodeName === 'P' ||
+				(
+					div.firstChild.nodeName === 'BLOCKQUOTE' &&
+					div.firstChild.childNodes.length &&
+					div.firstChild.firstChild.nodeName === 'P'
+				)
+			)
 		) {
 			return false;
 		}
 
+		const content = div.firstChild.nodeName === 'P'
+			? div.innerHTML
+			: div.firstChild.firstChild.outerHTML;
+
+		const cite = div.firstChild.childNodes.length > 1
+			? div.firstChild.childNodes[ 1 ].innerHTML
+			: '';
+
 		return {
 			blockType: 'quote',
-			cite: rawBlock.attrs.cite || '',
-			content: rawBlock.rawContent,
+			cite,
+			content
 		};
 	},
 	serialize: ( block ) => {
+		const rawContent = `<blockquote>${ block.content }<footer>${ block.cite }</footer></blockquote>`;
+
 		return {
 			blockType: 'quote',
-			attrs: { cite: block.cite },
-			rawContent: block.content
+			attrs: {},
+			rawContent
 		};
 	}
 } );