Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Card instead of Panel for the block editor #22827

Merged
merged 6 commits into from
Jun 4, 2020
Merged

Use Card instead of Panel for the block editor #22827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b600e8
Use Card instead of Panel for BlockEditorPanel
adamziel Jun 2, 2020
c1230af
Rename BlockEditorPanel to BlockEditorArea
adamziel Jun 2, 2020
e8f5e44
Move the save and delete buttons to the header
adamziel Jun 3, 2020
5268af2
Move the delete button to the footer
adamziel Jun 3, 2020
6dbde96
Tidy up class names
adamziel Jun 3, 2020
e5a625e
Remove the second save button (from the footer)
adamziel Jun 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions ...ponents/menu-editor/block-editor-panel.js → ...mponents/menu-editor/block-editor-area.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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,
Expand Down Expand Up @@ -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',
Expand All @@ -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>
);
}
6 changes: 3 additions & 3 deletions packages/edit-navigation/src/components/menu-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( {
Expand Down Expand Up @@ -60,8 +60,8 @@ export default function MenuEditor( {
blocks={ blocks }
initialOpen={ isLargeViewport }
/>
<BlockEditorPanel
saveBlocks={ saveMenuItems }
<BlockEditorArea
saveBlocks={ eventuallySaveMenuItems }
menuId={ menuId }
onDeleteMenu={ onDeleteMenu }
/>
Expand Down
18 changes: 12 additions & 6 deletions packages/edit-navigation/src/components/menu-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Copy link
Contributor

@youknowriad youknowriad Jun 4, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should these be bundled in the Card component or not? Genuinely asking, I don't have the answer but if I understand properly when we find ourselves doing this kind of override (which we do often), maybe we're missing something in the abstraction. cc @ItsJonQ

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the heads up @youknowriad !

We recently merged in an update that added a new layout-based component, <Flex />, that handles this very use-case!

https://github.com/WordPress/gutenberg/tree/master/packages/components/src/flex

I can update the <Card /> sub-components to use <Flex />, which should save us from having to write CSS like this in future use


.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 {
Expand Down