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

Fix visual indication of switch to default template in the post editor #57718

Merged
merged 4 commits into from
Jan 17, 2024
Merged

Fix visual indication of switch to default template in the post editor #57718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51abef1
Fix visual indication of switch to default template in the post editor
ntsekouras Jan 10, 2024
d49d970
fix logic for request template resolution
ntsekouras Jan 10, 2024
690fc1e
fix template resolution in site editor
ntsekouras Jan 15, 2024
c5ed0d8
add e2e test
ntsekouras Jan 17, 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
27 changes: 21 additions & 6 deletions packages/edit-post/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,12 +594,27 @@ export const getEditedPostTemplate = createRegistrySelector(
}

const post = select( editorStore ).getCurrentPost();
if ( post.link ) {
return select( coreStore ).__experimentalGetTemplateForLink(
post.link
);
let slugToCheck;
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
// In `draft` status we might not have a slug available, so we use the `single`
// post type templates slug(ex page, single-post, single-product etc..).
// Pages do not need the `single` prefix in the slug to be prioritized
// through template hierarchy.
if ( post.slug ) {
slugToCheck =
post.type === 'page'
? `${ post.type }-${ post.slug }`
: `single-${ post.type }-${ post.slug }`;
} else {
slugToCheck =
post.type === 'page' ? 'page' : `single-${ post.type }`;
}

return null;
const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
slug: slugToCheck,
} );
return select( coreStore ).getEditedEntityRecord(
'postType',
'wp_template',
defaultTemplateId
);
Copy link
Contributor

Choose a reason for hiding this comment

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

So one thing I noticed here is that this function is getting closer to use-init-edited-entity-from-url which is good.
The remaining difference is about the handling of the "posts page" and the "home page", both of these have special handling in the site editor that is not present here. I'm thinking that we might want to check these and unify these as well (probably a separate PR though)

}
);
19 changes: 17 additions & 2 deletions packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,25 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
return currentTemplate.id;
}
}

// If no template is assigned, use the default template.
let slugToCheck;
// In `draft` status we might not have a slug available, so we use the `single`
// post type templates slug(ex page, single-post, single-product etc..).
// Pages do not need the `single` prefix in the slug to be prioritized
// through template hierarchy.
if ( editedEntity.slug ) {
slugToCheck =
postTypeToResolve === 'page'
? `${ postTypeToResolve }-${ editedEntity.slug }`
: `single-${ postTypeToResolve }-${ editedEntity.slug }`;
} else {
slugToCheck =
postTypeToResolve === 'page'
? 'page'
: `single-${ postTypeToResolve }`;
}
return getDefaultTemplateId( {
slug: `${ postTypeToResolve }-${ editedEntity?.slug }`,
slug: slugToCheck,
} );
}

Expand Down
36 changes: 36 additions & 0 deletions test/e2e/specs/editor/various/post-editor-template-mode.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,42 @@ test.describe( 'Post Editor Template mode', () => {
).toBeVisible();
} );

test( 'Swap templates and proper template resolution when switching to default template', async ( {
editor,
page,
requestUtils,
postEditorTemplateMode,
} ) => {
await requestUtils.activateTheme( 'emptytheme' );
await postEditorTemplateMode.createPostAndSaveDraft();
await page.reload();
await postEditorTemplateMode.disableTemplateWelcomeGuide();
await postEditorTemplateMode.openTemplatePopover();
// Swap to a custom template, save and reload.
await page
.getByRole( 'menuitem', {
name: 'Swap template',
} )
.click();
await page
.getByRole( 'option', {
name: 'Custom',
} )
.click();
await editor.saveDraft();
await page.reload();
// Swap to the default template.
await postEditorTemplateMode.openTemplatePopover();
await page
.getByRole( 'menuitem', {
name: 'Use default template',
} )
.click();
await expect(
page.getByRole( 'button', { name: 'Template options' } )
).toHaveText( 'Single Entries' );
} );

test( 'Allow creating custom block templates in classic themes', async ( {
editor,
page,
Expand Down
Loading