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

Ability to rename pages in site editor without title block #54648

Closed
wants to merge 3 commits into from
Closed

Ability to rename pages in site editor without title block #54648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00f429b
rename page
SaxonF Sep 20, 2023
596a524
Merge branch 'trunk' into add/edit-page-title
SaxonF Sep 21, 2023
766eb51
merge trunk
SaxonF Oct 25, 2023
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
8 changes: 5 additions & 3 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,18 +9,20 @@ import { moreVertical } from '@wordpress/icons';
* Internal dependencies
*/
import TrashPageMenuItem from './trash-page-menu-item';
import EditPageMenuItem from '../rename-menu-item';

export default function PageActions( { postId, toggleProps, onRemove } ) {
export default function PageActions( { post, toggleProps, onRemove } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a reason to change this prop? If possible its always better to pass simpler props as it prevents unnecessary rerenders in the component.

return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
toggleProps={ toggleProps }
>
{ () => (
{ ( { onClose } ) => (
<MenuGroup>
<EditPageMenuItem item={ post } onClose={ onClose } />
<TrashPageMenuItem
postId={ postId }
postId={ post.id }
onRemove={ onRemove }
/>
</MenuGroup>
Expand Down
6 changes: 1 addition & 5 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
Expand Up @@ -51,11 +51,7 @@ export default function TrashPageMenuItem( { postId, onRemove } ) {
}
return (
<>
<MenuItem
onClick={ () => removePage() }
isDestructive
variant="secondary"
>
<MenuItem onClick={ () => removePage() } isDestructive>
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this change meant to be part of this PR? I didn't see it mentioned in the description...

{ __( 'Move to Trash' ) }
</MenuItem>
</>
Expand Down
43 changes: 16 additions & 27 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 @@ -16,13 +16,10 @@ import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
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 +30,15 @@ export default function RenameMenuItem( { template, onClose } ) {
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );

if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
if ( item.type === 'wp_template' && ! item.is_custom ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are we not using the TEMPLATE_POST_TYPE const anymore?

return null;
}

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

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

Expand All @@ -53,29 +50,21 @@ 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' ), {
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 fallbackErrorMessage = __(
'An error occurred while updating the name'
);
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
Expand Down Expand Up @@ -103,7 +92,7 @@ export default function RenameMenuItem( { template, onClose } ) {
} }
overlayClassName="edit-site-list__rename-modal"
>
<form onSubmit={ onTemplateRename }>
<form onSubmit={ onItemRename }>
<VStack spacing="5">
<TextControl
__nextHasNoMarginBottom
Expand Down
41 changes: 19 additions & 22 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 @@ -20,30 +20,26 @@ import { store as editSiteStore } from '../../../store';
import SidebarCard from '../sidebar-card';
import PageContent from './page-content';
import PageSummary from './page-summary';
import PageActions from './page-actions';

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

const { id, type, status, date, password, title, modified } = page;
Copy link
Contributor

Choose a reason for hiding this comment

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

nice! We just need to make sure that if page doesn't exist this doesn't throw any errors.


if ( ! hasResolved ) {
return null;
Expand All @@ -55,6 +51,7 @@ export default function PagePanels() {
<SidebarCard
title={ decodeEntities( title ) }
icon={ pageIcon }
actions={ <PageActions page={ page } /> }
description={
<VStack>
<Text>
Expand Down
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { DropdownMenu, MenuGroup } from '@wordpress/components';
import { moreVertical } from '@wordpress/icons';

/**
* Internal dependencies
*/
import RenameMenuItem from '../../rename-menu-item';

export default function Actions( { page } ) {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
className="edit-site-template-card__actions"
toggleProps={ { isSmall: true } }
>
{ ( { onClose } ) => (
<MenuGroup>
<RenameMenuItem item={ page } onClose={ onClose } />
</MenuGroup>
) }
</DropdownMenu>
);
}
3 changes: 3 additions & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { moreVertical } from '@wordpress/icons';
*/
import { store as editSiteStore } from '../../../store';
import isTemplateRevertable from '../../../utils/is-template-revertable';
import RenameMenuItem from '../../rename-menu-item';
import ReplaceTemplateButton from './replace-template-button';
import { useAvailablePatterns } from './hooks';

Expand All @@ -21,6 +22,7 @@ export default function Actions( { template } ) {

if (
! isRevertable &&
! template.is_custom &&
( ! availablePatterns.length || availablePatterns.length < 1 )
) {
return null;
Expand Down Expand Up @@ -48,6 +50,7 @@ export default function Actions( { template } ) {
{ __( 'Clear customizations' ) }
</MenuItem>
) }
<RenameMenuItem item={ template } onClose={ onClose } />
<ReplaceTemplateButton
availableTemplates={ availablePatterns }
template={ template }
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 @@ -73,7 +73,7 @@ export default function SidebarNavigationScreenPage() {
actions={
<>
<PageActions
postId={ postId }
post={ record }
toggleProps={ { as: SidebarButton } }
onRemove={ () => {
navigator.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 @@ -95,7 +95,7 @@ export default function TemplateActions( {
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
item={ template }
onClose={ onClose }
/>
<DeleteMenuItem
Expand Down
Loading