Skip to content

Commit

Permalink
Bring back the heading and the menu selector in the ellipsis menu (#4…
Browse files Browse the repository at this point in the history 
…6622)

* Bring back the heading and the menu selector in the ellipsis menu

* don't show button keep the create option in the dropdown

Co-authored-by: Andrei Draganescu <github@andreidraganescu.info>
  • Loading branch information
@draganescu
draganescu and Andrei Draganescu authored Dec 20, 2022
1 parent 2589617 commit a12b449
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 37 deletions.
85 changes: 57 additions & 28 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import {
InspectorControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { PanelBody, VisuallyHidden } from '@wordpress/components';
import {
PanelBody,
__experimentalHStack as HStack,
__experimentalHeading as Heading,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

Expand All @@ -21,6 +25,7 @@ const MenuInspectorControls = ( {
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
isNavigationMenuMissing,
isManageMenusButtonDisabled,
onCreateNew,
onSelectClassicMenu,
Expand Down Expand Up @@ -51,37 +56,61 @@ const MenuInspectorControls = ( {
isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
}
>
<>
{ isOffCanvasNavigationEditorEnabled && (
<VisuallyHidden as="h2">
{ __( 'Menu' ) }
</VisuallyHidden>
) }
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
{ isOffCanvasNavigationEditorEnabled ? (
<OffCanvasEditor
blocks={ clientIdsTree }
isExpanded={ true }
selectBlockInCanvas={ false }
{ isOffCanvasNavigationEditorEnabled ? (
<>
<HStack className="wp-block-navigation-off-canvas-editor__header">
<Heading
className="wp-block-navigation-off-canvas-editor__title"
level={ 2 }
>
{ __( 'Menu' ) }
</Heading>
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={
onSelectNavigationMenu
}
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
</HStack>
{ currentMenuId && isNavigationMenuMissing ? (
<p>{ __( 'Select or create a menu' ) }</p>
) : (
<OffCanvasEditor
blocks={ clientIdsTree }
isExpanded={ true }
selectBlockInCanvas={ false }
/>
) }
</>
) : (
<>
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
) : (
<ManageMenusButton
disabled={ isManageMenusButtonDisabled }
/>
) }
</>
</>
) }
</PanelBody>
</InspectorControls>
);
Expand Down
28 changes: 19 additions & 9 deletions packages/block-library/src/navigation/edit/navigation-menu-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
VisuallyHidden,
} from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import { useEffect, useMemo, useState } from '@wordpress/element';
Expand All @@ -31,6 +31,8 @@ function NavigationMenuSelector( {
createNavigationMenuIsError,
toggleProps = {},
} ) {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;
/* translators: %s: The name of a menu. */
const createActionLabel = __( "Create from '%s'" );

Expand Down Expand Up @@ -140,7 +142,11 @@ function NavigationMenuSelector( {
},
};

if ( ! hasNavigationMenus && ! hasClassicMenus ) {
if (
! hasNavigationMenus &&
! hasClassicMenus &&
! isOffCanvasNavigationEditorEnabled
) {
return (
<Button
className="wp-block-navigation__navigation-selector-button--createnew"
Expand All @@ -161,15 +167,19 @@ function NavigationMenuSelector( {

return (
<DropdownMenu
className="wp-block-navigation__navigation-selector"
className={
isOffCanvasNavigationEditorEnabled
? ''
: 'wp-block-navigation__navigation-selector'
}
label={ selectorLabel }
text={
<span className="wp-block-navigation__navigation-selector-button__label">
{ selectorLabel }
</span>
text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
toggleProps={
isOffCanvasNavigationEditorEnabled
? { isSmall: true }
: toggleProps
}
icon={ null }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<>
Expand Down

1 comment on commit a12b449

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3741061677
📝 Reported issues:

Please sign in to comment.