Skip to content

Commit 29b8605

Browse files
jasmussennoisysocks
authored andcommitted
Navigation: Refactor and simplify setup state. (#36375)
* Navigation: Refactor and simplify setup state. * Address feedback.
1 parent ece1532 commit 29b8605

File tree

2 files changed

+57
-45
lines changed

2 files changed

+57
-45
lines changed

packages/block-library/src/navigation/edit/placeholder/index.js

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
1313
import { useDispatch } from '@wordpress/data';
1414
import { useCallback, useState, useEffect } from '@wordpress/element';
1515
import { __ } from '@wordpress/i18n';
16-
import { navigation, chevronDown, Icon } from '@wordpress/icons';
16+
import { navigation, Icon } from '@wordpress/icons';
1717

1818
/**
1919
* Internal dependencies
@@ -34,13 +34,14 @@ const ExistingMenusDropdown = ( {
3434
onCreateFromMenu,
3535
} ) => {
3636
const toggleProps = {
37-
variant: 'primary',
37+
variant: 'tertiary',
38+
iconPosition: 'right',
3839
className: 'wp-block-navigation-placeholder__actions__dropdown',
3940
};
4041
return (
4142
<DropdownMenu
42-
text={ __( 'Select existing menu' ) }
43-
icon={ chevronDown }
43+
text={ __( 'Select menu' ) }
44+
icon={ null }
4445
toggleProps={ toggleProps }
4546
popoverProps={ { isAlternate: true } }
4647
>
@@ -201,32 +202,35 @@ export default function NavigationPlaceholder( {
201202
<Icon icon={ navigation } />{ ' ' }
202203
{ __( 'Navigation' ) }
203204
</div>
205+
<hr />
204206
{ hasMenus || navigationMenus.length ? (
205-
<ExistingMenusDropdown
206-
canSwitchNavigationMenu={
207-
canSwitchNavigationMenu
208-
}
209-
navigationMenus={ navigationMenus }
210-
setSelectedMenu={ setSelectedMenu }
211-
onFinish={ onFinish }
212-
menus={ menus }
213-
onCreateFromMenu={ onCreateFromMenu }
214-
/>
207+
<>
208+
<ExistingMenusDropdown
209+
canSwitchNavigationMenu={
210+
canSwitchNavigationMenu
211+
}
212+
navigationMenus={ navigationMenus }
213+
setSelectedMenu={ setSelectedMenu }
214+
onFinish={ onFinish }
215+
menus={ menus }
216+
onCreateFromMenu={ onCreateFromMenu }
217+
/>
218+
<hr />
219+
</>
215220
) : undefined }
216221
{ hasPages ? (
217-
<Button
218-
variant={
219-
hasMenus || canSwitchNavigationMenu
220-
? 'tertiary'
221-
: 'primary'
222-
}
223-
onClick={ () => {
224-
setIsNewMenuModalVisible( true );
225-
setCreateEmpty( false );
226-
} }
227-
>
228-
{ __( 'Add all pages' ) }
229-
</Button>
222+
<>
223+
<Button
224+
variant="tertiary"
225+
onClick={ () => {
226+
setIsNewMenuModalVisible( true );
227+
setCreateEmpty( false );
228+
} }
229+
>
230+
{ __( 'Add all pages' ) }
231+
</Button>
232+
<hr />
233+
</>
230234
) : undefined }
231235
<Button
232236
variant="tertiary"

packages/block-library/src/navigation/editor.scss

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,11 @@ $color-control-label-height: 20px;
324324
.wp-block-navigation-placeholder__actions {
325325
flex-direction: column;
326326
}
327+
328+
// Hide the separators in the vertical version.
329+
.wp-block-navigation-placeholder__actions hr {
330+
display: none;
331+
}
327332
}
328333

329334
.wp-block-navigation-placeholder__icon {
@@ -333,47 +338,50 @@ $color-control-label-height: 20px;
333338

334339
// Block title
335340
.wp-block-navigation-placeholder__actions__indicator {
336-
margin-right: $grid-unit-15;
337-
padding: 0;
341+
display: flex;
342+
padding: 0 ($grid-unit-15 * 0.5) 0 0;
338343
align-items: center;
339344
justify-content: flex-start;
340345
line-height: 0;
346+
min-height: $button-size;
341347

342348
// Line up with the icon in the toolbar.
343-
margin-left: $grid-unit-05 + $border-width;
349+
margin-left: $grid-unit-05;
344350

345351
svg {
346352
margin-right: $grid-unit-05;
347353
}
348-
349-
// Show only in big placeholders.
350-
display: none;
351-
.is-large & {
352-
display: inline-flex;
353-
}
354354
}
355355
}
356356

357357
.wp-block-navigation-placeholder__actions {
358358
display: flex;
359359
font-size: $default-font-size;
360360
font-family: $default-font;
361-
362-
.components-button.components-dropdown-menu__toggle.has-icon {
363-
padding:
364-
( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
365-
$grid-unit-15;
366-
display: flex;
367-
flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
368-
}
361+
gap: $grid-unit-15 * 0.5;
369362

370363
// Margins.
371364
.components-dropdown,
372365
> .components-button {
373-
margin-right: $grid-unit-15;
366+
margin-right: 0;
367+
}
368+
369+
// Separator.
370+
height: 100%; // This allows the separator to scale vertically.
371+
372+
// Separator.
373+
&.wp-block-navigation-placeholder__actions hr {
374+
border: 0;
375+
min-height: $border-width;
376+
min-width: $border-width;
377+
background-color: $gray-900;
378+
margin: auto 0;
379+
height: 100%;
380+
max-height: $grid-unit-20;
374381
}
375382
}
376383

384+
377385
/**
378386
* Mobile menu.
379387
*/

0 commit comments

Comments
 (0)