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

Navigation: Implement redesign of Navigation Editor #25178

Merged
merged 34 commits into from
Sep 11, 2020
Merged

Navigation: Implement redesign of Navigation Editor #25178

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
53f11de
Navigation: Implement redesign of Navigation Editor
noisysocks Sep 9, 2020
7ba8452
Navigation: Typo: @wordpress/i18n -> @wordpress/element
noisysocks Sep 10, 2020
7efa781
Navigation: Inline call to setSelectedBlockId
noisysocks Sep 10, 2020
7f59c24
Navigation: Add selectBlock as a useEffect dependency
noisysocks Sep 10, 2020
96db71a
Navigation: Don't call setMenuLocationsByName when component is not m…
noisysocks Sep 10, 2020
3f1eaf6
Navigation: Remove unnecessary useCallback()
noisysocks Sep 10, 2020
22750a8
Navigation: Show Toolbar when there are no menus
noisysocks Sep 10, 2020
18341e8
Return stable references from useMenuLocations()
noisysocks Sep 10, 2020
5888c7a
Navigation: Fix createStubPost() setting blocks = [ undefined ]
noisysocks Sep 10, 2020
79026cf
Navigation: Use NavigableToolbar
noisysocks Sep 10, 2020
86440fa
Navigation: Split toolbar into two lines on mobile
noisysocks Sep 10, 2020
cd405b7
Changing the order of the list view and visual view so the list view …
shaunandrews Sep 10, 2020
a758ad2
Adding a title to the top of the List View.
shaunandrews Sep 10, 2020
90c2b58
Moving the add-menu-form from the toolbar into the header.
shaunandrews Sep 10, 2020
143df0b
Moving the props for the add form from the toolbar to the header.
shaunandrews Sep 10, 2020
f5cdbbb
A general refactor of the CSS, moving the add menu around, and genera…
shaunandrews Sep 10, 2020
c19c449
Navigation: Use <label> for dropdown instead of <p>
noisysocks Sep 11, 2020
93f5efa
Navigation: Remove Cancel buton from AddMenuForm
noisysocks Sep 11, 2020
62211f0
Navigation: 24px -> -unit-30
noisysocks Sep 11, 2020
6e5df7d
Navigation: Remove isAddingMenu state
noisysocks Sep 11, 2020
4a7da3f
Navigation: Simplify Add Menu Form
noisysocks Sep 11, 2020
08980a2
Navigation: Remove menu location from label for now
noisysocks Sep 11, 2020
bdc1cdc
Navigation: Center spinner in Add Menu Form
noisysocks Sep 11, 2020
1b668fb
Navigation: Improve mobile styling
noisysocks Sep 11, 2020
74d6a8b
Navigation: Minor cleanup
noisysocks Sep 11, 2020
f4e9bb9
Navigation: Use className instead of h3
noisysocks Sep 11, 2020
a094256
Navigation: Use em for font-size
noisysocks Sep 11, 2020
417ee55
Navigation: Remove Spinner from header
noisysocks Sep 11, 2020
bf6aefa
Navigation: Use $default-line-height
noisysocks Sep 11, 2020
6125e6f
Navigation: Use className for h1
noisysocks Sep 11, 2020
80215a7
Navigation: Remove unnecessary flexbox styling
noisysocks Sep 11, 2020
5d06320
Navigation: VisualView -> BlockView
noisysocks Sep 11, 2020
d02bcb8
Navigation: Use deps in useSelect()
noisysocks Sep 11, 2020
3ba5109
Navigation: Remove CSS re-ordering of block inspector, for now
noisysocks Sep 11, 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
22 changes: 9 additions & 13 deletions packages/edit-navigation/src/components/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,35 @@
.edit-navigation-editor {
margin-top: $grid-unit-20;
margin: $grid-unit-20;

@include break-medium() {
align-items: flex-start;
display: flex;
}
}

.edit-navigation-editor__list-view,
.edit-navigation-editor__visual-view {
background: $white;
border-radius: 3px;
border: $border-width solid $gray-200;
}

.edit-navigation-editor__list-view {
padding: $grid-unit-10;
padding-left: $grid-unit-20;
margin-left: $grid-unit-20;
border-left: 1px solid $gray-200;

@include break-medium() {
width: 300px;
}

h3 {
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
font-size: 15px;
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
margin: 0;
}

.components-spinner {
display: block;
margin: 100px auto;
}
}

.edit-navigation-editor__visual-view {
margin-top: $grid-unit-20;

@include break-medium() {
flex-grow: 1;
margin-left: $grid-unit-20;
margin-top: 0;
}

.components-spinner {
Expand Down
103 changes: 80 additions & 23 deletions packages/edit-navigation/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,97 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Dropdown } from '@wordpress/components';
import {
Spinner,
Button,
SelectControl,
Dropdown,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import ManageLocations from './manage-locations';
import AddMenuForm from './add-menu-form';

export default function Header( { onBeginAddingMenu } ) {
export default function Header( {
menus,
selectedMenuId,
onSelectMenu,
onCancelAddingMenu,
} ) {
return (
<div className="edit-navigation-header">
<h1>{ __( 'Navigation' ) }</h1>

<Button
className="edit-navigation-header__add-new-button"
isSecondary
onClick={ onBeginAddingMenu }
>
{ __( 'Add new' ) }
</Button>

<Dropdown
contentClassName="edit-navigation-header__manage-locations"
position="bottom center"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
isLink
aria-expanded={ isOpen }
onClick={ onToggle }
>
{ __( 'Manage locations' ) }
</Button>
<div className="edit-navigation-header__actions">
{ menus ? (
<div className="edit-navigation-header__current-menu">
<p>{ __( 'Currently editing' ) }</p>
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
<SelectControl
className="edit-navigation-toolbar__menu-select"
label={ __( 'Currently editing' ) }
hideLabelFromVision
disabled={ ! menus.length }
value={ selectedMenuId ?? 0 }
options={
menus.length
? menus.map( ( menu ) => ( {
value: menu.id,
label: menu.name + ' (Primary)', //Just a reminder to show the menu location, if set.
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
} ) )
: [
{
value: 0,
label: __(
'— Select navigation —'
),
},
]
}
onChange={ onSelectMenu }
/>
</div>
) : (
<Spinner />
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
) }
renderContent={ () => <ManageLocations /> }
/>

<Dropdown
contentClassName="edit-navigation-header__add-new-form"
position="bottom center"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
isTertiary
aria-expanded={ isOpen }
onClick={ onToggle }
>
{ __( 'Add new' ) }
</Button>
) }
renderContent={ () => (
<AddMenuForm
menus={ menus }
onCancel={ onCancelAddingMenu }
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
onCreate={ onSelectMenu }
/>
) }
/>

<Dropdown
contentClassName="edit-navigation-header__manage-locations"
position="bottom center"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
isTertiary
aria-expanded={ isOpen }
onClick={ onToggle }
>
{ __( 'Manage locations' ) }
</Button>
) }
renderContent={ () => <ManageLocations /> }
/>
</div>
</div>
);
}
64 changes: 50 additions & 14 deletions packages/edit-navigation/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,61 @@
.edit-navigation-header {
padding: $grid-unit-20;
background: #f1f1f1; // Need to find a variable for this

h1 {
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
font-size: 23px;
font-weight: 400;
line-height: 1.3;
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
margin: 0 0 $grid-unit-10;
}
}

// Lining up all the actions in a nice row.
.edit-navigation-header__actions {
align-items: center;
display: flex;
margin-top: $grid-unit-10;
}

.edit-navigation-header__add-new-button {
margin: 0 $grid-unit-20;
// Spacing out the actions a little.
.edit-navigation-header__current-menu,
.components-dropdown {
margin-right: $grid-unit-20;
}
}

.edit-navigation-header__manage-locations {
text-align: center;
// The select menu for choosing which menu to edit.
.edit-navigation-header__current-menu {
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
align-items: center;
display: flex;

.components-popover__content > div {
padding: $grid-unit-20;
// Overriding some aggressive defaults
.components-base-control .components-base-control__field {
margin: 0;
}
}

.components-base-control {
margin-bottom: $grid-unit-20;
.edit-navigation-header__save-button {
margin: 0 $grid-unit-15 0 auto;
padding-right: 24px;
padding-left: 24px;
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
}

&:last-child {
margin-bottom: 0;
}
}
.edit-navigation-header__add-menu-form {
align-items: center;
display: flex;
flex-grow: 1;
height: 100%;
}

.edit-navigation-header__add-menu-name-field {
align-items: center;
display: flex;
height: 100%;
}

.components-button.edit-navigation-header__add-menu-cancel-button {
margin-left: auto;
}

.components-button.edit-navigation-header__add-menu-create-button {
margin-left: $grid-unit-20;
}
10 changes: 6 additions & 4 deletions packages/edit-navigation/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
.edit-navigation-layout {
margin-right: 10px;
// Overriding the wp-admin background and padding
// to give the navigation editor more room to breathe.
.gutenberg_page_gutenberg-navigation {
background: $white;

@include break-medium {
margin-right: 20px;
#wpcontent {
padding-left: 0;
}
}
1 change: 1 addition & 0 deletions packages/edit-navigation/src/components/notices/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.edit-navigation-notices__snackbar-list {
position: fixed;
bottom: 20px;
margin-left: 20px;
}

.edit-navigation-notices__notice-list {
Expand Down
67 changes: 13 additions & 54 deletions packages/edit-navigation/src/components/toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { Spinner, SelectControl, Popover } from '@wordpress/components';
import { Spinner, Popover } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';

Expand All @@ -10,65 +10,24 @@ import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';
*/
import SaveButton from './save-button';
import BlockInspectorDropdown from './block-inspector-dropdown';
import AddMenuForm from './add-menu-form';

export default function Toolbar( {
menus,
selectedMenuId,
isAddingMenu,
onSelectMenu,
onCancelAddingMenu,
} ) {
export default function Toolbar( { menus, selectedMenuId } ) {
return (
<div className="edit-navigation-toolbar">
{ menus ? (
<>
<SelectControl
className="edit-navigation-toolbar__menu-select"
label={ __( 'Currently editing' ) }
hideLabelFromVision
disabled={ ! menus.length }
value={ selectedMenuId ?? 0 }
options={
menus.length
? menus.map( ( menu ) => ( {
value: menu.id,
label: menu.name,
} ) )
: [
{
value: 0,
label: __(
'— Select navigation —'
),
},
]
}
onChange={ onSelectMenu }
/>

{ isAddingMenu ? (
<AddMenuForm
menus={ menus }
onCancel={ onCancelAddingMenu }
onCreate={ onSelectMenu }
<NavigableToolbar
className="edit-navigation-toolbar__block-tools"
aria-label={ __( 'Block tools' ) }
>
<BlockToolbar
hideDragHandle
__experimentalExpandedControl
/>
) : (
<>
<NavigableToolbar
className="edit-navigation-toolbar__block-tools"
aria-label={ __( 'Block tools' ) }
>
<BlockToolbar
hideDragHandle
__experimentalExpandedControl
/>
</NavigableToolbar>
<Popover.Slot name="block-toolbar" />
<SaveButton menuId={ selectedMenuId } />
<BlockInspectorDropdown />
</>
) }
</NavigableToolbar>
<Popover.Slot name="block-toolbar" />
<BlockInspectorDropdown />
<SaveButton menuId={ selectedMenuId } />
</>
) : (
<Spinner />
Expand Down
Loading