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.

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

[Site Editor]: Expand the template types that can be added - single custom post type and specific posts templates #41189

Merged
merged 20 commits into from
Jun 21, 2022

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented May 20, 2022

What?

Part of: #37407

After exploring the end goal for many new templates from the issue, it become clear to me that we need to do this incrementally. This is why there would be too many changes to review/test properly.

This first iteration handles custom post types only. The approach taken here is the one that we intent to use on Taxonomies, Authors etc..

In this PR if you have registered custom post types you are shown a new menu item in the available templates in site editor.
If this menu item is clicked can show different things depending on some conditions:

  1. If we don't have single-$post_type and we have available posts that don't have a specific template created, it will show a modal with two options to create either of them. You can search through the available posts to create a specific template for it.
  2. If we don't have single-$post_type and we don't have available posts that don't have a specific template created, clicking the menu item will just create the single-$post_type.
  3. If we have single-$post_type and we have available posts that don't have a specific template created, it will show the UI for searching the available posts.
  4. If we have single-$post_type and we don't have available posts that don't have a specific template created, the menu item will not be added.

There are many special case we need to take into account and for this PR is just that we can't have archive-post so we have explicit exclusion. Similar cases will be in the follow ups for page post type, some prioritized specific templates over the generic ones, like category.php, tag.php etc...

Notes

In its current state this PR appends the newly added items at the bottom of the list.

Testing instructions

  1. I'd suggest using the empty theme and register a custom post type to play around in Site Editor and create different templates.
Screen.Recording.2022-06-14.at.12.55.26.PM.mov

@ntsekouras ntsekouras added [Type] Enhancement A suggestion for improvement. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels May 20, 2022
@ntsekouras ntsekouras self-assigned this May 20, 2022
@github-actions
Copy link

github-actions bot commented May 20, 2022

Size Change: +2.55 kB (0%)

Total Size: 1.24 MB

Filename Size Change
build/edit-site/index.min.js 50 kB +1.79 kB (+4%)
build/edit-site/style-rtl.css 8.11 kB +377 B (+5%) 🔍
build/edit-site/style.css 8.09 kB +380 B (+5%) 🔍
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.74 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 6.58 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 151 kB
build/block-editor/style-rtl.css 14.5 kB
build/block-editor/style.css 14.5 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 103 B
build/block-library/blocks/audio/style.css 103 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/button/style-rtl.css 514 B
build/block-library/blocks/button/style.css 514 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 615 B
build/block-library/blocks/cover/editor.css 616 B
build/block-library/blocks/cover/style-rtl.css 1.55 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 110 B
build/block-library/blocks/embed/theme.css 110 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 252 B
build/block-library/blocks/file/style.css 253 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.5 kB
build/block-library/blocks/gallery/style.css 1.49 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 738 B
build/block-library/blocks/image/editor.css 737 B
build/block-library/blocks/image/style-rtl.css 524 B
build/block-library/blocks/image/style.css 530 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.94 kB
build/block-library/blocks/navigation/style.css 1.93 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 393 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 495 B
build/block-library/blocks/post-comments-form/style.css 495 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 628 B
build/block-library/blocks/post-comments/style.css 628 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 605 B
build/block-library/blocks/post-featured-image/editor.css 605 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 369 B
build/block-library/blocks/query/editor.css 369 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 402 B
build/block-library/blocks/search/style.css 403 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 708 B
build/block-library/blocks/site-logo/editor.css 708 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 159 B
build/block-library/blocks/video/style.css 159 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/common-rtl.css 987 B
build/block-library/common.css 984 B
build/block-library/editor-rtl.css 10.2 kB
build/block-library/editor.css 10.2 kB
build/block-library/index.min.js 183 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.5 kB
build/block-library/style.css 11.5 kB
build/block-library/theme-rtl.css 677 B
build/block-library/theme.css 682 B
build/block-serialization-default-parser/index.min.js 1.11 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.9 kB
build/components/index.min.js 228 kB
build/components/style-rtl.css 14 kB
build/components/style.css 14 kB
build/compose/index.min.js 11.7 kB
build/core-data/index.min.js 14.7 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.4 kB
build/customize-widgets/style.css 1.4 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 4.03 kB
build/edit-navigation/style.css 4.04 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.4 kB
build/edit-post/style-rtl.css 7.08 kB
build/edit-post/style.css 7.08 kB
build/edit-widgets/index.min.js 16.4 kB
build/edit-widgets/style-rtl.css 4.39 kB
build/edit-widgets/style.css 4.38 kB
build/editor/index.min.js 38.6 kB
build/editor/style-rtl.css 3.63 kB
build/editor/style.css 3.62 kB
build/element/index.min.js 4.27 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.6 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.38 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 945 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 612 B
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 662 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jameskoster
Copy link
Contributor

What we should do with the new added items? Where to add them(new MenuGroups for example)? How to sort the items.

Imo we can just append them to the existing list (though we may want to tweak the order). We can explore ways to better scale the list separately.

We need to change the current default label/description in Single Post template because it creates the single template, where here we aim to create the single-post and the other post types(single-$postTypeSlug).

Agree. single is a complex template though, I don't even know for sure if we should enable its creation in the UI. In most cases its more intuitive to create single-$posttype.

So what we show in the modal? Should we just go to the search list of all posts? (This is not handled right now).

Yes in these cases we can just skip the first step in the modal, the "Single Post" label on the button still makes sense in both cases.

@jameskoster
Copy link
Contributor

In terms of the current state of this PR:

Screenshot 2022-05-20 at 11 08 32

The labels in the template list should read:

  • Single Post – Displays a single post
  • Post Archive – Displays post category, tag, and date archives (perhaps we can list the taxonomies in the description dynamically?)

The Modal title should read "Add single post template".

I'll see if I can fix the styling issues :)

@ntsekouras
Copy link
Contributor Author

The labels in the template list should read:

There might be more nuances with the labels because there are no existing labels in post types for i18n. Check a relevant comment from @mcsf .

I'll see if I can fix the styling issues :)

Have in mind that the PR is rough now and I didn't even think much about the elements/tags used(ex. p, h3, etc..). We might also want to change that.

@jameskoster
Copy link
Contributor

Pushed some updates:

Screenshot 2022-05-20 at 13 03 24

Button style:

  • Icons + size
  • Radius
  • Spacing
  • Width
  • Hover

Also updated button text to use <Text> and <Heading> for label / description.

@jameskoster
Copy link
Contributor

This is coming together :)

  • I think we should definitely update the existing single template title and description as a part of this PR. It's otherwise too confusing to see two versions of "Single Post" in the template list :D
  • When you create a template, the description should appear in the templates list, currently it does not.
  • It shouldn't be possible to rename templates created in this flow. As things stand I can rename all of them.
  • "Add a template for post type: Post" – We can make this modal title more human-friendly :D Perhaps something like "Add post template".
  • "Use the search form below to find or create a template for a certain Post." – Perhaps something like this would be better: "Select the post you'd like to design a template for"?
  • If there are no entries for a post type we should hide the ability to create a specific template for that post type, otherwise it leads folks to a dead-end.
  • It would be good to try a min height / width on the modal to stop the layout jumping around between steps / loading search results.
  • We should better style mark.
  • I noticed a small issue – the close dialog tooltip is cut off:

Screenshot 2022-05-24 at 13 16 15

@ntsekouras
Copy link
Contributor Author

  • It would be good to try a min height / width on the modal to stop the layout jumping around between steps / loading search results.
  • We should better style mark.

@jameskoster if you find some time can you help a bit with these? Some mockup or even push directly.

It shouldn't be possible to rename templates created in this flow. As things stand I can rename all of them.

This PR will handle that.

I noticed a small issue – the close dialog tooltip is cut off:

This is an unrelated issue and should be handled separately. I think there is a PR already for that.

@jameskoster
Copy link
Contributor

Typo:

Screenshot 2022-05-27 at 12 42 23

Design a template for a all Posts


For the archive template, I got a bit tripped up – I expected to see the general / specific options and had to question why I didn't. Perhaps updating the description a bit would help?

The default template for displaying any $posttype archive


For the Single Post template could we use the Pin icon from the library? The CPT icons are tricky... ideally each one would have a unique icon relating to the post type but I appreciate that might be hard to do. Until then, perhaps "Single $posttype" should use the Pin icon too, and the "$posttype Archive" template could use the File icon (which is ironically a folder 🙈).


I don't actually find the modal dimensions changing to be too problematic. In any case I wonder if min / max height and width should be properties of the modal component itself. As far as this PR goes I think we can leave it as-is.

It would however be good to avoid the search input disappearing when you scroll through results. I'll try some options there, as well as some styles for mark.


Finally, do you think we should include the publish date in the post list when choosing a post to create a template for? Just in case there are multiple posts with the same title.

@jameskoster
Copy link
Contributor

Pushed some updates.

Results now scroll in their own container, ensuring the search input stays visible:

post-modal.mp4

Styled the 'no results' message to avoid some jumpiness:

no-results.mp4

Created a mark-style mixin to style mark.

Screenshot 2022-05-27 at 13 21 43

@mtias
Copy link
Member

mtias commented May 27, 2022

Can't we reuse the link UI for displaying posts / post types / taxonomies / pages? Also #38121

@jameskoster
Copy link
Contributor

Oh yeah, that would be much better.

@ntsekouras ntsekouras force-pushed the add/more-template-types-site-editor branch 2 times, most recently from d7c9de6 to f2eb487 Compare May 30, 2022 08:20
@ntsekouras
Copy link
Contributor Author

Can't we reuse the link UI for displaying posts / post types / taxonomies / pages? Also #38121

When I first started implementing this, I choose not to try with LinkControl because it felt too bloated for our use case and also because some of the design(like the suggestions list) was not finalized and wanted not to be restricted from another component to test/explore this.

Yesterday I looked into this more per @mtias' suggestion and here are my thoughts and observations..

While LinkControl and this search and suggestions list look similar, I think they are quite different because:

  1. it adds previews from links(which we don't need)
  2. it handles existing values with a TextControl (which we don't need)
  3. option to create a new page(which we don't need)
  4. extra settings for links(which we don't need)

These are just the things for LinkControl, so we might used the internal LinkControlSearchInput instead. For that one:

  1. it has specific search results implementation and if we want to to update something we would still need to create a new component for that. In addition I'm not so sure as is the default showing a link would work here for our use cases(example the single-book template what link should show?)
  2. it has options to show a badge about the type((which we don't need because we will show always suggestions of the same type)
  3. it handles searching with URL(which we don't need IMO and I'm not sure how we could match URL to template)
  4. it handles searching with multiple types(which we don't need)
  5. we need to implement custom searching algorithm even if we would copy most of the defaults of the link component(is tightly coupled with block-editor store and we are in the edit-site)
  6. we would need to update the default implementation of fetchLinkSuggestions(currently used) as we need to pass extra arguments like exclude for the existing templates.
  7. fetchLinkSuggestions uses apiFetch so it always makes requests, while here we are using the cache mechanisms of getEntityRecords selector.

Maybe there are more, but after exploring this for a while yesterday, I thought I would post here and see how we'll move forward.

So, is our intent to just have the same styles with LinkControl? If yes, we can do this and keep the existing implementation(which is ready in this PR). We could even revisit this after a while, especially after implementing the other template options(like author, taxonomies, etc...). In that case we would have to keep in sync the styles between the two.

If we were to use LinkControl or LinkControlSearchInput based on my above comments, we would still have to sync at least the search algorithm implementation details, probably the custom suggestions list component and maybe some styles. So it's not something we use in all places and we forget about it.

@jameskoster
Copy link
Contributor

I wont comment on the tech side, but I do think the styles should match. I'm happy to work on that if we decide to continue with the current implementation.

@ntsekouras ntsekouras force-pushed the add/more-template-types-site-editor branch from a759339 to 72f9f83 Compare June 21, 2022 07:47
@ntsekouras ntsekouras merged commit 41c7450 into trunk Jun 21, 2022
@ntsekouras ntsekouras deleted the add/more-template-types-site-editor branch June 21, 2022 08:36
@github-actions github-actions bot added this to the Gutenberg 13.6 milestone Jun 21, 2022
@jameskoster
Copy link
Contributor

Exciting to see this merged! :)

I wonder if "Entry" might be a better term than "Item"?

@ntsekouras
Copy link
Contributor Author

I wonder if "Entry" might be a better term than "Item"?

I'll. quickly iterate on the other templates, so we can revisit there 😄

@mtias
Copy link
Member

mtias commented Jun 21, 2022

Thanks for all the tweaks along the way :)

@dweuste
Copy link

dweuste commented Jul 19, 2022

Is it okay to leave a comment saying I'm so glad this was added?

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 3, 2022
@mburridge mburridge added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Sep 14, 2022
@mburridge
Copy link
Contributor

Added the Needs Dev Note label in case this needs a dev note (either individual or as part of a "misc" dev note) for WP 6.1 release.

@ntsekouras ntsekouras mentioned this pull request Sep 16, 2022
89 tasks
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 20, 2022
…e content.

This commit improves site editor templates by:

* Adds a post meta `is_wp_suggestion` to templates created from the site editor.

Why? To differentiate the templates created from the post editor in the Template panel in inspector controls and the templates suggested in site editor.

See [WordPress/gutenberg#41387 Gutenberg PR 41387] for more details.

* Expands the template types that can be added to the site editor to include single custom post type and specific posts templates.

See [WordPress/gutenberg#41189 Gutenberg PR 41189] for more details.

* Adds fallback template content on creation in site editor:
   * Introduces `get_template_hierarchy()` to get the template hierarchy for a given template slug to be created.
   * Adds a `lookup` route to `WP_REST_Templates_Controller` to get the fallback template content.

See [WordPress/gutenberg#42520 Gutenberg PR 42520] for more details.

* Fixes a typo in default category template's description within `get_default_block_template_types()`.

See [WordPress/gutenberg#42586 Gutenberg PR 42586] for more details.

* Changes field checks from `in_array()` to `rest_is_field_included()` in `WP_REST_Post_Types_Controller`.
* Adds an `icon` field to `WP_REST_Post_Types_Controller`

Follow-up to [53129], [52331], [52275], [52062], [51962], [43087].

Props ntsekouras, spacedmonkey, mamaduka, mburridge, jameskoster, bernhard-reiter, mcsf, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54269 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 20, 2022
…e content.

This commit improves site editor templates by:

* Adds a post meta `is_wp_suggestion` to templates created from the site editor.

Why? To differentiate the templates created from the post editor in the Template panel in inspector controls and the templates suggested in site editor.

See [WordPress/gutenberg#41387 Gutenberg PR 41387] for more details.

* Expands the template types that can be added to the site editor to include single custom post type and specific posts templates.

See [WordPress/gutenberg#41189 Gutenberg PR 41189] for more details.

* Adds fallback template content on creation in site editor:
   * Introduces `get_template_hierarchy()` to get the template hierarchy for a given template slug to be created.
   * Adds a `lookup` route to `WP_REST_Templates_Controller` to get the fallback template content.

See [WordPress/gutenberg#42520 Gutenberg PR 42520] for more details.

* Fixes a typo in default category template's description within `get_default_block_template_types()`.

See [WordPress/gutenberg#42586 Gutenberg PR 42586] for more details.

* Changes field checks from `in_array()` to `rest_is_field_included()` in `WP_REST_Post_Types_Controller`.
* Adds an `icon` field to `WP_REST_Post_Types_Controller`

Follow-up to [53129], [52331], [52275], [52062], [51962], [43087].

Props ntsekouras, spacedmonkey, mamaduka, mburridge, jameskoster, bernhard-reiter, mcsf, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54269


git-svn-id: http://core.svn.wordpress.org/trunk@53828 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Sep 20, 2022
…e content.

This commit improves site editor templates by:

* Adds a post meta `is_wp_suggestion` to templates created from the site editor.

Why? To differentiate the templates created from the post editor in the Template panel in inspector controls and the templates suggested in site editor.

See [WordPress/gutenberg#41387 Gutenberg PR 41387] for more details.

* Expands the template types that can be added to the site editor to include single custom post type and specific posts templates.

See [WordPress/gutenberg#41189 Gutenberg PR 41189] for more details.

* Adds fallback template content on creation in site editor:
   * Introduces `get_template_hierarchy()` to get the template hierarchy for a given template slug to be created.
   * Adds a `lookup` route to `WP_REST_Templates_Controller` to get the fallback template content.

See [WordPress/gutenberg#42520 Gutenberg PR 42520] for more details.

* Fixes a typo in default category template's description within `get_default_block_template_types()`.

See [WordPress/gutenberg#42586 Gutenberg PR 42586] for more details.

* Changes field checks from `in_array()` to `rest_is_field_included()` in `WP_REST_Post_Types_Controller`.
* Adds an `icon` field to `WP_REST_Post_Types_Controller`

Follow-up to [53129], [52331], [52275], [52062], [51962], [43087].

Props ntsekouras, spacedmonkey, mamaduka, mburridge, jameskoster, bernhard-reiter, mcsf, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54269


git-svn-id: https://core.svn.wordpress.org/trunk@53828 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
…e content.

This commit improves site editor templates by:

* Adds a post meta `is_wp_suggestion` to templates created from the site editor.

Why? To differentiate the templates created from the post editor in the Template panel in inspector controls and the templates suggested in site editor.

See [WordPress/gutenberg#41387 Gutenberg PR 41387] for more details.

* Expands the template types that can be added to the site editor to include single custom post type and specific posts templates.

See [WordPress/gutenberg#41189 Gutenberg PR 41189] for more details.

* Adds fallback template content on creation in site editor:
   * Introduces `get_template_hierarchy()` to get the template hierarchy for a given template slug to be created.
   * Adds a `lookup` route to `WP_REST_Templates_Controller` to get the fallback template content.

See [WordPress/gutenberg#42520 Gutenberg PR 42520] for more details.

* Fixes a typo in default category template's description within `get_default_block_template_types()`.

See [WordPress/gutenberg#42586 Gutenberg PR 42586] for more details.

* Changes field checks from `in_array()` to `rest_is_field_included()` in `WP_REST_Post_Types_Controller`.
* Adds an `icon` field to `WP_REST_Post_Types_Controller`

Follow-up to [53129], [52331], [52275], [52062], [51962], [43087].

Props ntsekouras, spacedmonkey, mamaduka, mburridge, jameskoster, bernhard-reiter, mcsf, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54269 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Core REST API Task Task for Core REST API efforts [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.