Block versioning: Introduce a migration function

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

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();

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,19 +169,19 @@ 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 && (
 				<BlockControls key="controls">
 					<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,
+				};
+			},
 		},
 	],
 } );

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

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

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

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"

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

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

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 -->',