Use Card instead of Panel for the block editor (#22827)

* Use Card instead of Panel for BlockEditorPanel * Rename BlockEditorPanel to BlockEditorArea * Move the save and delete buttons to the header * Move the delete button to the footer * Tidy up class names * Remove the second save button (from the footer)
WordPress · Jun 4, 2020 · fc28252 · fc28252
1 parent 2320c04
commit fc28252
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git a/...ponents/menu-editor/block-editor-panel.js → ...mponents/menu-editor/block-editor-area.js b/...ponents/menu-editor/block-editor-panel.js → ...mponents/menu-editor/block-editor-area.js
@@ -14,7 +14,14 @@ import {
 	WritingFlow,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardHeader,
+	CardBody,
+	CardFooter,
+	Popover,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -23,7 +30,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DeleteMenuButton from '../delete-menu-button';
 
-export default function BlockEditorPanel( {
+export default function BlockEditorArea( {
 	onDeleteMenu,
 	menuId,
 	saveBlocks,
@@ -59,13 +66,17 @@ export default function BlockEditorPanel( {
 	}, [ rootBlockId ] );
 
 	return (
-		<Panel className="edit-navigation-menu-editor__block-editor-panel">
-			<PanelBody title={ __( 'Navigation menu' ) }>
-				<div className="components-panel__header-actions">
-					<Button isPrimary onClick={ saveBlocks }>
-						{ __( 'Save navigation' ) }
-					</Button>
+		<Card className="edit-navigation-menu-editor__block-editor-area">
+			<CardHeader>
+				<div className="edit-navigation-menu-editor__block-editor-area-header-text">
+					{ __( 'Navigation menu' ) }
 				</div>
+
+				<Button isPrimary onClick={ saveBlocks }>
+					{ __( 'Save navigation' ) }
+				</Button>
+			</CardHeader>
+			<CardBody>
 				<NavigableToolbar
 					className={ classnames(
 						'edit-navigation-menu-editor__block-editor-toolbar',
@@ -83,13 +94,10 @@ export default function BlockEditorPanel( {
 						<BlockList />
 					</ObserveTyping>
 				</WritingFlow>
-				<div className="components-panel__footer-actions">
-					<DeleteMenuButton
-						menuId={ menuId }
-						onDelete={ onDeleteMenu }
-					/>
-				</div>
-			</PanelBody>
-		</Panel>
+			</CardBody>
+			<CardFooter>
+				<DeleteMenuButton menuId={ menuId } onDelete={ onDeleteMenu } />
+			</CardFooter>
+		</Card>
 	);
 }
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
 import useMenuItems from './use-menu-items';
 import useNavigationBlocks from './use-navigation-blocks';
 import MenuEditorShortcuts from './shortcuts';
-import BlockEditorPanel from './block-editor-panel';
+import BlockEditorArea from './block-editor-area';
 import NavigationStructureArea from './navigation-structure-area';
 
 export default function MenuEditor( {
@@ -60,8 +60,8 @@ export default function MenuEditor( {
 					blocks={ blocks }
 					initialOpen={ isLargeViewport }
 				/>
-				<BlockEditorPanel
-					saveBlocks={ saveMenuItems }
+				<BlockEditorArea
+					saveBlocks={ eventuallySaveMenuItems }
 					menuId={ menuId }
 					onDeleteMenu={ onDeleteMenu }
 				/>

diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -62,24 +62,30 @@
 	font-weight: bold;
 }
 
-.edit-navigation-menu-editor__block-editor-panel {
+.edit-navigation-menu-editor__block-editor-area {
 	@include break-medium {
 		// IE11 requires the column to be explicitly declared.
 		// Only shift this into the second column on desktop.
 		grid-column: 2;
 	}
 
-	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
-	-ms-grid-row-align: start;
+	.components-card__footer,
+	.components-card__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.edit-navigation-menu-editor__block-editor-area-header-text {
+		flex-grow: 1;
+		font-weight: bold;
+	}
 }
 
 .components-panel__header-actions {
-	margin-top: $grid-unit-20;
-	padding-bottom: $grid-unit-20;
 	margin-bottom: $grid-unit-60;
 	width: 100%;
 	text-align: right;
-	border-bottom: 1px solid $light-gray-300;
 }
 
 .components-panel__footer-actions {