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 ); }, },