Blocks: Update blocks to avoid use of property source

WordPress · Jun 25, 2018 · 6694c5e · 6694c5e
1 parent f143608
commit 6694c5e
Show file tree

Hide file tree

Showing 18 changed files with 224 additions and 134 deletions.
diff --git a/core-blocks/code/index.js b/core-blocks/code/index.js
@@ -23,9 +23,8 @@ export const settings = {
 	attributes: {
 		content: {
 			type: 'string',
-			source: 'property',
+			source: 'text',
 			selector: 'code',
-			property: 'textContent',
 		},
 	},
 

diff --git a/core-blocks/heading/edit.js b/core-blocks/heading/edit.js
@@ -1,7 +1,11 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
+import { range } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
 import { __, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { PanelBody, Toolbar } from '@wordpress/components';
@@ -21,35 +25,29 @@ export default function HeadingEdit( {
 	onReplace,
 	className,
 } ) {
-	const { align, content, nodeName, placeholder } = attributes;
+	const { align, content, level, placeholder } = attributes;
+	const tagName = 'h' + level;
+
+	function createLevelControl( targetLevel ) {
+		return {
+			icon: 'heading',
+			// translators: %s: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive: targetLevel === level,
+			onClick: () => setAttributes( { level: targetLevel } ),
+			subscript: String( targetLevel ),
+		};
+	}
 
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar
-					controls={ '234'.split( '' ).map( ( level ) => ( {
-						icon: 'heading',
-						// translators: %s: heading level e.g: "1", "2", "3"
-						title: sprintf( __( 'Heading %s' ), level ),
-						isActive: 'H' + level === nodeName,
-						onClick: () => setAttributes( { nodeName: 'H' + level } ),
-						subscript: level,
-					} ) ) }
-				/>
+				<Toolbar controls={ range( 2, 5 ).map( createLevelControl ) } />
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Heading Settings' ) }>
 					<p>{ __( 'Level' ) }</p>
-					<Toolbar
-						controls={ '123456'.split( '' ).map( ( level ) => ( {
-							icon: 'heading',
-							// translators: %s: heading level e.g: "1", "2", "3"
-							title: sprintf( __( 'Heading %s' ), level ),
-							isActive: 'H' + level === nodeName,
-							onClick: () => setAttributes( { nodeName: 'H' + level } ),
-							subscript: level,
-						} ) ) }
-					/>
+					<Toolbar controls={ range( 1, 7 ).map( createLevelControl ) } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
 						value={ align }
@@ -61,7 +59,7 @@ export default function HeadingEdit( {
 			</InspectorControls>
 			<RichText
 				wrapperClassName="wp-block-heading"
-				tagName={ nodeName.toLowerCase() }
+				tagName={ tagName }
 				value={ content }
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }

diff --git a/core-blocks/heading/index.js b/core-blocks/heading/index.js
@@ -1,16 +1,60 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { concatChildren } from '@wordpress/element';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import {
+	createBlock,
+	getPhrasingContentSchema,
+	getBlockAttributes,
+	getBlockType,
+} from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 
+/**
+ * Given a node name string for a heading node, returns its numeric level.
+ *
+ * @param {string} nodeName Heading node name.
+ *
+ * @return {number} Heading level.
+ */
+export function getLevelFromHeadingNodeName( nodeName ) {
+	return Number( nodeName.substr( 1 ) );
+}
+
+const supports = {
+	className: false,
+	anchor: true,
+};
+
+const schema = {
+	content: {
+		type: 'array',
+		source: 'children',
+		selector: 'h1,h2,h3,h4,h5,h6',
+	},
+	level: {
+		type: 'number',
+		default: 2,
+	},
+	align: {
+		type: 'string',
+	},
+	placeholder: {
+		type: 'string',
+	},
+};
+
 export const name = 'core/heading';
 
 export const settings = {
@@ -24,31 +68,9 @@ export const settings = {
 
 	keywords: [ __( 'title' ), __( 'subtitle' ) ],
 
-	supports: {
-		className: false,
-		anchor: true,
-	},
+	supports,
 
-	attributes: {
-		content: {
-			type: 'array',
-			source: 'children',
-			selector: 'h1,h2,h3,h4,h5,h6',
-		},
-		nodeName: {
-			type: 'string',
-			source: 'property',
-			selector: 'h1,h2,h3,h4,h5,h6',
-			property: 'nodeName',
-			default: 'H2',
-		},
-		align: {
-			type: 'string',
-		},
-		placeholder: {
-			type: 'string',
-		},
-	},
+	attributes: schema,
 
 	transforms: {
 		from: [
@@ -72,6 +94,15 @@ export const settings = {
 					h5: { children: getPhrasingContentSchema() },
 					h6: { children: getPhrasingContentSchema() },
 				},
+				transform( node ) {
+					return createBlock( 'core/heading', {
+						...getBlockAttributes(
+							getBlockType( 'core/heading' ),
+							node.outerHTML
+						),
+						level: getLevelFromHeadingNodeName( node.nodeName ),
+					} );
+				},
 			},
 			{
 				type: 'pattern',
@@ -80,7 +111,7 @@ export const settings = {
 					const level = match[ 1 ].length;
 
 					return createBlock( 'core/heading', {
-						nodeName: `H${ level }`,
+						level,
 						content,
 					} );
 				},
@@ -99,6 +130,41 @@ export const settings = {
 		],
 	},
 
+	deprecated: [
+		{
+			supports,
+			attributes: {
+				...omit( schema, [ 'level' ] ),
+				nodeName: {
+					type: 'string',
+					source: 'property',
+					selector: 'h1,h2,h3,h4,h5,h6',
+					property: 'nodeName',
+					default: 'H2',
+				},
+			},
+			migrate( { attributes } ) {
+				const { nodeName, ...migratedAttributes } = attributes;
+
+				return {
+					...migratedAttributes,
+					level: getLevelFromHeadingNodeName( nodeName ),
+				};
+			},
+			save( { attributes } ) {
+				const { align, nodeName, content } = attributes;
+
+				return (
+					<RichText.Content
+						tagName={ nodeName.toLowerCase() }
+						style={ { textAlign: align } }
+						value={ content }
+					/>
+				);
+			},
+		},
+	],
+
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: concatChildren( attributes.content, attributesToMerge.content ),
@@ -108,11 +174,12 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { align, nodeName, content } = attributes;
+		const { align, level, content } = attributes;
+		const tagName = 'h' + level;
 
 		return (
 			<RichText.Content
-				tagName={ nodeName.toLowerCase() }
+				tagName={ tagName }
 				style={ { textAlign: align } }
 				value={ content }
 			/>

diff --git a/core-blocks/heading/test/index.js b/core-blocks/heading/test/index.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { name, settings } from '../';
+import { name, settings, getLevelFromHeadingNodeName } from '../';
 import { blockEditRender } from '../../test/helpers';
 
 describe( 'core/heading', () => {
@@ -11,3 +11,11 @@ describe( 'core/heading', () => {
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );
+
+describe( 'getLevelFromHeadingNodeName()', () => {
+	it( 'should return a numeric value from nodeName', () => {
+		const level = getLevelFromHeadingNodeName( 'H4' );
+
+		expect( level ).toBe( 4 );
+	} );
+} );