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

Jump to bottom

Site Editor: Add rename and trash actions to page panel #60232

Merged
merged 8 commits into from
Apr 5, 2024
Merged

Site Editor: Add rename and trash actions to page panel #60232

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
21e8a9e
Add rename and trash actions to page panel
aaronrobertshaw Mar 27, 2024
015fb35
Use RenamePostMenuItem for the new component
aaronrobertshaw Apr 2, 2024
5b99bfc
Rename `item` prop to `post`
aaronrobertshaw Apr 2, 2024
b895895
Try preventing save when title has not changed
aaronrobertshaw Apr 2, 2024
ff60427
Make page actions align with other panel icons
aaronrobertshaw Apr 2, 2024
fc81a69
Focus input element in rename modal
aaronrobertshaw Apr 3, 2024
091f2bb
Try avoiding focus loss by not closing dropdown on rename
aaronrobertshaw Apr 3, 2024
36aac77
Only display move to trash option when page is not already in trash
aaronrobertshaw Apr 3, 2024
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
16 changes: 10 additions & 6 deletions packages/edit-site/src/components/page-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,24 @@ import { moreVertical } from '@wordpress/icons';
* Internal dependencies
*/
import TrashPageMenuItem from './trash-page-menu-item';
import RenameMenuItem from '../rename-menu-item';

export default function PageActions( { postId, toggleProps, onRemove } ) {
export default function PageActions( { onRemove, page, toggleProps } ) {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
toggleProps={ toggleProps }
>
{ () => (
{ ( { onClose } ) => (
<MenuGroup>
<TrashPageMenuItem
postId={ postId }
onRemove={ onRemove }
/>
<RenameMenuItem item={ page } onClose={ onClose } />
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
{ !! onRemove && (
<TrashPageMenuItem
page={ page }
onRemove={ onRemove }
/>
) }
</MenuGroup>
) }
</DropdownMenu>
Expand Down
27 changes: 10 additions & 17 deletions packages/edit-site/src/components/page-actions/trash-page-menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,35 @@
/**
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { store as coreStore } from '@wordpress/core-data';
import { __, sprintf } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';

export default function TrashPageMenuItem( { postId, onRemove } ) {
export default function TrashPageMenuItem( { page, onRemove } ) {
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );
const { deleteEntityRecord } = useDispatch( coreStore );
const page = useSelect(
( select ) =>
select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
[ postId ]
const title = decodeEntities(
typeof page.title === 'string' ? page.title : page.title.rendered
Copy link
Member

Choose a reason for hiding this comment

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

When is page.title not an object? I wish @wordpress/data handled this for us.

Copy link
Member

Choose a reason for hiding this comment

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

When is page.title not an object?

When consuming an edited record, raw properties will be strings. It also depends on the REST API schema, but it should be the same for post types.

I wish @wordpress/data handled this for us.

It sort of does, but I always have a problem remembering which selector returns which data shape 😓

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good question 👍

As George notes, this should now always be getting the edited record so the title value should be a string. I'll update this PR accordingly.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was mistaken, it appears that the sidebar nav screen for pages is not using the edited record.

For the moment, this trash menu item is getting a record with a string value when accessed via the page panel but an object value in the site editor's sidebar nav. I'd like to explore consistently using the edited record in a follow-up.

);

async function removePage() {
try {
await deleteEntityRecord(
'postType',
'page',
postId,
page.id,
{},
{ throwOnError: true }
);
createSuccessNotice(
sprintf(
/* translators: The page's title. */
__( '"%s" moved to the Trash.' ),
decodeEntities( page.title.rendered )
title
),
{
type: 'snackbar',
Expand All @@ -50,14 +49,8 @@ export default function TrashPageMenuItem( { postId, onRemove } ) {
}
}
return (
<>
<MenuItem
onClick={ () => removePage() }
isDestructive
variant="secondary"
>
{ __( 'Move to Trash' ) }
</MenuItem>
</>
<MenuItem onClick={ () => removePage() } isDestructive>
{ __( 'Move to Trash' ) }
</MenuItem>
);
}
38 changes: 15 additions & 23 deletions ...ents/template-actions/rename-menu-item.js → .../src/components/rename-menu-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

export default function RenameMenuItem( { template, onClose } ) {
const title = decodeEntities( template.title.rendered );
export default function RenameMenuItem( { item, onClose } ) {
const title = decodeEntities(
typeof item.title === 'string' ? item.title : item.title.rendered
);
const [ editedTitle, setEditedTitle ] = useState( title );
const [ isModalOpen, setIsModalOpen ] = useState( false );

Expand All @@ -33,15 +35,15 @@ export default function RenameMenuItem( { template, onClose } ) {
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );

if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
if ( item.type === TEMPLATE_POST_TYPE && ! item.is_custom ) {
return null;
}

async function onTemplateRename( event ) {
async function onRename( event ) {
event.preventDefault();

try {
await editEntityRecord( 'postType', template.type, template.id, {
await editEntityRecord( 'postType', item.type, item.id, {
title: editedTitle,
} );

Expand All @@ -53,33 +55,23 @@ export default function RenameMenuItem( { template, onClose } ) {
// Persist edited entity.
await saveSpecifiedEntityEdits(
'postType',
template.type,
template.id,
item.type,
item.id,
[ 'title' ], // Only save title to avoid persisting other edits.
{
throwOnError: true,
}
);

createSuccessNotice(
template.type === TEMPLATE_POST_TYPE
? __( 'Template renamed.' )
: __( 'Template part renamed.' ),
{
type: 'snackbar',
}
);
createSuccessNotice( __( 'Name updated.' ), {
id: 'template-update',
type: 'snackbar',
} );
} catch ( error ) {
const fallbackErrorMessage =
template.type === TEMPLATE_POST_TYPE
? __( 'An error occurred while renaming the template.' )
: __(
'An error occurred while renaming the template part.'
);
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: fallbackErrorMessage;
: __( 'An error occurred while updating the name.' );

createErrorNotice( errorMessage, { type: 'snackbar' } );
}
Expand All @@ -103,7 +95,7 @@ export default function RenameMenuItem( { template, onClose } ) {
} }
overlayClassName="edit-site-list__rename-modal"
>
<form onSubmit={ onTemplateRename }>
<form onSubmit={ onRename }>
<VStack spacing="5">
<TextControl
__nextHasNoMarginBottom
Expand Down
60 changes: 37 additions & 23 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,62 @@ import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../../store';
import PageActions from '../../page-actions';
import PageContent from './page-content';
import PageSummary from './page-summary';

import { unlock } from '../../../lock-unlock';

const { PostCardPanel } = unlock( editorPrivateApis );
const { useHistory } = unlock( routerPrivateApis );

export default function PagePanels() {
const { id, type, hasResolved, status, date, password, renderingMode } =
useSelect( ( select ) => {
const { getEditedPostContext } = select( editSiteStore );
const { getEditedEntityRecord, hasFinishedResolution } =
select( coreStore );
const { getRenderingMode } = select( editorStore );
const context = getEditedPostContext();
const queryArgs = [ 'postType', context.postType, context.postId ];
const page = getEditedEntityRecord( ...queryArgs );
return {
hasResolved: hasFinishedResolution(
'getEditedEntityRecord',
queryArgs
),
id: page?.id,
type: page?.type,
status: page?.status,
date: page?.date,
password: page?.password,
renderingMode: getRenderingMode(),
};
}, [] );
const { hasResolved, page, renderingMode } = useSelect( ( select ) => {
const { getEditedPostContext } = select( editSiteStore );
const { getEditedEntityRecord, hasFinishedResolution } =
select( coreStore );
const { getRenderingMode } = select( editorStore );
const context = getEditedPostContext();
const queryArgs = [ 'postType', context.postType, context.postId ];
return {
hasResolved: hasFinishedResolution(
'getEditedEntityRecord',
queryArgs
),
page: getEditedEntityRecord( ...queryArgs ),
renderingMode: getRenderingMode(),
};
}, [] );
const history = useHistory();

const { id, type, status, date, password } = page;

if ( ! hasResolved ) {
return null;
}

return (
<>
<PostCardPanel />
<PostCardPanel
actions={
<PageActions
page={ page }
className="edit-site-page-card__actions"
toggleProps={ { size: 'small' } }
onRemove={ () => {
history.push( {
path: '/page',
} );
} }
/>
}
/>
<PanelBody title={ __( 'Summary' ) }>
<PageSummary
status={ status }
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
actions={
<>
<PageActions
postId={ postId }
page={ record }
toggleProps={ { as: SidebarButton } }
onRemove={ () => {
goTo( '/page' );
Expand Down
4 changes: 2 additions & 2 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 @@ -21,7 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
import { store as editSiteStore } from '../../store';
import isTemplateRemovable from '../../utils/is-template-removable';
import isTemplateRevertable from '../../utils/is-template-revertable';
import RenameMenuItem from './rename-menu-item';
import RenameMenuItem from '../rename-menu-item';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

export default function TemplateActions( {
Expand Down Expand Up @@ -56,7 +56,7 @@ export default function TemplateActions( {
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
item={ template }
onClose={ onClose }
/>
<DeleteMenuItem
Expand Down
Loading