Merge pull request #471 from WordPress/fix/lowercase-tag

Render heading and list tag as lowercase nodeName
WordPress · Apr 21, 2017 · cea106f · cea106f
2 parents d068400 + 5897f03
commit cea106f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -15,28 +15,28 @@ registerBlock( 'core/heading', {
 
 	attributes: {
 		content: html( 'h1,h2,h3,h4,h5,h6' ),
-		tag: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),
+		nodeName: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),
 		align: prop( 'h1,h2,h3,h4,h5,h6', 'style.textAlign' )
 	},
 
 	controls: [
 		...'123456'.split( '' ).map( ( level ) => ( {
 			icon: 'heading',
 			title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
-			isActive: ( { tag } ) => 'H' + level === tag,
+			isActive: ( { nodeName } ) => 'H' + level === nodeName,
 			onClick( attributes, setAttributes ) {
-				setAttributes( { tag: 'H' + level } );
+				setAttributes( { nodeName: 'H' + level } );
 			},
 			level
 		} ) )
 	],
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { content, tag, align } = attributes;
+		const { content, nodeName = 'H2', align } = attributes;
 
 		return (
 			<Editable
-				tagName={ tag }
+				tagName={ nodeName.toLowerCase() }
 				value={ content }
 				focus={ focus }
 				onFocus={ setFocus }
@@ -47,7 +47,8 @@ registerBlock( 'core/heading', {
 	},
 
 	save( { attributes } ) {
-		const { align, tag: Tag, content } = attributes;
+		const { align, nodeName = 'H2', content } = attributes;
+		const Tag = nodeName.toLowerCase();
 
 		return (
 			<Tag
@@ -68,7 +69,7 @@ registerBlock( 'core/heading', {
 						content = content[ 0 ];
 					}
 					return {
-						tag: 'H2',
+						nodeName: 'H2',
 						content,
 						align
 					};

diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js
@@ -13,7 +13,7 @@ registerBlock( 'core/list', {
 	category: 'common',
 
 	attributes: {
-		listType: prop( 'ol,ul', 'nodeName' ),
+		nodeName: prop( 'ol,ul', 'nodeName' ),
 		items: query( 'li', {
 			value: html()
 		} )
@@ -55,14 +55,14 @@ registerBlock( 'core/list', {
 	],
 
 	edit( { attributes, focus, setFocus } ) {
-		const { listType = 'ol', items = [], align } = attributes;
+		const { nodeName = 'OL', items = [], align } = attributes;
 		const content = items.map( item => {
 			return `<li>${ item.value }</li>`;
 		} ).join( '' );
 
 		return (
 			<Editable
-				tagName={ listType }
+				tagName={ nodeName.toLowerCase() }
 				style={ align ? { textAlign: align } : null }
 				value={ content }
 				focus={ focus }
@@ -72,10 +72,10 @@ registerBlock( 'core/list', {
 	},
 
 	save( { attributes } ) {
-		const { listType = 'ol', items = [] } = attributes;
+		const { nodeName = 'OL', items = [] } = attributes;
 		const children = items.map( ( item, index ) => (
 			<li key={ index } dangerouslySetInnerHTML={ { __html: item.value } } />
 		) );
-		return wp.element.createElement( listType.toLowerCase(), null, children );
+		return wp.element.createElement( nodeName.toLowerCase(), null, children );
 	}
 } );