Block warning: use new warning block

Some dummy hidden actions are supplied while WIP
WordPress · Jul 9, 2018 · 7217002 · 7217002
1 parent b24dc91
commit 7217002
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 45 deletions.
diff --git a/...nents/block-list/invalid-block-warning.js → ...nents/block-list/block-invalid-warning.js b/...nents/block-list/invalid-block-warning.js → ...nents/block-list/block-invalid-warning.js
@@ -15,21 +15,25 @@ import { withDispatch } from '@wordpress/data';
  */
 import Warning from '../warning';
 
-function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
+function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
 	const hasHTMLBlock = !! getBlockType( 'core/html' );
 
 	return (
 		<Warning
-			actions={ [
+			primaryActions={ [
 				<Button key="convert" onClick={ convertToBlocks } isLarge isPrimary={ ! hasHTMLBlock }>
 					{ __( 'Convert to Blocks' ) }
 				</Button>,
 				hasHTMLBlock && (
 					<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
-						{ __( 'Edit as HTML' ) }
+						{ __( 'Keep as HTML' ) }
 					</Button>
 				),
 			] }
+			hiddenActions={ [
+				{ onClick: convertToBlocks, title: __( 'Convert to Blocks' ) },
+				{ onClick: convertToHTML, title: __( 'Keep as HTML' ) },
+			] }
 		>
 			{ __( 'This block appears to have been modified externally.' ) }
 		</Warning>
@@ -51,4 +55,4 @@ export default withDispatch( ( dispatch, { block } ) => {
 			} ) );
 		},
 	};
-} )( InvalidBlockWarning );
+} )( BlockInvalidWarning );
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -36,7 +36,7 @@ import BlockEdit from '../block-edit';
 import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
-import InvalidBlockWarning from './invalid-block-warning';
+import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
@@ -546,7 +546,7 @@ export class BlockListBlock extends Component {
 							<div key="invalid-preview">
 								{ getSaveElement( blockType, block.attributes ) }
 							</div>,
-							<InvalidBlockWarning
+							<BlockInvalidWarning
 								key="invalid-warning"
 								block={ block }
 							/>,

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -289,15 +289,22 @@
 		}
 	}
 
+	&.has-warning .editor-block-list__block-edit > div {
+		border: 1px solid $light-gray-500;
+	}
+
+	&.has-warning .editor-block-list__block-edit > div:first-child {
+		padding: 10px;
+	}
+
 	&.has-warning .editor-block-list__block-edit:after {
 		content: '';
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		background-color: rgba( $white, 0.6 );
-		background-image: linear-gradient( to bottom, transparent, $white );
+		background-image: linear-gradient( rgba( $light-gray-500, 0.6 ), rgba( $light-gray-500, 0.6 ) );
 	}
 
 	// Appender

diff --git a/editor/components/warning/index.js b/editor/components/warning/index.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
-import { Dropdown, IconButton, NavigableMenu, Button } from '@wordpress/components';
+import { Dropdown, IconButton, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -35,39 +30,26 @@ function Warning( { primaryActions, children, hiddenActions } ) {
 			{ hiddenActions && (
 				<div className="editor-warning__hidden">
 					<Dropdown
+						className="edit-post-more-menu"
 						position="bottom left"
-						renderToggle={ ( { onToggle, isOpen } ) => {
-							const toggleClassname = classnames( 'editor-block-settings-menu__toggle', 'is-visible', {
-								'is-opened': isOpen,
-							} );
-							const label = isOpen ? __( 'Hide Options' ) : __( 'More Options' );
-
-							return (
-								<IconButton
-									className={ toggleClassname }
-									icon="ellipsis"
-									label={ label }
-									onClick={ onToggle }
-									aria-expanded={ isOpen }
-								/>
-							);
-						} }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<IconButton
+								icon="ellipsis"
+								label={ __( 'More options' ) }
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+							/>
+						) }
 						renderContent={ () => (
-							<NavigableMenu
-								className="components-dropdown-menu__menu editor-warning__hidden-menu"
-								role="menu"
-							>
-								<p className="editor-warning__hidden-label">{ __( 'More options' ) }</p>
-								{ hiddenActions.map( ( item, pos ) =>
-									<Button
-										role="menuitem"
-										className="components-dropdown-menu__menu-item"
-										onClick={ item.onClick }
-										key={ pos }>
-										{ item.title }
-									</Button>
-								) }
-							</NavigableMenu>
+							<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>