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

Template actions with DropDownMenuV2 #51043

Closed
wants to merge 1 commit into from
Closed

Template actions with DropDownMenuV2 #51043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
</>
);

return { title, description };
return { title, description, template: record };
}

export default function SidebarNavigationScreenTemplate() {
Expand Down
87 changes: 49 additions & 38 deletions packages/edit-site/src/components/template-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
import { useDispatch, useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __, sprintf } from '@wordpress/i18n';
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { moreVertical } from '@wordpress/icons';
import { privateApis as componentsPrivateApis } from '@wordpress/components';
// import { Icon, moreVertical } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';

/**
Expand All @@ -16,6 +16,21 @@ import isTemplateRemovable from '../../utils/is-template-removable';
import isTemplateRevertable from '../../utils/is-template-revertable';
import RenameMenuItem from './rename-menu-item';

import { unlock } from '../../private-apis';

const {
DropdownMenuV2,
// DropdownMenuCheckboxItemV2,
DropdownMenuGroupV2,
DropdownMenuItemV2,
// DropdownMenuLabelV2,
// DropdownMenuRadioGroupV2,
// DropdownMenuRadioItemV2,
// DropdownMenuSeparatorV2,
// DropdownSubMenuV2,
// DropdownSubMenuTriggerV2,
} = unlock( componentsPrivateApis );

export default function TemplateActions( {
postType,
postId,
Expand Down Expand Up @@ -70,48 +85,44 @@ export default function TemplateActions( {
}

return (
<DropdownMenu
icon={ moreVertical }
<DropdownMenuV2
label={ __( 'Actions' ) }
className={ className }
toggleProps={ toggleProps }
// trigger={ <Icon icon={ moreVertical } /> }
trigger={ <button>hi</button> }
>
{ ( { onClose } ) => (
<MenuGroup>
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
onClose={ onClose }
/>
<MenuItem
isDestructive
isTertiary
onClick={ () => {
removeTemplate( template );
onRemove?.();
onClose();
} }
>
{ __( 'Delete' ) }
</MenuItem>
</>
) }
{ isRevertable && (
<MenuItem
info={ __(
'Use the template as supplied by the theme.'
) }
<DropdownMenuGroupV2>
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
as={ DropdownMenuItemV2 }
/>
<DropdownMenuItemV2
onClick={ () => {
revertAndSaveTemplate();
onClose();
removeTemplate( template );
onRemove?.();
} }
>
{ __( 'Clear customizations' ) }
</MenuItem>
) }
</MenuGroup>
) }
</DropdownMenu>
{ __( 'Delete' ) }
</DropdownMenuItemV2>
</>
) }
{ isRevertable && (
<DropdownMenuItemV2
info={ __(
Copy link
Contributor

Choose a reason for hiding this comment

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

DropdownMenuItemV2 doesn't expose an info prop — you'll have to use children and add/style that text separately

'Use the template as supplied by the theme.'
) }
onClick={ () => {
revertAndSaveTemplate();
// onClose();
} }
>
{ __( 'Clear customizations' ) }
</DropdownMenuItemV2>
) }
</DropdownMenuGroupV2>
</DropdownMenuV2>
);
}
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/template-actions/rename-menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ import {
import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';

export default function RenameMenuItem( { template, onClose } ) {
export default function RenameMenuItem( {
template,
onClose,
as: UsedComponent = MenuItem,
Copy link
Contributor

Choose a reason for hiding this comment

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

Any reason why we're not using DropdownMenuItemV2 directly here?

} ) {
const [ title, setTitle ] = useState( () => template.title.rendered );
const [ isModalOpen, setIsModalOpen ] = useState( false );

Expand Down Expand Up @@ -64,14 +68,14 @@ export default function RenameMenuItem( { template, onClose } ) {

return (
<>
<MenuItem
<UsedComponent
onClick={ () => {
Copy link
Contributor

@ciampo ciampo Jun 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I'm not sure if onClick works at this point on DropdownMenuItemV2 — you may need to use onSelect instead (here and everywhere else in the PR)

setIsModalOpen( true );
setTitle( template.title.rendered );
} }
>
{ __( 'Rename' ) }
</MenuItem>
</UsedComponent>
{ isModalOpen && (
<Modal
title={ __( 'Rename' ) }
Expand Down