Keep and handle image alignment classes for raw transforms

blocks/api/factory.js

@@ -21,15 +21,17 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getBlockType } from './registration';
+import { getBlockAttributes } from './parser';
 
 /**
  * Returns a block object given its type and attributes.
  *
- * @param  {String} name             Block name
- * @param  {Object} blockAttributes  Block attributes
- * @return {Object}                  Block object
+ * @param  {String}  name             Block name
+ * @param  {Object}  blockAttributes  Block attributes
+ * @param  {?String} innerHTML        Block HTML
+ * @return {Object}                   Block object
  */
-export function createBlock( name, blockAttributes = {} ) {
+export function createBlock( name, blockAttributes = {}, innerHTML ) {
 	// Get the type definition associated with a registered block.
 	const blockType = getBlockType( name );
 
@@ -52,7 +54,7 @@ export function createBlock( name, blockAttributes = {} ) {
 		uid: uuid(),
 		name,
 		isValid: true,
-		attributes,
+		attributes: innerHTML ? getBlockAttributes( blockType, innerHTML, attributes ) : attributes,
 	};
 }
 

blocks/api/raw-handling/strip-attributes.js

@@ -6,7 +6,7 @@ const { ELEMENT_NODE } = window.Node;
 /**
  * Internal dependencies
  */
-import { isAttributeWhitelisted } from './utils';
+import { isAttributeWhitelisted, isClassWhitelisted } from './utils';
 
 export default function( node ) {
 	if ( node.nodeType !== ELEMENT_NODE ) {
@@ -20,10 +20,26 @@ export default function( node ) {
 	const tag = node.nodeName.toLowerCase();
 
 	Array.from( node.attributes ).forEach( ( { name } ) => {
-		if ( isAttributeWhitelisted( tag, name ) ) {
+		if ( name === 'class' || isAttributeWhitelisted( tag, name ) ) {
 			return;
 		}
 
 		node.removeAttribute( name );
 	} );
+
+	const oldClasses = node.getAttribute( 'class' );
+
+	if ( ! oldClasses ) {
+		return;
+	}
+
+	const newClasses = oldClasses.split( ' ' ).filter( ( name ) => {
+		return name && isClassWhitelisted( tag, name );
+	} );
+
+	if ( newClasses.length ) {
+		node.setAttribute( 'class', newClasses.join( ' ' ) );
+	} else {
+		node.removeAttribute( 'class' );
+	}
 }

blocks/api/raw-handling/test/strip-attributes.js

@@ -29,4 +29,8 @@ describe( 'stripAttributes', () => {
 	it( 'should keep some attributes', () => {
 		equal( deepFilterHTML( '<a href="#keep">test</a>', [ stripAttributes ] ), '<a href="#keep">test</a>' );
 	} );
+
+	it( 'should keep some classes', () => {
+		equal( deepFilterHTML( '<img class="alignright test" src="">', [ stripAttributes ] ), '<img class="alignright" src="">' );
+	} );
 } );

blocks/api/raw-handling/utils.js

@@ -34,7 +34,7 @@ const inlineWrapperWhiteList = {
 const whitelist = {
 	...inlineWhitelist,
 	...inlineWrapperWhiteList,
-	img: { attributes: [ 'src', 'alt' ] },
+	img: { attributes: [ 'src', 'alt' ], classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone' ] },
 	figure: {},
 	blockquote: {},
 	hr: {},
@@ -63,6 +63,14 @@ export function isAttributeWhitelisted( tag, attribute ) {
 	);
 }
 
+export function isClassWhitelisted( tag, name ) {
+	return (
+		whitelist[ tag ] &&
+		whitelist[ tag ].classes &&
+		whitelist[ tag ].classes.indexOf( name ) !== -1
+	);
+}
+
 export function isInline( node ) {
 	return !! inlineWhitelist[ node.nodeName.toLowerCase() ];
 }

blocks/library/image/index.js

@@ -70,6 +70,14 @@ registerBlockType( 'core/image', {
 
 					return tag === 'img' || ( hasImage && ! hasText ) || ( hasImage && tag === 'figure' );
 				},
+				transform: ( node ) => {
+					const targetNode = node.parentNode.querySelector( 'figure,img' );
+					const matches = /align(left|center|right)/.exec( targetNode.className );
+
+					return createBlock( 'core/image', {
+						align: matches ? matches[ 1 ] : undefined,
+					}, targetNode.outerHTML );
+				},
 			},
 			{
 				type: 'files',