Block warning: add ellipsis menu and convert to classic block

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 (
 		<Warning
-			actions={ [
+			primaryActions={ [
 				<Button key="convert" onClick={ convertToBlocks } isLarge isPrimary={ ! hasHTMLBlock }>
 					{ __( 'Convert to Blocks' ) }
 				</Button>,
@@ -30,6 +30,10 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
 					</Button>
 				),
 			] }
+			secondaryActions={ [
+				{ title: __( 'Convert to Blocks' ), onClick: convertToBlocks },
+				{ title: __( 'Convert to Classic Block' ), onClick: convertToClassic },
+			] }
 		>
 			{ __( 'This block has been modified externally.' ) }
 		</Warning>
@@ -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,

packages/editor/src/components/warning/index.js

@@ -7,23 +7,49 @@ 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 (
 		<div className={ classnames( className, 'editor-warning' ) }>
 			<div className="editor-warning__contents">
 				<p className="editor-warning__message">{ children }</p>
 
-				{ Children.count( actions ) > 0 && (
+				{ Children.count( primaryActions ) > 0 && (
 					<div className="editor-warning__actions">
-						{ Children.map( actions, ( action, i ) => (
+						{ Children.map( primaryActions, ( action, i ) => (
 							<span key={ i } className="editor-warning__action">
 								{ action }
 							</span>
 						) ) }
 					</div>
 				) }
 			</div>
+
+			{ secondaryActions && (
+				<Dropdown
+					className="editor-warning__secondary"
+					position="bottom left"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<IconButton
+							icon="ellipsis"
+							label={ __( 'More options' ) }
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+						/>
+					) }
+					renderContent={ () => (
+						<MenuGroup label={ __( 'More options' ) }>
+							{ secondaryActions.map( ( item, pos ) =>
+								<MenuItem onClick={ item.onClick } key={ pos }>
+									{ item.title }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
+				/>
+			) }
 		</div>
 	);
 }

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

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( <Warning /> );
 
 		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( <Warning actions={ <button /> }>Message</Warning> );
+		const wrapper = shallow( <Warning primaryActions={ <button /> }>Message</Warning> );
 
 		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( <Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>Message</Warning> );
+
+		const actions = wrapper.find( '.editor-warning__secondary' );
+
+		expect( actions ).toHaveLength( 1 );
+	} );
 } );