[Site Editor - Page Inspector]: Add ability to switch templates #51477
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -291,7 +291,7 @@ _Parameters_ | |
|
|
||
| _Returns_ | ||
|
|
||
| - `Object`: Action object. | ||
|
|
||
| ### setHasPageContentFocus | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useMemo } from '@wordpress/element'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as editSiteStore } from '../../../store'; | ||
|
|
||
| export function useEditedPostContext() { | ||
| return useSelect( | ||
| ( select ) => select( editSiteStore ).getEditedPostContext(), | ||
| [] | ||
| ); | ||
| } | ||
|
|
||
| export function useIsPostsPage() { | ||
| const { postId } = useEditedPostContext(); | ||
| return useSelect( | ||
| ( select ) => | ||
| +postId === | ||
ntsekouras marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| select( coreStore ).getEntityRecord( 'root', 'site' ) | ||
| ?.page_for_posts, | ||
| [ postId ] | ||
| ); | ||
| } | ||
|
|
||
| function useTemplates() { | ||
| return useSelect( | ||
| ( select ) => | ||
| select( coreStore ).getEntityRecords( 'postType', 'wp_template', { | ||
| per_page: -1, | ||
| post_type: 'page', | ||
| } ), | ||
| [] | ||
| ); | ||
| } | ||
|
|
||
| export function useAvailableTemplates() { | ||
| const currentTemplateSlug = useCurrentTemplateSlug(); | ||
| const isPostsPage = useIsPostsPage(); | ||
| const templates = useTemplates(); | ||
| return useMemo( | ||
| () => | ||
| // The posts page template cannot be changed. | ||
| ! isPostsPage && | ||
| templates?.filter( | ||
| ( template ) => | ||
| template.is_custom && | ||
| template.slug !== currentTemplateSlug && | ||
| !! template.content.raw // Skip empty templates. | ||
| ), | ||
| [ templates, currentTemplateSlug, isPostsPage ] | ||
| ); | ||
| } | ||
|
|
||
| export function useCurrentTemplateSlug() { | ||
| const { postType, postId } = useEditedPostContext(); | ||
| const templates = useTemplates(); | ||
| const entityTemplate = useSelect( | ||
| ( select ) => { | ||
| const post = select( coreStore ).getEditedEntityRecord( | ||
| 'postType', | ||
| postType, | ||
| postId | ||
| ); | ||
| return post?.template; | ||
| }, | ||
| [ postType, postId ] | ||
| ); | ||
|
|
||
| if ( ! entityTemplate ) { | ||
| return; | ||
| } | ||
| // If a page has a `template` set and is not included in the list | ||
| // of the theme's templates, do not return it, in order to resolve | ||
| // to the current theme's default template. | ||
| return templates?.find( ( template ) => template.slug === entityTemplate ) | ||
| ?.slug; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { MenuGroup, MenuItem } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useEntityRecord } from '@wordpress/core-data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| useCurrentTemplateSlug, | ||
| useEditedPostContext, | ||
| useIsPostsPage, | ||
| } from './hooks'; | ||
| import { store as editSiteStore } from '../../../store'; | ||
|
|
||
| export default function ResetDefaultTemplate( { onClick } ) { | ||
| const currentTemplateSlug = useCurrentTemplateSlug(); | ||
| const isPostsPage = useIsPostsPage(); | ||
| const { postType, postId } = useEditedPostContext(); | ||
| const entity = useEntityRecord( 'postType', postType, postId ); | ||
| const { setPage } = useDispatch( editSiteStore ); | ||
| // The default template in a post is indicated by an empty string. | ||
| if ( ! currentTemplateSlug || isPostsPage ) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <MenuGroup> | ||
| <MenuItem | ||
| onClick={ async () => { | ||
| entity.edit( { template: '' }, { undoIgnore: true } ); | ||
|
There was a problem hiding this comment. Why are we using undoIngore in these edits? There was a problem hiding this comment. Because the specific There was a problem hiding this comment. I guess that means we need to solve that to solve the undo as well #51477 (comment) |
||
| onClick(); | ||
| await setPage( { | ||
|
There was a problem hiding this comment. Is the idea here to cause a refresh of the template or something? |
||
| context: { postType, postId }, | ||
| } ); | ||
| } } | ||
| > | ||
| { __( 'Reset' ) } | ||
| </MenuItem> | ||
| </MenuGroup> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Do we really need this hook? Feels like a very light shortcut.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that you're using this pattern for several hooks. Personally I wonder if this indirection is necessary to be honest.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This pattern is going to increase the number of useSelect we have. While I didn't measure anything here. I wonder if a single useSelect is in general more performant than multiple ones.
All of this is still a small thing though. I'm fine if you think this makes the code clearer/better.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mostly did this because of the different dependencies of other
useSelectin the code needed.