diff --git a/editor/modes/visual-editor/invalid-block-warning.js b/editor/modes/visual-editor/invalid-block-warning.js index 66622027ce46e..26d580b07dabc 100644 --- a/editor/modes/visual-editor/invalid-block-warning.js +++ b/editor/modes/visual-editor/invalid-block-warning.js @@ -24,17 +24,20 @@ import { */ import { replaceBlock } from '../../actions'; -function InvalidBlockWarning( { ignoreInvalid, switchToDefaultType } ) { +function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) { + const htmlBlockName = 'core/html'; const defaultBlockType = getBlockType( getUnknownTypeHandlerName() ); + const htmlBlockType = getBlockType( htmlBlockName ); + const switchTo = ( blockType ) => () => switchToBlockType( blockType ); return ( -

{ sprintf( __( +

{ defaultBlockType && htmlBlockType && sprintf( __( 'This block appears to have been modified externally. ' + - 'Overwrite the external changes or Convert to %s to keep ' + + 'Overwrite the external changes or Convert to %s or %s to keep ' + 'your changes.' - ), defaultBlockType.title ) }

-

+ ), defaultBlockType.title, htmlBlockType.title ) }

+

) } + + { htmlBlockType && ( + + ) }

); @@ -67,11 +81,10 @@ export default connect( const nextBlock = createBlock( name, attributes ); dispatch( replaceBlock( block.uid, nextBlock ) ); }, - switchToDefaultType() { - const defaultBlockName = getUnknownTypeHandlerName(); + switchToBlockType( blockType ) { const { block } = ownProps; - if ( defaultBlockName && block ) { - const nextBlock = createBlock( defaultBlockName, { + if ( blockType && block ) { + const nextBlock = createBlock( blockType.name, { content: block.originalContent, } ); diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index c403a0e1d5e31..1a92939bad5e0 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -533,3 +533,7 @@ $sticky-bottom-offset: 20px; margin-left: $item-spacing; } } + +.visual-editor__invalid-block-warning-buttons .components-button { + margin-bottom: 5px; +}