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.

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: Select dropdown encapsulation and further consolidation. #38627

Merged
merged 11 commits into from
Feb 14, 2022

This file was deleted.

9 changes: 3 additions & 6 deletions packages/block-library/src/navigation/edit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -496,12 +496,9 @@ function Navigation( {
onClose();
} }
onCreateNew={ startWithEmptyMenu }
canUserCreateNavigation={
canUserCreateNavigation
}
canUserSwitchNavigation={
canSwitchNavigationMenu
}
/* translators: %s: The name of a menu. */
actionLabel={ __( "Switch to '%s'" ) }
showManageActions
/>
) }
</ToolbarDropdownMenu>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* WordPress dependencies
*/
import { MenuGroup, MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import { addQueryArgs } from '@wordpress/url';

/**
Expand All @@ -13,28 +13,35 @@ import useNavigationMenu from '../use-navigation-menu';
import useNavigationEntities from '../use-navigation-entities';
import useConvertClassicMenu from '../use-convert-classic-menu';
import useCreateNavigationMenu from './use-create-navigation-menu';
import ExistingMenusOptions from './existing-menus-options';

export default function NavigationMenuSelector( {
clientId,
onSelect,
onCreateNew,
canUserCreateNavigation = false,
canUserSwitchNavigation = false,
showManageActions = false,
actionLabel,
} ) {
/* translators: %s: The name of a menu. */
const createActionLabel = __( "Create from '%s'" );

actionLabel = actionLabel || createActionLabel;

const { menus: classicMenus } = useNavigationEntities();

const {
menus: classicMenus,
hasMenus: hasClassicMenus,
} = useNavigationEntities();
const { navigationMenus } = useNavigationMenu();
navigationMenus,
canUserCreateNavigation: canUserCreateNavigationMenu,
canUserUpdateNavigationEntity: canUserUpdateNavigationMenu,
canSwitchNavigationMenu,
} = useNavigationMenu();
Copy link
Contributor

Choose a reason for hiding this comment

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

What if the hook returned the final names already?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It doesn't...yet but yes this will require a fix when my other PR lands.


const createNavigationMenu = useCreateNavigationMenu( clientId );

const onFinishMenuCreation = async (
blocks,
navigationMenuTitle = null
) => {
if ( ! canUserCreateNavigation ) {
if ( ! canUserCreateNavigationMenu ) {
return;
}

Expand All @@ -49,34 +56,72 @@ export default function NavigationMenuSelector( {
onFinishMenuCreation
);

const hasNavigationMenus = !! navigationMenus?.length;
const hasClassicMenus = !! classicMenus?.length;
const showNavigationMenus = !! canSwitchNavigationMenu;
const showClassicMenus = !! canUserCreateNavigationMenu;
const hasManagePermissions =
canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
const showSelectMenus =
( canUserSwitchNavigation || canUserCreateNavigation ) &&
( navigationMenus?.length || hasClassicMenus );
( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
( hasNavigationMenus || hasClassicMenus );

if ( ! showSelectMenus ) {
return null;
}

return (
<>
<ExistingMenusOptions
showNavigationMenus={ canUserSwitchNavigation }
showClassicMenus={ canUserCreateNavigation }
navigationMenus={ navigationMenus }
classicMenus={ classicMenus }
onSelectNavigationMenu={ onSelect }
onSelectClassicMenu={ ( { id, name } ) =>
convertClassicMenuToBlocks( id, name )
}
/* translators: %s: The name of a menu. */
actionLabel={ __( "Switch to '%s'" ) }
/>
{ showNavigationMenus && hasNavigationMenus && (
<MenuGroup label={ __( 'Menus' ) }>
{ navigationMenus.map( ( menu ) => {
const label = decodeEntities( menu.title.rendered );
return (
<MenuItem
onClick={ () => {
onSelect( menu );
} }
key={ menu.id }
aria-label={ sprintf( actionLabel, label ) }
>
{ label }
</MenuItem>
);
} ) }
</MenuGroup>
) }
{ showClassicMenus && hasClassicMenus && (
<MenuGroup label={ __( 'Classic Menus' ) }>
{ classicMenus.map( ( menu ) => {
const label = decodeEntities( menu.name );
return (
<MenuItem
onClick={ () => {
convertClassicMenuToBlocks(
menu.id,
menu.name
);
} }
key={ menu.id }
aria-label={ sprintf(
createActionLabel,
label
) }
>
{ label }
</MenuItem>
);
} ) }
</MenuGroup>
) }

{ canUserCreateNavigation && (
{ showManageActions && hasManagePermissions && (
<MenuGroup label={ __( 'Tools' ) }>
<MenuItem onClick={ onCreateNew }>
{ __( 'Create new menu' ) }
</MenuItem>
{ canUserCreateNavigationMenu && (
<MenuItem onClick={ onCreateNew }>
{ __( 'Create new menu' ) }
</MenuItem>
) }
<MenuItem
href={ addQueryArgs( 'edit.php', {
post_type: 'wp_navigation',
Expand Down
32 changes: 4 additions & 28 deletions packages/block-library/src/navigation/edit/placeholder/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import useNavigationEntities from '../../use-navigation-entities';
import PlaceholderPreview from './placeholder-preview';
import useNavigationMenu from '../../use-navigation-menu';
import useCreateNavigationMenu from '../use-create-navigation-menu';
import useConvertClassicMenu from '../../use-convert-classic-menu';
import ExistingMenusOptions from '../existing-menus-options';
import NavigationMenuSelector from '../navigation-menu-selector';

export default function NavigationPlaceholder( {
clientId,
Expand All @@ -40,11 +39,8 @@ export default function NavigationPlaceholder( {
onFinish( navigationMenu, blocks );
};

const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );

const {
isResolvingPages,
menus,
isResolvingMenus,
hasMenus,
} = useNavigationEntities();
Expand Down Expand Up @@ -94,29 +90,9 @@ export default function NavigationPlaceholder( {
popoverProps={ { isAlternate: true } }
>
{ () => (
<ExistingMenusOptions
getdave marked this conversation as resolved.
Show resolved Hide resolved
showNavigationMenus={
canSwitchNavigationMenu
}
navigationMenus={
navigationMenus
}
onSelectNavigationMenu={
onFinish
}
classicMenus={ menus }
onSelectClassicMenu={ ( {
id,
name,
} ) =>
convertClassicMenu(
id,
name
)
}
showClassicMenus={
canUserCreateNavigation
}
<NavigationMenuSelector
clientId={ clientId }
onSelect={ onFinish }
/>
) }
</DropdownMenu>
Expand Down
5 changes: 5 additions & 0 deletions packages/e2e-tests/specs/editor/blocks/navigation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,11 @@ async function selectClassicMenu( optionText ) {
`//*[contains(@class, 'components-menu-item__item')][ text()="${ optionText }" ]`
);
await theOption.click();

await page.waitForResponse(
( response ) =>
response.url().includes( 'menu-items' ) && response.status() === 200
);
}

const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
Expand Down