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 templates list page for site editor #36379

Merged
merged 14 commits into from
Nov 19, 2021
Merged

Add templates list page for site editor #36379

merged 14 commits into from
Nov 19, 2021

Conversation

kevin940726
Copy link
Member

@kevin940726 kevin940726 commented Nov 10, 2021

Description

Implemented part of the design in #29630 (comment). Close #35994. Close #36352.

This is a big change as it implements a new screen. Though there are still lots of TODOs I intentionally left out for the sake of easier reviews and so that we can divide and conquer.

  • Some styles can definitely be improved/refined (needs design)
  • "Add New" button hasn't been implemented
  • "Actions" button for each template item hasn't been implemented
  • "Added By" column hasn't been implemented
  • The "Styles" link won't toggle the styles tab
  • Flash of the WP admin menu when navigating
  • The screen is not responsive (needs design)
    • Collapse the nav panel on smaller screens
  • Some dead code hasn't been deleted yet
  • "No templates found" screen is not styled
  • Navigating could be very slow, implementing the screen in SPA style could help
  • Make the template row clickable (and add hover styles)
  • The APIs are not preloaded
  • Hide the wp-admin nav bar on small screens
  • Accessibility review
  • Make the UX of "Remove template" nicer. (Can it be optimistic?)

If you want to work on any of the above, feel free to open another PR, or directly push changes to this PR.

How has this been tested?

  1. Activate tt1-blocks theme
  2. Go to Appearance -> Editor
  3. Click on the WP menu
  4. Go to "Templates" and "Template Parts"

Screenshots

Kapture.2021-11-11.at.01.29.25.mp4

Types of changes

New feature

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@kevin940726 kevin940726 added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Full Site Editing labels Nov 10, 2021
@github-actions
Copy link

github-actions bot commented Nov 10, 2021

Size Change: -2.54 kB (0%)

Total Size: 1.1 MB

Filename Size Change
build/block-library/blocks/navigation/style-rtl.css 1.58 kB +17 B (+1%)
build/block-library/blocks/navigation/style.css 1.57 kB +18 B (+1%)
build/block-library/index.min.js 162 kB +2 B (0%)
build/block-library/style-rtl.css 10.5 kB +17 B (0%)
build/block-library/style.css 10.5 kB +18 B (0%)
build/edit-site/index.min.js 30.2 kB -2.93 kB (-9%)
build/edit-site/style-rtl.css 6.26 kB +164 B (+3%)
build/edit-site/style.css 6.25 kB +157 B (+3%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
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 139 kB
build/block-editor/style-rtl.css 14.4 kB
build/block-editor/style.css 14.4 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 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 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 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 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 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.19 kB
build/block-library/blocks/cover/style.css 1.19 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 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 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.62 kB
build/block-library/blocks/gallery/style.css 1.62 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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 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 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 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-submenu/style-rtl.css 213 B
build/block-library/blocks/navigation-submenu/style.css 213 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.89 kB
build/block-library/blocks/navigation/editor.css 1.89 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
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 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 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 273 B
build/block-library/blocks/paragraph/style.css 273 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/style-rtl.css 444 B
build/block-library/blocks/post-comments-form/style.css 444 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 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 771 B
build/block-library/blocks/post-featured-image/editor.css 771 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 391 B
build/block-library/blocks/post-template/style.css 392 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 378 B
build/block-library/blocks/pullquote/style.css 378 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 262 B
build/block-library/blocks/query-pagination/editor.css 255 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 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 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 397 B
build/block-library/blocks/search/style.css 398 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 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 770 B
build/block-library/blocks/site-logo/editor.css 770 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 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 824 B
build/block-library/blocks/social-links/editor.css 823 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 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 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/editor-rtl.css 9.97 kB
build/block-library/editor.css 9.97 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/index.min.js 214 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.9 kB
build/core-data/index.min.js 13.2 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.42 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.6 kB
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.8 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.57 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.86 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.65 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 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@jameskoster
Copy link
Contributor

This is cool to see :) I know it's incomplete, but here's some initial thoughts:

When you navigate away from the initial editing view in this environment, it's not clear how to get back. Clicking Styles will get you there, but that's not obvious. I've added an "Editor" link as a placeholder, but this needs some refinement (The "Editor" title followed immediately by an "Editor" link is a bit 🥴). I couldn't get the active state working either.

Some styles can definitely be improved/refined

Happy to help with this :)

Navigating could be very slow, implementing the screen in SPA style could help

This feels especially bad right now, mostly due to the flash of wp-admin you see between page loads which is very disorienting.

Template previews hasn't been implemented

What did you have in mind here? I'm not sure we need them. Same goes for pagination – it seems unlikely that sites will contain so many templates we need to paginate – at least not initially.

@jameskoster
Copy link
Contributor

I've added an "Editor" link as a placeholder, but this needs some refinement (The "Editor" title followed immediately by an "Editor" link is a bit 🥴)

Changed "Editor" to "Site" which feels like a step in the right direction, and speaks to the "Site Editor" terminology we've all gotten accustomed to :) Easily changed of course.

* @return bool True for Site Editor pages, false otherwise.
*/
function gutenberg_is_edit_site_list_page() {
return isset( $_GET['postType'] ) && ! isset( $_GET['postId'] );
Copy link
Member

Choose a reason for hiding this comment

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

Could you not use get_screen or similar.

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not sure what you mean here? Sorry I'm not really familiar with PHP 😅 .

Copy link
Member

Choose a reason for hiding this comment

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

I don't think we can. These are query arguments on the Site Editor page.

@kevin940726
Copy link
Member Author

This feels especially bad right now, mostly due to the flash of wp-admin you see between page loads which is very disorienting.

Agreed. I pushed some changes to preload API requests and prevent the jump of the UI. Hopefully it's a lot smoother now, but still not near to be fast. We can explore SPA approach in another PR.

What did you have in mind here? I'm not sure we need them. Same goes for pagination – it seems unlikely that sites will contain so many templates we need to paginate – at least not initially.

Yeah, I'm not sure we need them either, especially for pagination. I wonder what others think of previews though?

@kevin940726
Copy link
Member Author

@jameskoster What do you have in mind for the "Actions" menu in the list for each item? What do we want to have in there? Additionally, should only the name of the item be a link, or should we make the whole row clickable?

@jameskoster
Copy link
Contributor

jameskoster commented Nov 11, 2021

Agreed. I pushed some changes to preload API requests and prevent the jump of the UI. Hopefully it's a lot smoother now, but still not near to be fast. We can explore SPA approach in another PR.

It's feeling much better now :)

For the actions:

  • Templates generated by a user from scratch should be deletable.
  • Templates supplied by themes and plugins, that have been customised by a user, should be resettable.

In the future, all templates should be duplicatable to create a new general template, but I don't think we need that right away.

@jameskoster
Copy link
Contributor

I've refactored the markup so that this view uses a list rather than a table, which made styling for mobile a bit simpler.

One thing we need to address is how the nav functions on mobile because this isn't great:

Screenshot 2021-11-11 at 12 31 17

It might be better for the nav to:

  1. Be hidden automatically when the screen is below a certain width
  2. "Push" the content area over (so that it retains its natural width) rather than "squashing" it.

@jameskoster
Copy link
Contributor

jameskoster commented Nov 11, 2021

One simple solution for the nav may be to set the content area min width to 100% on smaller screens. That way it gets "pushed over" on smaller screens, and collapsed on larger screens, like so:

nav.mp4

A related thought – the admin bar appearing on smaller screens is kind of disruptive, we should probably hide that, just as we hide the admin bar on larger screens.

@kevin940726
Copy link
Member Author

kevin940726 commented Nov 11, 2021

I've refactored the markup so that this view uses a list rather than a table, which made styling for mobile a bit simpler.

I'm afraid that it won't be accessible this way? I could be wrong though. What's specifically been made simpler if it's a list? We could however add those aria roles back though.

@jameskoster
Copy link
Contributor

Which aria roles? 🤔 Lists are just way more flexible, and semantically seem appropriate for this use case.

@kevin940726
Copy link
Member Author

Which aria roles? 🤔 Lists are just way more flexible, and semantically seem appropriate for this use case.

The name and the theme are no longer mapped to the header for instance. There's only a visual clue now but they aren't semantically connected. I'd defer to a11y experts for this though 😅 .

@jameskoster
Copy link
Contributor

The name and the theme are no longer mapped to the header for instance. There's only a visual clue now but they aren't semantically connected. I'd defer to a11y experts for this though 😅 .

Ah, yeah I'm not 100% sure on this, but it seems easily fixable if necessary.

"No templates found" screen is not styled

Considering how uncommon this is likely to be, I don't think we need to elaborate on it for this PR. Here's how things look currently:

Screenshot 2021-11-15 at 14 16 01

@jameskoster
Copy link
Contributor

Collapse the nav panel on smaller screens

I pushed a change that sets the nav to open on desktop, and closed on mobile. I don't know if it's possible to do this on window resize, if so that would be awesome, but otherwise this seems like an adequate fallback.

Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

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

Really impressive work here @kevin940726! Let's merge this and work on the follow-up tasks during coming week. We'll need the important items merged by November 26.

),
} ) }
href={ addQueryArgs( '', {
page: 'gutenberg-edit-site',
Copy link
Member

Choose a reason for hiding this comment

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

This JavaScript code will end up in Core where the site editor will be at site-editor.php, not themes.php?page=gutenberg-edit-site. This code needs to be updated to add postType to the current location.href.

Copy link
Member

Choose a reason for hiding this comment

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

Fix here: #36705

href={ addQueryArgs( '', {
page: 'gutenberg-edit-site',
// TODO: We should update this to filter by template part's areas as well.
postType: template.type,
Copy link
Member

@noisysocks noisysocks Nov 22, 2021

Choose a reason for hiding this comment

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

It's typical in WordPress that URL query params (and PHP variables more widely) use snake_case, not camelCase.

Copy link
Member Author

Choose a reason for hiding this comment

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

It has already been using camelCase before even having the focus mode, I'm not sure why it's the case though.

Copy link
Member

Choose a reason for hiding this comment

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

Oh I see. Let's leave it then.

@noisysocks noisysocks removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 22, 2021
noisysocks pushed a commit that referenced this pull request Nov 22, 2021
* Add edit site list page

* Add Editor navigation item

* Editor -> Site

* Remove style: closed

* Preload some API requests

* Default to is-fullscreen-mode

* style and markup refactor

* Set a min width on the content area for smaller screens

* Always hide the admin bar

* Set the nav to closed on small screens

* formatting

* Add action to remove template from the list

* Rebase and fix conflicts

* Fix styles typo

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
wp_enqueue_style( 'wp-edit-site' );
wp_enqueue_media();

$template_type = $_GET['postType'];
Copy link
Member

@noisysocks noisysocks Nov 22, 2021

Choose a reason for hiding this comment

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

We need to bail here if an invalid postType is provided, otherwise a malicious bit of HTML can be output when it is interpolated into the wp.editSite.initializeList below.

Fix: #36706

@youknowriad
Copy link
Contributor

The site editor in WP trunk seem to be failing for me right now, I think it's because the backend is using initializeEditor and the frontend is still using initialize (packages not updated) right?

@noisysocks
Copy link
Member

noisysocks commented Nov 25, 2021

@youknowriad: Have you updated Core trunk? This was updated recently.

https://core.trac.wordpress.org/changeset/52232#file3

@youknowriad
Copy link
Contributor

@noisysocks for me the backend was correct (initializeEditor) but not the frontend (still using initialize). Maybe it was just a testing issue 🤷‍♂️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Priority] High Used to indicate top priority items that need quick attention
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Disable quick edit for templates Update Appearance > Templates to list all templates
9 participants