Raw handling: preserve image ID (#6638)

* Raw handling: preserve image ID * Address feedback
WordPress · May 11, 2018 · 0ab0deb · 0ab0deb
1 parent d70ec18
commit 0ab0deb
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/blocks/api/raw-handling/test/integration/one-image-out.html b/blocks/api/raw-handling/test/integration/one-image-out.html
@@ -1,3 +1,3 @@
-<!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
+<!-- wp:image {"id":5114} -->
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/test/integration/two-images-out.html b/blocks/api/raw-handling/test/integration/two-images-out.html
@@ -1,7 +1,7 @@
-<!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
+<!-- wp:image {"id":5114} -->
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114" /></figure>
 <!-- /wp:image -->
 
-<!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" /></figure>
+<!-- wp:image {"id":5109} -->
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" class="wp-image-5109" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/utils.js b/blocks/api/raw-handling/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { omit, mergeWith, includes } from 'lodash';
+import { omit, mergeWith, includes, noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -204,13 +204,23 @@ function cleanNodeList( nodeList, doc, schema, inline ) {
 
 					// Strip invalid classes.
 					if ( node.classList.length ) {
-						const newClasses = classes.filter( ( name ) =>
-							node.classList.contains( name )
-						);
-
-						if ( newClasses.length ) {
-							node.setAttribute( 'class', newClasses.join( ' ' ) );
-						} else {
+						const mattchers = classes.map( ( item ) => {
+							if ( typeof item === 'string' ) {
+								return ( className ) => className === item;
+							} else if ( item instanceof RegExp ) {
+								return ( className ) => item.test( className );
+							}
+
+							return noop;
+						} );
+
+						Array.from( node.classList ).forEach( ( name ) => {
+							if ( ! mattchers.some( ( isMatch ) => isMatch( name ) ) ) {
+								node.classList.remove( name );
+							}
+						} );
+
+						if ( ! node.classList.length ) {
 							node.removeAttribute( 'class' );
 						}
 					}

diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
@@ -60,7 +60,7 @@ const blockAttributes = {
 const imageSchema = {
 	img: {
 		attributes: [ 'src', 'alt' ],
-		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone' ],
+		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
 	},
 };
 
@@ -100,10 +100,15 @@ export const settings = {
 				isMatch: ( node ) => node.nodeName === 'FIGURE' && !! node.querySelector( 'img' ),
 				schema,
 				transform: ( node ) => {
-					const matches = /align(left|center|right)/.exec( node.className );
-					const align = matches ? matches[ 1 ] : undefined;
+					// Search both figure and image classes. Alignment could be
+					// set on either. ID is set on the image.
+					const className = node.className + ' ' + node.querySelector( 'img' ).className;
+					const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec( className );
+					const align = alignMatches ? alignMatches[ 1 ] : undefined;
+					const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec( className );
+					const id = idMatches ? idMatches[ 1 ] : undefined;
 					const blockType = getBlockType( 'core/image' );
-					const attributes = getBlockAttributes( blockType, node.outerHTML, { align } );
+					const attributes = getBlockAttributes( blockType, node.outerHTML, { align, id } );
 					return createBlock( 'core/image', attributes );
 				},
 			},