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.

Sign up for GitHub

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

Jump to bottom

Show Template Parts in Flyout Menu (or similar) #20470

Closed
mtias opened this issue Feb 26, 2020 · 14 comments
Closed

Show Template Parts in Flyout Menu (or similar) #20470

mtias opened this issue Feb 26, 2020 · 14 comments
Labels
[Feature] UI Components Impacts or related to the UI component system Needs Dev Ready for, and needs developer efforts

Comments

@mtias
Copy link
Member

mtias commented Feb 26, 2020

We should find a more scalable way to show template parts as the dropdown could start growing a lot. Either a flyout menu like:

image

Or something like splitting the whole panel with tabs (Templates and Parts).
@mtias mtias added Needs Design Feedback Needs general design feedback. [Feature] UI Components Impacts or related to the UI component system [Feature] Full Site Editing labels Feb 26, 2020
@MichaelArestad
Copy link
Contributor

I'm not sure it is necessary to show the template parts in this menu at all. The included template parts can be selected via the navigator or, with some minor changes to the template part blocks, directly in the editor.

Why not use the inserter to add or create a new template part?

@jasmussen jasmussen mentioned this issue Mar 6, 2020
Open
@mtias
Copy link
Member Author

mtias commented Mar 8, 2020

The selection that occurs from this menu is different since it isolates the template part. It's the equivalent view you'd get by directly loading a single template post type.

@shaunandrews
Copy link
Contributor

Here's an updated mockup with the template parts showing in a submenu, along with the template previews (from #20478) and the theme info (from #20469):

Template Menu

I also tried tabs in the menu, but quickly abandoned it as I found the multiple select/focus states confusing:

image

@shaunandrews
Copy link
Contributor

One thought on the combination of the template previews, and the template part flyout: The position of these elements is different.

  • The previews appear in a fixed position with the hopes of making it easier on your eyes as you scrub between templates.
  • The flyout menu appears relative to its parent menu item.

Does this mixing of positions feel ok?

@shaunandrews
Copy link
Contributor

Also, thinking a little bit about mobile.

We could make the dropdown a fullscreen modal on small devices, and how the template parts inline:

Template Menu Mobile - Full Screen

Alternatively, we could keep the dropdown/flyout interaction the same on mobile, repositioning the flyout menu as needed:

Template Menu Mobile - Flyout

I thought the flyout might be problematic on mobile devices, but when playing with the the above prototype on my phone it actually feels pretty natural.

@MichaelArestad
Copy link
Contributor

MichaelArestad commented Mar 11, 2020 •
edited
Loading

@shaunandrews Could the template parts flyout show up when hovering over a template?

Edit: It's not clear to me if the template parts are part of the selected template or if it is a list of all template parts.

@mtias
Copy link
Member Author

mtias commented Mar 11, 2020

@MichaelArestad list of all so far.

@MichaelArestad
Copy link
Contributor

Ah. Thanks for clarifying @mtias. I think we can move forward with the proposals (without tabs) from @shaunandrews.

@MichaelArestad MichaelArestad added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Mar 11, 2020
@shaunandrews shaunandrews mentioned this issue Mar 11, 2020
Closed
@noahtallen noahtallen self-assigned this Mar 26, 2020
@noahtallen
Copy link
Member

Do we have any existing components which handle flyouts? Do we need to create one?

@mtias
Copy link
Member Author

mtias commented Mar 26, 2020

Not currently. We need to create one.

@noahtallen noahtallen mentioned this issue Mar 30, 2020
Closed
@noahtallen
Copy link
Member

It doesn't look as if the current Popover positioning will be able to handle this style, so I created an issue about improving the API to make it more flexible (#21275). I'm working towards getting a basic flyout working, even if the style doesn't match 100% yet

@noahtallen noahtallen mentioned this issue Apr 10, 2020
Closed
@ockham ockham mentioned this issue Apr 14, 2020
Merged
6 tasks
ockham added a commit that referenced this issue Apr 17, 2020
@ockham
Template Switcher: Add current theme (#21578)
a32e961 
Display the current theme name in the template selector of `edit-site`.

Since the `/themes` endpoint currently only exposes the `theme_supports` field for each theme, this PR adds a number of additional fields to it, using the `rest_prepare_theme` hook. (I also filed a WordPress/wordpress-develop#222 against Core to extend the, err, upstream endpoint accordingly so that we can eventually drop the filter.)

In addition, this PR adds a new `getCurrentTheme` selector and related reducer/resolver/action to `core-data` (including a `themes` reducer for better normalization).

Finally, that selector is used to render the theme name in `edit-site`'s template selector.

The fields I've chosen to add should be sufficient to implement the on-hover previews seen at #20469 (comment).

However, this PR doesn't implement those previews yet, since we need to implement the underlying fly-out menu component first (see #20470).
@youknowriad youknowriad mentioned this issue Apr 17, 2020
Closed
53 tasks
@noahtallen noahtallen removed their assignment May 19, 2020
@vindl
Copy link
Member

vindl commented Jul 29, 2020

Given that we'll likely be removing the template dropdown and replacing it with navigation sidebar (#23939), this issue is probably no longer relevant?

@MichaelArestad
Copy link
Contributor

@vindl let's keep this open for now, but focus on the sidebar. If we can get that sidebar implemented, we can close this out.

@mtias
Copy link
Member Author

mtias commented Mar 3, 2021

This UI has changed quite a bit and is no longer applicable.

@mtias mtias closed this as completed Mar 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] UI Components Impacts or related to the UI component system Needs Dev Ready for, and needs developer efforts
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@shaunandrews @mtias @MichaelArestad @vindl @noahtallen