Add template creation for post format archives#78872
Conversation
Follows the practice that is used by the existing template modal files.
Addressing issue mentioned during code review. From Claude: Fix unnecessary re-creation of post format entry point by wrapping its onClickMenuItem callback in useCallback, preventing the entryPoint useMemo from busting on every render,
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Pull request overview
Enables creating block templates for post format archive pages from the “Add template” flow in the Site Editor, aligning post format support with other archive/template creation entry points.
Changes:
- Adds a “Post Format Archives” entry point in the “Add template” modal and a follow-up view for selecting supported post formats.
- Introduces
usePostFormatMenuItemsto derive supported/available post format archive templates based on theme supports and existing templates. - Implements the UI across the three template creation flows (legacy, template activation, and routes-based editor).
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tools/eslint/suppressions.json | Adds ESLint suppression entries for new modal content files. |
| routes/template-list/add-new-template/utils.ts | Adds post format constants/types and usePostFormatMenuItems for the routes-based flow. |
| routes/template-list/add-new-template/index.tsx | Wires the post format entry point into the routes-based “Add template” modal. |
| routes/template-list/add-new-template/add-post-format-template-modal-content.tsx | New routes-based modal content listing available post formats. |
| routes/template-list/add-new-template/add-custom-template-modal-content.tsx | Adjusts containerRef typing to allow null. |
| packages/edit-site/src/components/add-new-template/utils.js | Adds usePostFormatMenuItems for the template-activation flow. |
| packages/edit-site/src/components/add-new-template/index.js | Wires post format entry point + modal view into the template-activation “Add template” modal. |
| packages/edit-site/src/components/add-new-template/add-post-format-template-modal-content.js | New modal content listing available post formats (template-activation flow). |
| packages/edit-site/src/components/add-new-template-legacy/utils.js | Adds usePostFormatMenuItems for the legacy flow. |
| packages/edit-site/src/components/add-new-template-legacy/index.js | Wires post format entry point + modal view into the legacy “Add template” modal. |
| packages/edit-site/src/components/add-new-template-legacy/add-post-format-template-modal-content.js | New modal content listing available post formats (legacy flow). |
| const onClickPostFormatMenuItem = useCallback( | ||
| ( { postFormats } ) => { | ||
| setPostFormats( postFormats ); | ||
| }, | ||
| [ setPostFormats, onClickPostFormats ] | ||
| ); |
|
Size Change: +920 B (+0.01%) Total Size: 8.21 MB 📦 View Changed
ℹ️ View Unchanged
|
| } from '@wordpress/components'; | ||
| import { decodeEntities } from '@wordpress/html-entities'; | ||
| import { useState, memo, useRef, useEffect } from '@wordpress/element'; | ||
| import { |
There was a problem hiding this comment.
@ellatrix it seems this was missed in the renaming of components related to the templates activation experiment. This is not legacy right now and is confusing.
| import { useViewportMatch } from '@wordpress/compose'; | ||
| import { focus } from '@wordpress/dom'; | ||
|
|
||
| function AddPostFormatTemplateModalContent( { |
There was a problem hiding this comment.
This file seems to be identical with the one in the experiment. It feels like we could keep this one here for now (where the folder should be renamed) and import from the folder for the experiment. If something diverges we could then keep separate copies.
| const isMobile = useViewportMatch( 'medium', '<' ); | ||
|
|
||
| // Focus the first focusable element when the component mounts. | ||
| useEffect( () => { |
There was a problem hiding this comment.
Why do we need this?
If there is a solid reason, shouldn't the logic live in the parent modal?
| * with `entryPoint` (the grid button, or `null` if nothing to show) and | ||
| * `availableFormats` (the list of format templates that can still be created). | ||
| */ | ||
| export function usePostFormatMenuItems( onClickMenuItem ) { |
There was a problem hiding this comment.
I guess we could have a single util added and reused (similar to this), since it seems this function and its internal deps are identical between the current and the experiment flows.
Not a strong opinion though because this file has diverged a bit..
It's so easy for the logic to drift with so many places (two experiments) - not from this PR of course.
There was a problem hiding this comment.
Yeah we need to make a final decision about what should be covered. Maybe the routes changes should be completely removed.
There was a problem hiding this comment.
I know that experiment (in routes) has diverged a bit, but since you already have the code changes I'd say keep them there.
| } else if ( modalContent === modalContentMap.customGenericTemplate ) { | ||
| modalTitle = __( 'Create custom template' ); | ||
| } else if ( modalContent === modalContentMap.postFormats ) { | ||
| modalTitle = __( 'Post Format Archives' ); |
There was a problem hiding this comment.
We should probably not capitalize every word.
| function useMissingTemplates( | ||
| setEntityForSuggestions, | ||
| onClickCustomTemplate, | ||
| setPostFormats, |
There was a problem hiding this comment.
Do we really need both new props? It feels like the formats could be read from usePostFormatMenuItems inside AddPostFormatTemplateModalContent.
What?
Closes #66664
Make it possible for users to create block templates for post format archives.
Why?
Partial post format support has already been added, but template creation was missing.
How?
The PR adds a new option for creating archive templates for post formats from the Editor > Templates > Add Template option.
It adds a new modal content that lists the post formats that are supported by the theme.
Step 1 shows that post format archive templates can be created:

Step 2 lists which post format archive templates that can be created:

There are currently three template creation flows: legacy and the two experiments, template activation and extensible site editor. Meaning, the code is repeated three times and we need to test all three.
The extensible site editor -the routes, does not seem to work fully, the templates can be created, but not edited.
Note that this is for archives only, not single view, since that would require a change to the template hierarchy and is a separate issue.
Testing Instructions
First, activate a block theme with support for post formats, for example Twenty Twenty-Five.
Create at least one post that you assign the video post format. Add any content so that you can recognize the post.
Legacy
Go to Gutenberg > Experiments and make sure that you do NOT have Template Activation or Extensible Site Editor enabled.
Go to Appearance > Editor > Templates.
Select Add template.
Navigate to the "Post Format Archives" button using your keyboard. Activate it (enter or space).
Use the tab key to move one step forward. Confirm that the focus is on the close button.
(From now you can continue using the mouse or whatever you prefer)
Select and create the Video post format archive.
When the block editor opens there should be a popup that suggest using a specific pattern. This should be the themes default archive template.
Edit the template so that you can see the difference between this template and the default archive. Save.
Now go to the front to view that the template is working: /type/post-format-video/
Go to Appearance > Editor > Templates.
Confirm that you can edit or delete the post format archive template. Delete it.
Template activation
Go to Gutenberg > Experiments and enable Template Activation.


Follow all steps as above but notice that during creation, you have more templates to choose from:
Confirm that the post format template can be activated:
Confirm that the post format template can be duplicated and deleted.
Extensible Site Editor
(This is the "routes" file changes):
Go to Gutenberg > Experiments and disable Template Activation and enable Extensible Site Editor.
Follow all steps as above.
You will not be able to edit the template because eh, the route does not exist. I don't know if this is expected at this point of the experiment, any help welcome.
Use of AI Tools
Claude, with code reviews from Copilot and Codex.