"Manage all templates" and "Manage all template parts" link not visible on smaller screen size

[annezazu]

Description

Passing on a report from @nomad-skateboarding-dev where on smaller screen sizes the "Manage all templates" and "Manage all template parts" doesn't appear with WP 6.2 and GB 15.5.1.

Step-by-step reproduction instructions

1. Open the Site Editor
2. Navigate to Templates or Template parts
3. Make screen size smaller and notice the manage option disappears for both add new template and add new template part.

Screenshots, screen recording, code snippet

manage.all.templates.mov

Environment info

• WP 6.2
• GB 15.5.1
• TT3
• Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[nomad-skateboarding-dev]

Thank you sincerely @annezazu 🙏

[t-hamano]

I believe that it is not difficult to display those links in smaller screen size. However, if those links were there, I currently see some design and UI issues.

• Two columns look cramped.
• No back button.

• Modal is misaligned and does not fit on screen.

[afercia]

Integrating with some information from #52794 which is a duplicate.

Overall, I'm not sure that hiding functionalities on smaller screens is the best option. That was the trend in the early days of the responsive design era, about 10 years ago, and it proved to be less than ideal. If the reasoning is 'these pages don't look good on smaller screens so we just hide them', then I'd argue the design of these pages isn't ideal in the first place,

After latest updates to the editor, these links are now:

• Manage all pages + page templates
• Manage all of my patterns
• Manage all templates
• Manage all template parts

It is worth mentioning that these links point either to 'classic' administration screens or to new administration pages in the editor.

'Manage all pages' and 'Manage all of My Patterns' point to classic WP admin pages, respectively /wp-admin/edit.php?post_type=page and /wp-admin/edit.php?post_type=wp_blocka. These pages do implement a responsive design, though a bit old. There is no reason to not allow users to access these pages when on smaller screens. In fact, the 'Manage all pages' link is still rendered on smaller screens but the 'Manage all of My Patterns' link is not. This is inconsistent and confusing. As far as I can tell, by hiding 'Manage all of My Patterns', there is no other way to access the related admin page. This seems to me far from ideal.

Manage all templates and Manage all template parts point to new special screens in the editor. These pages layout uses HTML tables to list the templates and template parts. There are a few more problems with these tables reported on other issues. I'd tend to think that is these tables prove to not be the best option then we should probably consider a different implementation. Users, including assistive technology users, just need a quick, efficient way to navigate these lists and get the information they need.

Additionally: HIding these links at an arbitrary viewport width seems less than ideal. For example. as a user of an iPad Mini I could first access the editor in landscape orientation (1024 x 768). The 'Manage all templates' link is visible:

and I can access the Templates list page:

Then I may want to change orientation of my device to portrait (768 x 1024). Suddenly, as @t-hamano reported, there is no navigation panel any longer, no Back button, and the two columns layout starts to be a bit cramped:

Lastly, regarding the footers fixed at the bottom: I would recommend to not use fied positioning in an UI that may contain a long list of items. This proved to be less than ideal because fixed elements hide ohter content. Especially when using a keyboard, there is always a point when the currently focused element is hidden behind the fixed element. That's an usability issue and a pretty serious accessibility issue.

[colorful-tones]

@annezazu do you mind adding a note to the Step-by-step reproduction instructions that the Add a New Template is missing also? Then I can close #53927 (duplicate). But I want to make sure that this detail is not missed when addressed because these issues are somewhat related but in different areas of the same screen (top vs bottom).

[annezazu]

Updated and will close out the other issue.

[t-hamano]

The "Manage all templates" and "Manage all template parts" links have already been removed, but all screens seem to be accessible in the mobile view.

Are there any unresolved problems with this issue?