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

Try adding dynamic page templates to pages section #50630

Merged
merged 15 commits into from
May 30, 2023

Conversation

tellthemachines
Copy link
Contributor

@tellthemachines tellthemachines commented May 15, 2023

What?

Closes #50418.

Adds 404, Search and Homepage if it's set to posts, or Homepage and Blog page if home is set to a static page.

Back buttons are now working (clicking back from a template accessed from the Pages list should go back to Pages). Would appreciate feedback on the implementation though as there might be a better way of doing it.

Testing Instructions

  1. Open site editor and navigate to Pages section
  2. See templates displayed in pages list.
  3. Click into a template, going back should return to Pages list.

Testing Instructions for Keyboard

Screenshots or screencast

Screenshot 2023-05-16 at 4 35 33 pm

@tellthemachines tellthemachines self-assigned this May 15, 2023
@github-actions
Copy link

github-actions bot commented May 15, 2023

Size Change: +844 B (0%)

Total Size: 1.39 MB

Filename Size Change
build/edit-site/index.min.js 65.4 kB +868 B (+1%)
build/edit-site/style-rtl.css 10.9 kB -12 B (0%)
build/edit-site/style.css 10.9 kB -12 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.05 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.23 kB
build/block-editor/content.css 4.23 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/index.min.js 193 kB
build/block-editor/style-rtl.css 15.1 kB
build/block-editor/style.css 15.1 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 126 B
build/block-library/blocks/audio/theme.css 126 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 647 B
build/block-library/blocks/cover/editor.css 650 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/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 159 B
build/block-library/blocks/details/style.css 159 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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/interactivity.min.js 395 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 375 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/interactivity.min.js 783 B
build/block-library/blocks/image/style-rtl.css 1.07 kB
build/block-library/blocks/image/style.css 1.07 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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/editor-rtl.css 2.33 kB
build/block-library/blocks/navigation/editor.css 2.33 kB
build/block-library/blocks/navigation/interactivity.min.js 896 B
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 438 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 450 B
build/block-library/blocks/query/editor.css 449 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 434 B
build/block-library/blocks/search/style.css 432 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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 348 B
build/block-library/blocks/spacer/editor.css 348 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 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 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 403 B
build/block-library/blocks/template-part/editor.css 403 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 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 200 kB
build/block-library/interactivity/runtime.min.js 2.69 kB
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.1 kB
build/block-library/style.css 13.1 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 50.3 kB
build/commands/index.min.js 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/index.min.js 230 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 1.74 kB
build/core-data/index.min.js 15.4 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.24 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 34.6 kB
build/edit-post/style-rtl.css 7.76 kB
build/edit-post/style.css 7.75 kB
build/edit-widgets/index.min.js 17 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 44.6 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.57 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.71 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 875 B
build/plugins/index.min.js 1.84 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 941 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 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.7 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.7 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 2.02 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.42 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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.04 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@jameskoster
Copy link
Contributor

Thanks for putting this together.

Back buttons aren't working as expected on templates (at least, I expected them to go back to pages list 😄 )

Agree this is super-weird, hopefully it's not too troublesome to handle?

I think we're zeroing in on the overall design for this panel. Obviously we wont tackle everything here, but for context:

pages

In terms of this PR, a couple of requests:

  1. Ensure the Home 'page' always appears first in the list of pages (if it doesn't already).
  2. Update the Home item to use the home icon.
  3. Position 404 and Search in a group directly above the save area. It should be fixed and not scroll with the rest of the panel.

Do you intend to handle static home page + posts page in this PR? If so, the static homepage would appear first in the list, with the home icon. The posts page would appear next, with the loop icon. The title for the posts page would be determined by the associated page title:

Screenshot 2023-05-15 at 18 34 34

@jameskoster
Copy link
Contributor

Thanks for the updates we're getting close!

When the homepage is set to display latest posts The Home item shares its title with the corresponding template, IE Front Page -> Home -> Index, which I think works well. The back button works as expected, and the posts page is showing the loop icon 👍

The remaining items seem to be:

  1. (Static) Home page appears at the top of the list, with home icon.
  2. Posts page appears second in the list.
  3. 404 / Search group pinned just above the save area rather than being part of the scrolling list.

@tellthemachines
Copy link
Contributor Author

  • (Static) Home page appears at the top of the list, with home icon.
  • Posts page appears second in the list.

I thought I'd done that, but didn't take into account that the pages returned are only the most recent. Looking into it now!

@tellthemachines
Copy link
Contributor Author

To clarify, do we want to limit the amount of pages we display in addition to home/blog/404/search to only the x most recent? And how many would that be?

@tellthemachines
Copy link
Contributor Author

3. 404 / Search group pinned just above the save area rather than being part of the scrolling list.

Ok, I'm not sure I got this right, it feels a bit weird:

sidebar.mov

I've also set all the pages to display for now, but happy to limit the amount again if needed.

@jameskoster
Copy link
Contributor

To clarify, do we want to limit the amount of pages we display in addition to home/blog/404/search to only the x most recent? And how many would that be?

Yes, we don't have to handle that here though, unless it's trivial. I updated #44461 with the latest designs and some additional tasks, the aforementioned limit being one of them.

Ok, I'm not sure I got this right, it feels a bit weird:

Sorry, I should have been more explicit. 404 / Search should be beneath the Manage All item. But since the latest designs reposition that item in the panel header, perhaps it's not a problem? The spacing looks a little off – there's a larger gap between 404/search compared to other pages. I'll see if I can push some tweaks.

@jameskoster
Copy link
Contributor

I pushed a couple of changes. It's still a bit wonky with the Manage link in it's current placement, but once we remove that everything will be fine:

pages.mp4

The only other tiny detail: I don't think we need the (Front Page), (Posts Page) suffixes – the different icon and prominent placement should be adequate in communicating these pages purpose.

@jameskoster jameskoster requested a review from a team May 18, 2023 18:00
Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

Gave this a run through after looking through all the comments. It's working well for me and goes back to the pages list using both the back chevron and browser back button.

One thing to note, the transition animations don't work well in Safari, but not related to this PR.

@jasmussen
Copy link
Contributor

Fixes #50582. Right? 🎉

@tellthemachines
Copy link
Contributor Author

I pushed a couple of changes. It's still a bit wonky with the Manage link in it's current placement, but once we remove that everything will be fine:

I don't see any changes to this branch, did you push them to the remote?

Given that a wider approach to the back button behaviour is being discussed in #50676, I'm going to revert the hacky fix for it in this PR.

@SaxonF
Copy link
Contributor

SaxonF commented May 24, 2023

@jasmussen this resolves the pages list but still need for the page detail which will be added here

@github-actions
Copy link

github-actions bot commented May 24, 2023

Flaky tests detected in a151d40.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5107560423
📝 Reported issues:

@jameskoster
Copy link
Contributor

I don't see any changes to this branch, did you push them to the remote?

I forgot to push 🙈

This is working well for me outside of two details:

  1. I don't think we need the (Front Page) / (Posts Page) suffixes given the unique icons those pages display
  2. The manage button is oddly positioned. We still don't have a final design for this, so for now maybe we just place it inside the dynamic group, beneath search?

@jameskoster
Copy link
Contributor

I just made those changes, this feels like it's in a decent spot now. What do y'all think?

.edit-site-sidebar-navigation-screen-pages__see-all {
/* Overrides the margin that comes from the Item component */
margin-top: $grid-unit-20 !important;
.edit-site-sidebar-navigation-screen__sticky-section.edit-site-sidebar-navigation-screen__sticky-section {
Copy link
Contributor

@ntsekouras ntsekouras May 24, 2023

Choose a reason for hiding this comment

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

Should we move this here? And probably have a new property(stickyContent or whatever) in SidebarNavigationScreen like we have for content?

Copy link
Contributor

Choose a reason for hiding this comment

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

It would be good to standardise this behavior if possible. We need it in the Page Details panel too, and likely others. You can see Saxon's comment here for the general sidebar spec.

Copy link
Member

Choose a reason for hiding this comment

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

For consistency, I've used this sticky CSS over in the individual page details PR to style the last modified date element — thanks for the pointer @jameskoster — and have moved the style declaration to packages/edit-site/src/components/sidebar-navigation-screen/style.scss as per @ntsekouras comment

Copy link
Contributor Author

Choose a reason for hiding this comment

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

These styles might not be generalisable as-is, especially the gap, unless we're sure they're only ever going to be applied to flex containers.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm going to leave this as is for now, and revisit once #50767 is merged.

Copy link
Member

Choose a reason for hiding this comment

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

I'm going to leave this as is for now, and revisit once #50767 is merged.

Merged!

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thanks for the PR @tellthemachines! I've left some code comments for now, but my sole comment for the UX is that I found a bit off going to templates when I click back, after clicking the home page(that is actually a template).

const homePageIndex = pages?.findIndex(
( item ) => item.id === frontPage
);
const homePage = pages?.splice( homePageIndex, 1 );
Copy link
Contributor

Choose a reason for hiding this comment

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

splice is a mutating method, which means that changes the pages from store. In subsequent calls with the same args(default order), this mutated object will be returned.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is there any downside to that? If the pages are already in the correct order, this logic shouldn't change anything.

Copy link
Contributor

Choose a reason for hiding this comment

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

The downside is:

In subsequent calls with the same args(default date order), this mutated object will be returned.

Someone could use the same underlying query in store from this call:

useEntityRecords( 'postType', 'page', {
	per_page: -1,
} );

in a different component and will get this updated object, where it should still return the default ordering.

The solution could be simple enough by creating a swallow copy of pages.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Got it, will update!


const isHomePageBlog = frontPage === postsPage;

if ( ! isHomePageBlog ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Code here needs pages to have resolved, so we can add this in the if condition.

withChevron
>
{ decodeEntities(
item.title?.rendered
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we end up with no title in these templates? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think so because the dynamic templates should always have a name.

@tellthemachines
Copy link
Contributor Author

Thanks for reviewing @ntsekouras !

but my sole comment for the UX is that I found a bit off going to templates when I click back, after clicking the home page(that is actually a template).

Yeah, I reverted the temporary fix I had for that because it's a wider issue that needs to be addressed as a whole. It's being discussed over in #50676.

@tellthemachines
Copy link
Contributor Author

Ok I think that's all the feedback addressed now! This is ready for another round.

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

Looking pretty good!

Screenshot 2023-05-29 at 2 27 50 pm

Displays my homepage correctly. And when I change my reading settings, the correct icons are shown next to the home page and posts page.

I'm also wondering about how the navigation should work. Templates return me to the templates list, and pages to the pages list.

I know this is the way the route logic is set up, but it seems inconsistent.

edit: Oh I see it's being discussed. I missed that, sorry!

2023-05-29.13.41.17.mp4

Maybe a follow up if we decide to force a return to the page list?

</Truncate>
</PageItem>
) }
{ reorderedPages?.map( ( item ) => {
Copy link
Member

@ramonjd ramonjd May 29, 2023

Choose a reason for hiding this comment

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

Optional, but perhaps this could be simplified with destructuring, and a function to grab the icon.

	const getIcon = ( id ) => { // I don't think we need useCallback here since `frontPage` and `postsPage` won't change after defined.
		if ( id === frontPage ) {
			return home;
		}
		if ( id === postsPage ) {
			return loop;
		}
		return page;
	};

....

{ reorderedPages?.map( ( { id, title } ) => (
	<PageItem
		postId={ id }
		key={ id }
		icon={ getIcon( id ) }
		withChevron
	>
		<Truncate numberOfLines={ 1 }>
			{ decodeEntities( title?.rendered ) ??
				__( '(no title)' ) }
		</Truncate>
	</PageItem>
) ) }

page.title?.rendered
) ?? __( 'Untitled' ) }
item.title?.rendered
) ?? __( '(no title)' ) }
Copy link
Member

Choose a reason for hiding this comment

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

#50767 uses 'Untitled' as fallback.

I have no preference either way, but we should make them the same.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

"no title" is what the pages were already using, this PR only adds a couple more instances. Was changing it to "Untitled" a design requirement? I'm happy with either, but would prefer to address that as a follow-up.

Copy link
Member

Choose a reason for hiding this comment

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

Was changing it to "Untitled" a design requirement?

Not at all, just asking so that I can update the individual page view to match this copy 👍

Copy link
Member

@ramonjd ramonjd May 30, 2023

Choose a reason for hiding this comment

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

PR here: #51074

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

LGTM, thank you @tellthemachines!

@tellthemachines tellthemachines merged commit 0fa988f into trunk May 30, 2023
@tellthemachines tellthemachines deleted the add/dynamic-templates branch May 30, 2023 00:22
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone May 30, 2023
@ndiego ndiego added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Enhancement A suggestion for improvement. labels Jun 7, 2023
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
* Try adding dynamic page templates to pages section

* remove recent heading in pages

* Static homepage case

* Back button should go back to Pages

* Fix order of home and blog pages

* Try fetching all the pages

* Stick templates to bottom

* Stick item positioning

* Revert custom back button behaviour

* Move manage link to dynamic pages group

* Remove home/posts page suffixes

* Address feedback

* Add back truncation

* Copy array for reorder

* Consolidate sticky styles

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
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") 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.

Add dynamic templates to pages list
9 participants