Block warning: add ellipsis menu and convert to classic block (#7741)

* Block warning: add option for hidden actions

Adds an ellipsis dropdown menu so additional actions can be added outside of the primary buttons

Makes use of the new ellipsis menu to present the same convert to blocks option along with a 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 );
+	} );
 } );