Block warning: add option for hidden actions

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
WordPress · Jul 10, 2018 · cae4b87 · cae4b87
1 parent cf485f8
commit cae4b87
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git 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
@@ -2,28 +2,58 @@
  * 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>
 						) ) }
 					</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
@@ -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 );
+	} );
 } );