diff --git a/blocks/api/raw-handling/test/integration/one-image-out.html b/blocks/api/raw-handling/test/integration/one-image-out.html
index a346512ebb253d..c0ba9c111dd938 100644
--- 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 @@
-
-
+
+
diff --git a/blocks/api/raw-handling/test/integration/two-images-out.html b/blocks/api/raw-handling/test/integration/two-images-out.html
index 8d0d93c44843fd..f0bc8d22576717 100644
--- 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 @@
-
-
+
+
-
-
+
+
diff --git a/blocks/api/raw-handling/utils.js b/blocks/api/raw-handling/utils.js
index 046b77ddd4268a..d41064cc70e0c9 100644
--- 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
index 816ee8a6367abe..57c50af4af4539 100644
--- 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 );
},
},