diff --git a/packages/editor/src/components/block-list/block-invalid-warning.js b/packages/editor/src/components/block-list/block-invalid-warning.js index 58583dc3175ac2..b0341bd5a6214d 100644 --- a/packages/editor/src/components/block-list/block-invalid-warning.js +++ b/packages/editor/src/components/block-list/block-invalid-warning.js @@ -15,12 +15,12 @@ import { withDispatch } from '@wordpress/data'; */ import Warning from '../warning'; -function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { +function BlockInvalidWarning( { convertToHTML, convertToBlocks, convertToClassic } ) { const hasHTMLBlock = !! getBlockType( 'core/html' ); return ( { __( 'Convert to Blocks' ) } , @@ -30,6 +30,10 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { ), ] } + secondaryActions={ [ + { title: __( 'Convert to Blocks' ), onClick: convertToBlocks }, + { title: __( 'Convert to Classic Block' ), onClick: convertToClassic }, + ] } > { __( 'This block has been modified externally.' ) } @@ -39,6 +43,11 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { export default withDispatch( ( dispatch, { block } ) => { const { replaceBlock } = dispatch( 'core/editor' ); return { + convertToClassic() { + replaceBlock( block.uid, createBlock( 'core/freeform', { + content: block.originalContent, + } ) ); + }, convertToHTML() { replaceBlock( block.clientId, createBlock( 'core/html', { content: block.originalContent, diff --git a/packages/editor/src/components/warning/index.js b/packages/editor/src/components/warning/index.js index 9914401c20f24b..ac68bf0f57c6c1 100644 --- a/packages/editor/src/components/warning/index.js +++ b/packages/editor/src/components/warning/index.js @@ -7,16 +7,18 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Children } from '@wordpress/element'; +import { Dropdown, IconButton, MenuGroup, MenuItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; -function Warning( { className, actions, children } ) { +function Warning( { className, primaryActions, children, secondaryActions } ) { return (

{ children }

- { Children.count( actions ) > 0 && ( + { Children.count( primaryActions ) > 0 && (
- { Children.map( actions, ( action, i ) => ( + { Children.map( primaryActions, ( action, i ) => ( { action } @@ -24,6 +26,30 @@ function Warning( { className, actions, children } ) {
) }
+ + { secondaryActions && ( + ( + + ) } + renderContent={ () => ( + + { secondaryActions.map( ( item, pos ) => + + { item.title } + + ) } + + ) } + /> + ) }
); } diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss index a9553dd17fe5f9..3fa9fa93be3093 100644 --- a/packages/editor/src/components/warning/style.scss +++ b/packages/editor/src/components/warning/style.scss @@ -32,3 +32,25 @@ margin-left: 0; } } + +.editor-warning__secondary { + margin: 3px 0 0 -4px; + + // the padding and margin of the more menu is intentionally non-standard + .components-icon-button { + width: auto; + padding: 8px 2px; + } + + @include break-small() { + margin-left: 4px; + + .components-icon-button { + padding: 8px 4px; + } + } + + .components-button svg { + transform: rotate(90deg); + } +} diff --git a/packages/editor/src/components/warning/test/index.js b/packages/editor/src/components/warning/test/index.js index 805b649a018b45..9ef516e80dd60b 100644 --- a/packages/editor/src/components/warning/test/index.js +++ b/packages/editor/src/components/warning/test/index.js @@ -15,15 +15,16 @@ describe( 'Warning', () => { expect( wrapper ).toMatchSnapshot(); } ); - it( 'should has valid class', () => { + it( 'should have valid class', () => { const wrapper = shallow( ); expect( wrapper.hasClass( 'editor-warning' ) ).toBe( true ); expect( wrapper.find( '.editor-warning__actions' ) ).toHaveLength( 0 ); + expect( wrapper.find( '.editor-warning__hidden' ) ).toHaveLength( 0 ); } ); it( 'should show child error message element', () => { - const wrapper = shallow( }>Message ); + const wrapper = shallow( }>Message ); const actions = wrapper.find( '.editor-warning__actions' ); const action = actions.childAt( 0 ); @@ -32,4 +33,12 @@ describe( 'Warning', () => { expect( action.hasClass( 'editor-warning__action' ) ).toBe( true ); expect( action.childAt( 0 ).type() ).toBe( 'button' ); } ); + + it( 'should show hidden actions', () => { + const wrapper = shallow( Message ); + + const actions = wrapper.find( '.editor-warning__secondary' ); + + expect( actions ).toHaveLength( 1 ); + } ); } );