From 5dd81ce757c33f7c6d9e3d8a9db9166cae8068a3 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 27 Nov 2017 14:59:09 +0100
Subject: [PATCH] Block versioning: Introduce a migration function

---
 blocks/api/parser.js                          |  8 ++++-
 blocks/api/test/parser.js                     |  3 +-
 blocks/library/quote/index.js                 | 33 ++++++++++++-------
 .../test/fixtures/core__quote__style-1.json   |  2 +-
 .../test/fixtures/core__quote__style-2.html   |  2 +-
 .../test/fixtures/core__quote__style-2.json   |  2 +-
 .../fixtures/core__quote__style-2.parsed.json |  2 +-
 .../core__quote__style-2.serialized.html      |  2 +-
 phpunit/fixtures/long-content.html            |  4 +--
 post-content.js                               |  2 +-
 10 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/blocks/api/parser.js b/blocks/api/parser.js
index 94a1dfe92f4f03..caaef36a7249e0 100644
--- a/blocks/api/parser.js
+++ b/blocks/api/parser.js
@@ -193,7 +193,13 @@ export function createBlockWithFallback( name, innerHTML, attributes ) {
 				};
 				const deprecatedBlockAttributes = getBlockAttributes( deprecatedBlockType, innerHTML, attributes );
 				const isValid = isValidBlock( innerHTML, deprecatedBlockType, deprecatedBlockAttributes );
-				attributesParsedWithDeprecatedVersion = isValid ? deprecatedBlockAttributes : undefined;
+				if ( isValid ) {
+					// Migrate the attributes
+					attributesParsedWithDeprecatedVersion = deprecatedBlockAttributes;
+					if ( oldBlockType.migrate ) {
+						attributesParsedWithDeprecatedVersion = oldBlockType.migrate( attributesParsedWithDeprecatedVersion );
+					}
+				}
 				return isValid;
 			} );
 
diff --git a/blocks/api/test/parser.js b/blocks/api/test/parser.js
index 8ef32c002891d5..be484b815fb37b 100644
--- a/blocks/api/test/parser.js
+++ b/blocks/api/test/parser.js
@@ -233,6 +233,7 @@ describe( 'block parser', () => {
 							},
 						},
 						save: ( { attributes } ) => <span>{attributes.fruit}</span>,
+						migrate: ( attributes ) => ( { fruit: 'Big ' + attributes.fruit } ),
 					},
 				],
 			} );
@@ -243,7 +244,7 @@ describe( 'block parser', () => {
 				{ fruit: 'Bananas' }
 			);
 			expect( block.name ).toEqual( 'core/test-block' );
-			expect( block.attributes ).toEqual( { fruit: 'Bananas' } );
+			expect( block.attributes ).toEqual( { fruit: 'Big Bananas' } );
 			expect( block.isValid ).toBe( true );
 			/* eslint-disable no-console */
 			expect( console.error ).toHaveBeenCalled();
diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
index a0756c9a9b54b4..5fd57fa6ea0817 100644
--- a/blocks/library/quote/index.js
+++ b/blocks/library/quote/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isString } from 'lodash';
+import { isString, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -47,9 +47,9 @@ const blockAttributes = {
 	align: {
 		type: 'string',
 	},
-	style: {
-		type: 'number',
-		default: 1,
+	isLarge: {
+		type: 'boolean',
+		default: false,
 	},
 };
 
@@ -169,9 +169,9 @@ registerBlockType( 'core/quote', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, className } ) {
-		const { align, value, citation, style } = attributes;
+		const { align, value, citation, isLarge } = attributes;
 		const focusedEditable = focus ? focus.editable || 'value' : null;
-		const containerClassname = classnames( className, style === 2 ? 'is-large' : '' );
+		const containerClassname = classnames( className, { 'is-large': isLarge } );
 
 		return [
 			focus && (
@@ -179,9 +179,9 @@ registerBlockType( 'core/quote', {
 					<Toolbar controls={ [ 1, 2 ].map( ( variation ) => ( {
 						icon: 1 === variation ? 'format-quote' : 'testimonial',
 						title: sprintf( __( 'Quote style %d' ), variation ),
-						isActive: Number( style ) === variation,
+						isActive: ( isLarge && variation === 2 ) || ( ! isLarge && variation === 1 ),
 						onClick() {
-							setAttributes( { style: variation } );
+							setAttributes( { isLarge: variation === 2 } );
 						},
 					} ) ) } />
 					<AlignmentToolbar
@@ -236,11 +236,11 @@ registerBlockType( 'core/quote', {
 	},
 
 	save( { attributes } ) {
-		const { align, value, citation, style } = attributes;
+		const { align, value, citation, isLarge } = attributes;
 
 		return (
 			<blockquote
-				className={ style === 2 ? 'is-large' : '' }
+				className={ isLarge ? 'is-large' : '' }
 				style={ { textAlign: align ? align : null } }
 			>
 				{ value.map( ( paragraph, i ) => (
@@ -256,12 +256,16 @@ registerBlockType( 'core/quote', {
 	deprecated: [
 		{
 			attributes: {
-				...blockAttributes,
+				...omit( blockAttributes, [ 'isLarge', 'citation' ] ),
 				citation: {
 					type: 'array',
 					source: 'children',
 					selector: 'footer',
 				},
+				style: {
+					type: 'number',
+					default: 1,
+				},
 			},
 
 			save( { attributes } ) {
@@ -281,6 +285,13 @@ registerBlockType( 'core/quote', {
 					</blockquote>
 				);
 			},
+
+			migrate( attributes ) {
+				return {
+					...omit( attributes, [ 'style' ] ),
+					isLarge: attributes.style === 2,
+				};
+			},
 		},
 	],
 } );
diff --git a/blocks/test/fixtures/core__quote__style-1.json b/blocks/test/fixtures/core__quote__style-1.json
index bea152f89f32c6..5dc66fb274aa93 100644
--- a/blocks/test/fixtures/core__quote__style-1.json
+++ b/blocks/test/fixtures/core__quote__style-1.json
@@ -21,7 +21,7 @@
             "citation": [
                 "Matt Mullenweg, 2017"
             ],
-            "style": 1
+            "isLarge": false
         },
         "originalContent": "<blockquote class=\"wp-block-quote\"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>"
     }
diff --git a/blocks/test/fixtures/core__quote__style-2.html b/blocks/test/fixtures/core__quote__style-2.html
index 544a6062c1d802..9053519d60ba57 100644
--- a/blocks/test/fixtures/core__quote__style-2.html
+++ b/blocks/test/fixtures/core__quote__style-2.html
@@ -1,3 +1,3 @@
-<!-- wp:core/quote {"style":"2"} -->
+<!-- wp:core/quote {"isLarge":true} -->
 <blockquote class="wp-block-quote is-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:core/quote -->
diff --git a/blocks/test/fixtures/core__quote__style-2.json b/blocks/test/fixtures/core__quote__style-2.json
index ea48f03aef42fe..26f9ec433faa8f 100644
--- a/blocks/test/fixtures/core__quote__style-2.json
+++ b/blocks/test/fixtures/core__quote__style-2.json
@@ -21,7 +21,7 @@
             "citation": [
                 "Maya Angelou"
             ],
-            "style": 2
+            "isLarge": true
         },
         "originalContent": "<blockquote class=\"wp-block-quote is-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>"
     }
diff --git a/blocks/test/fixtures/core__quote__style-2.parsed.json b/blocks/test/fixtures/core__quote__style-2.parsed.json
index 5af57f9cc0706d..aa9832633e4356 100644
--- a/blocks/test/fixtures/core__quote__style-2.parsed.json
+++ b/blocks/test/fixtures/core__quote__style-2.parsed.json
@@ -2,7 +2,7 @@
     {
         "blockName": "core/quote",
         "attrs": {
-            "style": "2"
+            "isLarge": true
         },
         "innerBlocks": [],
         "innerHTML": "\n<blockquote class=\"wp-block-quote is-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>\n"
diff --git a/blocks/test/fixtures/core__quote__style-2.serialized.html b/blocks/test/fixtures/core__quote__style-2.serialized.html
index f1256d9f8952ea..b120aff060d6a9 100644
--- a/blocks/test/fixtures/core__quote__style-2.serialized.html
+++ b/blocks/test/fixtures/core__quote__style-2.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:quote {"style":2} -->
+<!-- wp:quote {"isLarge":true} -->
 <blockquote class="wp-block-quote is-large">
     <p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:quote -->
diff --git a/phpunit/fixtures/long-content.html b/phpunit/fixtures/long-content.html
index 370dc35b59b50e..d8bcac025432d1 100644
--- a/phpunit/fixtures/long-content.html
+++ b/phpunit/fixtures/long-content.html
@@ -55,7 +55,7 @@ <h2>Visual Editing</h2>
 <!-- wp:core/paragraph -->
 <p>A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:</p>
 <!-- /wp:core/paragraph -->
-<!-- wp:core/quote { "style": 1 } -->
+<!-- wp:core/quote { "isLarge": false } -->
 <blockquote class="wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
 <!-- /wp:core/quote -->
 <!-- wp:core/paragraph -->
@@ -64,7 +64,7 @@ <h2>Visual Editing</h2>
 <!-- wp:core/paragraph -->
 <p>Blocks can be anything you need. For instance, you may want to insert a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.</p>
 <!-- /wp:core/paragraph -->
-<!-- wp:core/quote { "style": 2 } -->
+<!-- wp:core/quote { "isLarge": true } -->
 <blockquote class="is-large wp-block-quote"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:core/quote -->
 <!-- wp:core/separator -->
diff --git a/post-content.js b/post-content.js
index dc5a25df7ad8c7..71122737b3d3d8 100644
--- a/post-content.js
+++ b/post-content.js
@@ -91,7 +91,7 @@ window._wpGutenbergPost.content = {
 		'<p>Blocks can be anything you need. For instance, you may want to insert a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.</p>',
 		'<!-- /wp:paragraph -->',
 
-		'<!-- wp:quote {"style":2} -->',
+		'<!-- wp:quote {"isLarge":true} -->',
 		'<blockquote class="wp-block-quote is-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>',
 		'<!-- /wp:quote -->',