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

Add home to list of new templates #47389

Merged
merged 2 commits into from
Apr 18, 2023
Merged

Add home to list of new templates #47389

merged 2 commits into from
Apr 18, 2023

Conversation

mikachan
Copy link
Member

What?

Adds 'Home' (home.html) to the list of templates that can be added in the Site editor.

image

Why?

Closes #46325.

The Home template is often used in themes, and without it being included in the default list of templates, it needs to be created manually outside of the Editor.

However, I'm not sure if this highlights the confusion around the Front Page and Home templates too much. This is an existing problem, but perhaps listing the templates so close to each other is even more confusing. Still, I think it would be good to allow this template to be added without needing to leave the Editor. It would be great to know what everyone thinks.

How?

Adds home to DEFAULT_TEMPLATE_SLUGS, and uses the postList icon for the Home icon.

Testing Instructions

  1. Go to the Site editor
  2. Click the + to add a new template
  3. 'Home' should display in the templates list, under Front Page

Testing Instructions for Keyboard

Screenshots or screencast

@mikachan mikachan added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Template Editing Mode Related to the template editor available in the Block Editor labels Jan 24, 2023
@github-actions
Copy link

github-actions bot commented Jan 24, 2023

Size Change: +86 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/edit-site/index.min.js 64.4 kB +86 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.17 kB
build/block-editor/content.css 4.17 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 203 kB
build/block-editor/style-rtl.css 14.6 kB
build/block-editor/style.css 14.6 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 90 B
build/block-library/blocks/archives/style.css 90 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 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 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 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 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 409 B
build/block-library/blocks/columns/style.css 409 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 649 B
build/block-library/blocks/cover/editor.css 651 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details-summary/editor-rtl.css 65 B
build/block-library/blocks/details-summary/editor.css 65 B
build/block-library/blocks/details-summary/style-rtl.css 61 B
build/block-library/blocks/details-summary/style.css 61 B
build/block-library/blocks/details/style-rtl.css 54 B
build/block-library/blocks/details/style.css 54 B
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 138 B
build/block-library/blocks/embed/theme.css 138 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 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 353 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 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 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 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 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/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 281 B
build/block-library/blocks/post-template/style.css 281 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 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 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 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 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 408 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 234 B
build/block-library/blocks/separator/style.css 234 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 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.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.6 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 204 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.8 kB
build/block-library/style.css 12.8 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51.1 kB
build/commands/index.min.js 14.8 kB
build/commands/style-rtl.css 1.1 kB
build/commands/style.css 1.09 kB
build/components/index.min.js 208 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.3 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 718 B
build/data/index.min.js 8.68 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.76 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35 kB
build/edit-post/style-rtl.css 7.59 kB
build/edit-post/style.css 7.58 kB
build/edit-site/style-rtl.css 10.1 kB
build/edit-site/style.css 10.1 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.49 kB
build/editor/style.css 3.48 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 942 B
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

Copy link
Contributor

@jffng jffng left a comment

Choose a reason for hiding this comment

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

This works as advertised.

I assume it was avoided from the original list because of confusion around the name of this template: #44524

Regardless of the name change, I don't think it should prevent us from adding it here.

cc @jameskoster for a gut check and also the icon used.

@jameskoster
Copy link
Contributor

I would dearly love to avoid using "Home" as a single-word title to reduce confusion with Front Page. Should we try "Blog home"?

There's also scenarios that can make the application of this template really confusing. Specifically: homepage is set to display latest posts, and Front Page exists. In this case I don't think home.html will ever be used? Should there be conditions that define whether this template is surfaced in the add-template menu?

@mikachan
Copy link
Member Author

Should we try "Blog home"?

Yes, I think "Blog home" makes sense. Should we just overwrite the template name here, just for the editor? Or do you think this should be changed in Core first? I can try out overwriting the name in this PR, to see how it feels.

Alternative names could be "Blog Posts" or "Blog Posts Index", as that's how it's described in the template hierarchy, but "Blog Home" sounds easier to understand.

Specifically: homepage is set to display latest posts, and Front Page exists. In this case I don't think home.html will ever be used?

Yeah, that's right, front-page.html always overwrites home.html.

Should there be conditions that define whether this template is surfaced in the add-template menu?

I like this idea, could it work something like this:

Blank theme:

  • add-template menu shows both Blog Home and Front Page

Existing theme with a Blog Home (home.html):

  • add-template menu does not show the Front Page template, or
  • add-template shows the Front Page template with a note in the description to say, "will overwrite Blog Home template"

Existing theme with a Front Page (front-page.html):

  • add-template menu does not show the Blog Home template, or
  • add-template menu shows the Blog Home template with a note in the description to say, "will be overwritten by Front Page template"

After reading that through, perhaps we just need to add the overwrite explanations to the template description? If we conditionally show these templates, it makes it more difficult for a user to add them. e.g. it would need to be obvious that Front Page needs to be deleted in order to add a Blog Home template.

Or perhaps instead of the templates being conditionally shown, they're visible but disabled, with a note in the description saying why they're disabled.

@carolinan
Copy link
Contributor

carolinan commented Jan 25, 2023

I feel that being able to add the template without code is more important.
I would be OK with "Blog Home" if you think that the description is not enough.

In the reading settings, the text for changing the content of the home page is

Your homepage displays:

  • Your latest posts
  • A static page

So maybe an option could be "Home: Latest posts"

@mikachan
Copy link
Member Author

Here are a couple of mockups with some of the options mentioned above:

Blog Home Home: Latest posts
image image

@jameskoster
Copy link
Contributor

I quite like "Home: Latest posts".

@carolinan
Copy link
Contributor

@paaljoachim You mentioned that working with the front page was confusing, do you have input on a name for the "Home" template?

@paaljoachim
Copy link
Contributor

paaljoachim commented Jan 26, 2023

EDIT: This is the short version.
The meaning of the word Home can be confusing. The purpose of the template is to show post previews on the front page or the blog page. Two very different locations. Calling the template Post (Preview) template would be more clear I feel. Or perhaps Latest posts template. A variation of what Carolina suggested: Latest Posts. I would remove the word Home from the Template name and instead have the word Home in the template description.

What I find difficult is the Index template and how that is related to Latest posts template.


This is the longer reponse.

NB. I appologize for the length of my reply. I just had to....

First of all let's look at the description of the Home Template.
I will go into the mindset of someone who is not a WordPress geek/nerd like everyone here, me included..:)

"Displays posts on the homepage, or on the Posts page if a static homepage is set."

Who is our audience? Developers? Common users who begins to use Full Site Editing?

Home Template - In it's name it sounds like it is the front page template.

Breaking a part the description (brainstorming the phrases being used.):
"Displays posts on the home page..." --> I thought the Home template would be the full front page template, but here it sounds like it only affects the posts on the home page. But I do not have posts on the front page..... I am confused....

"...or on the Posts page if a static homepage is set." What does that mean? I am again confused.
Ok so the Posts page is my blog page where I have my posts. Even though I might call my blog page news or something else it is still my blog page. I was taught that in WordPress school last week.

A static homepage what is that? What is a dynamic page?

Rethinking.... So the Home template can be used on the Blog page, but the theme Twenty Twenty Three has a Blog template (Alternative).....Hmmmm.
I find it strange that I can actually use the Home template on my Blog page.

Looking at the description again.
"Displays posts on the homepage, or on the Posts page if a static homepage is set."

So the Home template will be used on the home page actually front page if I decide to show posts on the front page. If I do not decide to show posts on the front page but on the Blog page called News then the Home template will be seen on the blog page.

So the Home template is actually a Posts preview template that will be assigned to either the front page or the blog page depending on where the blog posts are seen.

Now I got to do a video recording of the above.... As if feels like a play with words.
Reminds me of the sketch... Who's on first. No Who's on second. With Abbot and Costello.
https://youtu.be/nZ5vspsNS1g

Here is my video:
https://youtu.be/qiQ9jPhfEX0

@carolinan
Copy link
Contributor

carolinan commented Jan 27, 2023

The problem with calling it Latest Posts is that when someone goes looking for the file, it is still called home.html and that will also be confusing.

@mikachan
Copy link
Member Author

The problem with calling it Latest Posts is that when someone goes looking for the file, it is still called home.html and that will also be confusing.

Yes, as we're unable to change the name of the template, I think we need to keep "home" in the title somewhere so it relates to home.html. I think I still prefer "Home: Latest posts".

Thanks for your insights, @paaljoachim! I agree that how these templates work is confusing, especially when the template names are surfaced in the site editor.

What I find difficult is the Index template and how that is related to Latest posts template.

The index template is the default fallback for all templates, so if a home.html or front-page.html doesn't exist, and the reading settings are set to show the latest posts, then the index.html template is used.

@paaljoachim
Copy link
Contributor

Should template names have a specific consistency of something like this?
Home: Latest Posts
Index: Default Posts Fallback
Single: Post
404: Missing page
Etc

I believe we will need to open a new issue where we in general go through Template names. Thinking consistency, language and making these names as logical as possible of what they accomplish. So most users can look at the template names and understand what they do and which template they need to edit.

@carolinan
Copy link
Contributor

What about calling it Latests Posts but mentioning home.html in the description?

@paaljoachim
Copy link
Contributor

So this part is pretty confusing and blurs the clarity of what the Home and Front Page templates are.

Home template
Screenshot 2023-01-30 at 12 47 24

Front Page Template.
Screenshot 2023-01-30 at 12 50 42

Screenshot 2023-01-30 at 12 50 55

The Front Page template is straight forward meant to display the homepage.
The Home template creates confusion as it does not need to be associated with the home page, but can be associated with the blog page. So really this is the Blog page, Latest posts page template and that should be the title. Adding Home to the template creates confusion in relation to the Front page. Again I need to create a naming issue for the templates.

@carolinan
Copy link
Contributor

The template hierarchy limits what can be done. There is no way around that it actually is called home.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jan 30, 2023

It is so very important to use template names/titles we see be as logical as possible. How they were used earlier (coding) and how these will be used today (visual UX/UI) is very different.
I made a new issue for template names. #47551

@jameskoster
Copy link
Contributor

I wonder if there's an opportunity for design to explore alternative implementations for this particular template.

Presented as a template it's confusing, largely because all user interactions center around it behaving like a page. IE it can be your home page, or your posts page. Consequently, it might be worth trying a design that surfaces it in a more intuitive location, e.g. the Pages list, where it can have a more sensible name based on its application.

It's worth noting that this goes for other templates like category-recipes, tag-pizza, as well. So if we can come up with a compelling pattern we can apply it in those instances too.

In that sense this feels related to #44461.

@phil-sola
Copy link

I would love to see this merged and added to core. I spent way to long this morning trying to understand how to set up the blog posts page in FSE. The posts page defined in the reading settings defaults to index which I would never use for this template. You can't add Home confusingly in the editor so the only way to add it is manually create the html file. I couldn't find this documented anywhere either so complete guesswork.

It is crucial this can be added via the site editor going forward IMO. I am also very up for being more explicit in the template name as discussed above instead of simply using 'Home' which is always confusing.

Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

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

Perhaps we can merge this now the description has been updated, and update the name separately. The name may even be less of an issue if we can tackle #48651.

The icon needs some attention, but it's probably ok to tackle that separately too.

@carolinan
Copy link
Contributor

I think this needs a rebase for the final two playwright tests to pass?

@carolinan carolinan merged commit 7917c67 into trunk Apr 18, 2023
@carolinan carolinan deleted the add/new-template-home branch April 18, 2023 10:30
@github-actions github-actions bot added this to the Gutenberg 15.7 milestone Apr 18, 2023
@mikachan
Copy link
Member Author

Thanks for merging this, @carolinan!

@phil-sola
Copy link

Thanks @carolinan, a great addition! 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Template Editing Mode Related to the template editor available in the Block Editor Needs User Documentation Needs new user documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Home template as an option in the 'Add New' menu
7 participants