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.

Sign up for GitHub

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
Merged

Navigation: Select dropdown encapsulation and further consolidation. #38627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d3f9ee9
Encapsulate permissions checks
getdave Feb 8, 2022
acdb553
Utilise primary component inside placeholder
getdave Feb 8, 2022
11f6d58
Inline existing menus options
getdave Feb 9, 2022
9cf6f34
Account for create vs switch in aria label depending on context
getdave Feb 9, 2022
c5c3377
Remove explicit truthy in prop
getdave Feb 9, 2022
eda20d5
Rename vars to include "Menu"
getdave Feb 10, 2022
d2975e8
Improve prop naming for clarity
getdave Feb 10, 2022
7e2c158
Improve conditionals around display of management options
getdave Feb 11, 2022
a086afe
Wait for the custom link block
getdave Feb 11, 2022
7edc097
Wait for the menuItems response
getdave Feb 14, 2022
bdb24ad
Improve conditional
getdave Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 0 additions & 70 deletions packages/block-library/src/navigation/edit/existing-menus-options.js
View file
Open in desktop

This file was deleted.

9 changes: 3 additions & 6 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
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
101 changes: 73 additions & 28 deletions packages/block-library/src/navigation/edit/navigation-menu-selector.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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