Skip to content

Commit

Permalink
Remove custom button and (conditionally) show single menu on Navigati…
Browse files Browse the repository at this point in the history 
…on route in Browse Mode (#51565)

* Remove custom button and show single menu on Navigation route

* Extract hooks

* Pass menu to all hooks

* Use SingleMenu component and hooks on Navigation listing route

* Move hooks to file file

* Consolidate to a single hook

* Improve hooks by passing arg at call time

* Rename hooks
  • Loading branch information
@getdave
getdave authored Jun 20, 2023
1 parent 20020aa commit 4bde6ab
Show file tree
Hide file tree
Showing 6 changed files with 259 additions and 212 deletions.
9 changes: 4 additions & 5 deletions packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';

export default function SidebarNavigationScreenMain() {
const { location } = useNavigator();
Expand All @@ -44,14 +43,14 @@ export default function SidebarNavigationScreenMain() {
) }
content={
<ItemGroup>
<SidebarNavigationScreenNavigationMenuButton
<NavigatorButton
as={ SidebarNavigationItem }
path="/navigation"
withChevron
icon={ navigation }
as={ SidebarNavigationItem }
>
{ __( 'Navigation' ) }
</SidebarNavigationScreenNavigationMenuButton>

</NavigatorButton>
<SidebarNavigationItemGlobalStyles
withChevron
icon={ styles }
Expand Down
182 changes: 22 additions & 160 deletions packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,22 @@ import {
__experimentalUseNavigator as useNavigator,
Spinner,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
*/
import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
import ScreenNavigationMoreMenu from './more-menu';
import NavigationMenuEditor from './navigation-menu-editor';
import EditButton from './edit-button';
import SingleNavigationMenu from './single-navigation-menu';
import useNavigationMenuHandlers from './use-navigation-menu-handlers';

export default function SidebarNavigationScreenNavigationMenu() {
const {
deleteEntityRecord,
saveEntityRecord,
editEntityRecord,
saveEditedEntityRecord,
} = useDispatch( coreStore );

const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );
export const postType = `wp_navigation`;

const postType = `wp_navigation`;
export default function SidebarNavigationScreenNavigationMenu() {
const {
goTo,
params: { postId },
} = useNavigator();

Expand All @@ -42,7 +31,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
postId
);

const { getEditedEntityRecord, isSaving, isDeleting } = useSelect(
const { isSaving, isDeleting } = useSelect(
( select ) => {
const {
isSavingEntityRecord,
Expand All @@ -60,120 +49,19 @@ export default function SidebarNavigationScreenNavigationMenu() {
getEditedEntityRecord: getEditedEntityRecordSelector,
};
},
[ postId, postType ]
[ postId ]
);

const isLoading = isResolving || isSaving || isDeleting;

const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;

const handleSave = async ( edits = {} ) => {
// Prepare for revert in case of error.
const originalRecord = getEditedEntityRecord(
'postType',
'wp_navigation',
postId
);

// Apply the edits.
editEntityRecord( 'postType', postType, postId, edits );
const { handleSave, handleDelete, handleDuplicate } =
useNavigationMenuHandlers();

// Attempt to persist.
try {
await saveEditedEntityRecord( 'postType', postType, postId, {
throwOnError: true,
} );
createSuccessNotice( __( 'Renamed Navigation menu' ), {
type: 'snackbar',
} );
} catch ( error ) {
// Revert to original in case of error.
editEntityRecord( 'postType', postType, postId, originalRecord );

createErrorNotice(
sprintf(
/* translators: %s: error message describing why the navigation menu could not be renamed. */
__( `Unable to rename Navigation menu (%s).` ),
error?.message
),

{
type: 'snackbar',
}
);
}
};

const handleDelete = async () => {
try {
await deleteEntityRecord(
'postType',
postType,
postId,
{
force: true,
},
{
throwOnError: true,
}
);
createSuccessNotice( __( 'Deleted Navigation menu' ), {
type: 'snackbar',
} );
goTo( '/navigation' );
} catch ( error ) {
createErrorNotice(
sprintf(
/* translators: %s: error message describing why the navigation menu could not be deleted. */
__( `Unable to delete Navigation menu (%s).` ),
error?.message
),

{
type: 'snackbar',
}
);
}
};
const handleDuplicate = async () => {
try {
const savedRecord = await saveEntityRecord(
'postType',
postType,
{
title: sprintf(
/* translators: %s: Navigation menu title */
__( '%s (Copy)' ),
menuTitle
),
content: navigationMenu?.content?.raw,
status: 'publish',
},
{
throwOnError: true,
}
);

if ( savedRecord ) {
createSuccessNotice( __( 'Duplicated Navigation menu' ), {
type: 'snackbar',
} );
goTo( `/navigation/${ postType }/${ savedRecord.id }` );
}
} catch ( error ) {
createErrorNotice(
sprintf(
/* translators: %s: error message describing why the navigation menu could not be deleted. */
__( `Unable to duplicate Navigation menu (%s).` ),
error?.message
),

{
type: 'snackbar',
}
);
}
};
const _handleDelete = () => handleDelete( navigationMenu );
const _handleSave = () => handleSave( navigationMenu );
const _handleDuplicate = () => handleDuplicate( navigationMenu );

if ( isLoading ) {
return (
Expand Down Expand Up @@ -201,9 +89,9 @@ export default function SidebarNavigationScreenNavigationMenu() {
actions={
<ScreenNavigationMoreMenu
menuTitle={ decodeEntities( menuTitle ) }
onDelete={ handleDelete }
onSave={ handleSave }
onDuplicate={ handleDuplicate }
onDelete={ _handleDelete }
onSave={ _handleSave }
onDuplicate={ _handleDuplicate }
/>
}
title={ decodeEntities( menuTitle ) }
Expand All @@ -213,37 +101,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
}

return (
<SidebarNavigationScreenWrapper
actions={
<>
<EditButton />
<ScreenNavigationMoreMenu
menuTitle={ decodeEntities( menuTitle ) }
onDelete={ handleDelete }
onSave={ handleSave }
onDuplicate={ handleDuplicate }
/>
</>
}
title={ decodeEntities( menuTitle ) }
description={
<>
<p>
{ sprintf(
/* translators: %s: Navigation menu title */
'This is your "%s" navigation menu. ',
decodeEntities( menuTitle )
) }
</p>
<p>
{ __(
'You can edit this menu here, but be aware that visual styles might be applied separately in templates or template parts, so the preview shown here can be incomplete.'
) }
</p>
</>
}
>
<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
</SidebarNavigationScreenWrapper>
<SingleNavigationMenu
navigationMenu={ navigationMenu }
handleDelete={ _handleDelete }
handleSave={ _handleSave }
handleDuplicate={ _handleDuplicate }
/>
);
}
39 changes: 39 additions & 0 deletions ...t-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
import ScreenNavigationMoreMenu from './more-menu';
import NavigationMenuEditor from './navigation-menu-editor';

export default function SingleNavigationMenu( {
navigationMenu,
handleDelete,
handleDuplicate,
handleSave,
} ) {
const menuTitle = navigationMenu?.title?.rendered;

return (
<SidebarNavigationScreenWrapper
actions={
<ScreenNavigationMoreMenu
menuTitle={ decodeEntities( menuTitle ) }
onDelete={ handleDelete }
onSave={ handleSave }
onDuplicate={ handleDuplicate }
/>
}
title={ decodeEntities( menuTitle ) }
description={ __(
'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
) }
>
<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
</SidebarNavigationScreenWrapper>
);
}
Loading

1 comment on commit 4bde6ab

@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 in 4bde6ab.
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/5321896604
📝 Reported issues:

Please sign in to comment.