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 ) =>
+
+ ) }
+
+ ) }
+ />
+ ) }
);
}
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 );
+ } );
} );