From cae4b870bafa9a1cc584da726cab16d63a50bba9 Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Tue, 10 Jul 2018 15:51:17 +0100
Subject: [PATCH] Block warning: add option for hidden actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Note this just adds the capability for additional actions, but doesn’t actually include any
---
 .../block-list/block-invalid-warning.js       |  2 +-
 editor/components/warning/index.js            | 36 +++++++++++++++++--
 editor/components/warning/test/index.js       | 13 +++++--
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/editor/components/block-list/block-invalid-warning.js b/editor/components/block-list/block-invalid-warning.js
index 1eabc75f3cea5f..bb75466be50e95 100644
--- a/editor/components/block-list/block-invalid-warning.js
+++ b/editor/components/block-list/block-invalid-warning.js
@@ -20,7 +20,7 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
 
 	return (
 		<Warning
-			actions={ [
+			primaryActions={ [
 				<Button key="convert" onClick={ convertToBlocks } isLarge isPrimary={ ! hasHTMLBlock }>
 					{ __( 'Convert to Blocks' ) }
 				</Button>,
diff --git a/editor/components/warning/index.js b/editor/components/warning/index.js
index 6c7bc9e58f3d39..f12e76121a450e 100644
--- a/editor/components/warning/index.js
+++ b/editor/components/warning/index.js
@@ -2,21 +2,23 @@
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
+import { Dropdown, IconButton, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-function Warning( { actions, children } ) {
+function Warning( { primaryActions, children, hiddenActions } ) {
 	return (
 		<div 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>
@@ -24,6 +26,34 @@ function Warning( { actions, children } ) {
 					</div>
 				) }
 			</div>
+
+			{ hiddenActions && (
+				<div className="editor-warning__hidden">
+					<Dropdown
+						className="edit-post-more-menu"
+						position="bottom left"
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<IconButton
+								icon="ellipsis"
+								label={ __( 'More options' ) }
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+							/>
+						) }
+						renderContent={ () => (
+							<div className="edit-post-more-menu__content">
+								<MenuGroup label={ __( 'More options' ) }>
+									{ hiddenActions.map( ( item, pos ) =>
+										<MenuItem onClick={ item.onClick } key={ pos }>
+											{ item.title }
+										</MenuItem>
+									) }
+								</MenuGroup>
+							</div>
+						) }
+					/>
+				</div>
+			) }
 		</div>
 	);
 }
diff --git a/editor/components/warning/test/index.js b/editor/components/warning/test/index.js
index 805b649a018b45..3a5eb0b6f90c5e 100644
--- a/editor/components/warning/test/index.js
+++ b/editor/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 hiddenActions={ [ { title: 'test', onClick: null } ] }>Message</Warning> );
+
+		const actions = wrapper.find( '.editor-warning__hidden' );
+
+		expect( actions ).toHaveLength( 1 );
+	} );
 } );