Skip to content

Commit

Permalink
Navigation: Show the loading indictor when users add a new navigation…
Browse files Browse the repository at this point in the history 
… menu (#46855)

* Navigation: Show the loading indictor when users add a new navigation menu

* add missing return

* refactor to use more components

Co-authored-by: Ben Dwyer <ben@escruffian.com>
  • Loading branch information
@scruffian
scruffian and Ben Dwyer authored Jan 4, 2023
1 parent 92da442 commit 01aea1a
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 69 deletions.
3 changes: 3 additions & 0 deletions packages/block-library/src/navigation/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,6 +727,7 @@ function Navigation( {
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
isLoading={ isLoading }
/>
{ stylingInspectorControls }
<ResponsiveWrapper
Expand Down Expand Up @@ -768,6 +769,7 @@ function Navigation( {
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
isLoading={ isLoading }
/>
<Warning>
{ __(
Expand Down Expand Up @@ -842,6 +844,7 @@ function Navigation( {
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
isLoading={ isLoading }
/>
{ stylingInspectorControls }
{ isEntityAvailable && (
Expand Down
166 changes: 97 additions & 69 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 @@ -10,6 +10,7 @@ import {
PanelBody,
__experimentalHStack as HStack,
__experimentalHeading as Heading,
Spinner,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
Expand All @@ -21,25 +22,15 @@ import ManageMenusButton from './manage-menus-button';
import NavigationMenuSelector from './navigation-menu-selector';
import { LeafMoreMenu } from '../leaf-more-menu';

const MenuInspectorControls = ( {
/* translators: %s: The name of a menu. */
const actionLabel = __( "Switch to '%s'" );

const ExperimentMainContent = ( {
clientId,
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
currentMenuId,
isLoading,
isNavigationMenuMissing,
isManageMenusButtonDisabled,
onCreateNew,
onSelectClassicMenu,
onSelectNavigationMenu,
} ) => {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;
const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
? 'list'
: undefined;
/* translators: %s: The name of a menu. */
const actionLabel = __( "Switch to '%s'" );

// Provide a hierarchy of clientIds for the given Navigation block (clientId).
// This is required else the list view will display the entire block tree.
const clientIdsTree = useSelect(
Expand All @@ -50,6 +41,94 @@ const MenuInspectorControls = ( {
[ clientId ]
);

if ( currentMenuId && isNavigationMenuMissing ) {
return <p>{ __( 'Select or create a menu' ) }</p>;
}

if ( isLoading ) {
return <Spinner />;
}

return (
<OffCanvasEditor
blocks={ clientIdsTree }
isExpanded={ true }
selectBlockInCanvas={ false }
LeafMoreMenu={ LeafMoreMenu }
/>
);
};

const ExperimentControls = ( props ) => {
const {
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
onCreateNew,
onSelectClassicMenu,
onSelectNavigationMenu,
} = props;

return (
<>
<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>
<ExperimentMainContent { ...props } />
</>
);
};

const DefaultControls = ( props ) => {
const {
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
isManageMenusButtonDisabled,
onCreateNew,
onSelectClassicMenu,
onSelectNavigationMenu,
} = props;

return (
<>
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
createNavigationMenuIsError={ createNavigationMenuIsError }
actionLabel={ actionLabel }
/>
<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
</>
);
};

const MenuInspectorControls = ( props ) => {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;
const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
? 'list'
: undefined;

return (
<InspectorControls __experimentalGroup={ menuControlsSlot }>
<PanelBody
Expand All @@ -58,60 +137,9 @@ const MenuInspectorControls = ( {
}
>
{ 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 }
LeafMoreMenu={ LeafMoreMenu }
/>
) }
</>
<ExperimentControls { ...props } />
) : (
<>
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
<ManageMenusButton
disabled={ isManageMenusButtonDisabled }
/>
</>
<DefaultControls { ...props } />
) }
</PanelBody>
</InspectorControls>
Expand Down

1 comment on commit 01aea1a

@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/3840921601
📝 Reported issues:

Please sign in to comment.