Hard to navigate back after you have previewed a theme.

[StevenDufresne]

Describe the bug Since the theme preview is a distinct URL, it gets added to browser history.

When I preview a theme, I see a button that says <- Back. When I click that it takes me back to the theme I was viewing. If i want to get back to the original grid, I need to find the breadcrumb to do so which isn't that easy to find. If I click my browser's back button, I will end up in the preview again. This isn't expected because I assume I reversed my navigational course when i clicked the "back" button in the preview.

To Reproduce Steps to reproduce the behavior:

1. Go to wp.org/themes/
2. Choose a category
3. Click on any theme
4. Click preview
5. Click the "back" button in the preview window
6. Click your browser's back button
7. Notice you are back in the preview.

The only way to get back is to click "Theme Directory" and if you do, you lose your original filtering on the grid. So if you do preview, you lose all your progress unless you keep clicking back through the preview which doesn't feel like the right thing to do.

Expected behavior I would expect that clicking back in my browser from the single page would take me back to the grid.

Video https://d.pr/i/xoX6wd

[ryelle]

Generally I think since it's a link, it takes you to a page and adds the history, that makes sense. Plus, using the browser back button from the preview is possible.

On the other hand, in the preview, you could end up with a few history entries. If you view a preview, click a style variation, a pattern, etc, those all add entries to the history (this also makes sense to me, since you might want to browser-back-button to a previous pattern). So we couldn't just do history.back() — to get back to the theme, you need a specific link.

I'm inclined to say the current method is the best of practicality + usability, but if you think people will struggle with this we can brainstorm some other ideas.

Perhaps updating the text to say "Back to the theme" would be more clear that it's a link, not pseudo-browser-button?

[ndiego]

Perhaps updating the text to say "Back to the theme" would be more clear that it's a link, not pseudo-browser-button?

This might work. Any thoughts on this @WordPress/meta-design?

I personally do like that the preview is actually linkable now.

[ryelle]

We discussed this this morning and decided to investigate whether navigation inside the preview could not add history entries, so that the user could use a single "back" to get back to the theme. We also talked about removing the back button itself so the user must use the browser back button— we don't use this "back" concept anywhere else, and if it's not a link then it's just duplicating the browser feature.

I don't think we came to a conclusion, but I'll probably try it in the PR.

[jasmussen]

Perhaps updating the text to say "Back to the theme" would be more clear that it's a link, not pseudo-browser-button?

My immediate instinct was to remove the button and add a "close" X icon button instead. But that makes most sense when you opened something yourself, and in this case you could be linked there.

We could do something much simpler, just an underlined text hyperlink:

← Back to theme

That said, this question inspired me to look at IMDB:

We discussed this this morning and decided to investigate whether navigation inside the preview could not add history entries, so that the user could use a single "back" to get back to the theme.

IMDB does this:

• If you you navigate to a movie, then click the photo gallery, you can browse through as many photos as you like, but the browser "Back" button, and the Close button in the top left, both take you back to the main movie again.
• Interestingly, if you click a deep-link to just that same gallery, the "Close" button gets replaced with a "Home" button. You can even see JS replace it. This link takes you to the IMDB homepage.

We can start with just the hyperlink as suggested. But if you all agree, it could be a good path forward would be to do what IMDB does, but instead of linking to the homepage, linking back to the parent theme. So:

• Visit a theme, click preview:
  • No history entries are added when navigating inside this immersive view
  • Button says "[X] Close" and takes you back to the parent theme.
• Visit the theme preview directly, and the button says "[←] Back to theme" and takes you to the parent theme.

It's kind of the luxury solution, and we can do with less. But something to consider.

[fcoveram]

The flow described above sounds very similar to what we talked about. I pointed out the need for an action closing the previewer to not feel you're trapped in a room after clicking on Preview.

I personally like more the "[X] Close" version than "← Back to theme".

[ryelle]

@jasmussen @fcoveram There's a video on the PR I made after the sync call: #114, how does that look?

[fcoveram]

I shared my thoughts on the PR. Thanks!

[ryelle]

I'm going to close the PR, we've hit some technical limits right now that make this tricky to do without redoing how the preview navigation works. From the PR:

It sounds like this is just a limit of the current history API — you can't read the history entries, or determine where in the stack you are. In the (maybe near) future we should get a cross-browser Navigation API which should help, but it's not implemented in FF or Safari yet.

Given that, I'm inclined to close this PR and leave the current behavior (a normal link) for the Back button. Maybe we can revisit this in a couple months if the Navigation API becomes available, or maybe https://github.com/WordPress/wporg-theme-directory/pull/118 will also change how we do this navigation.

So I'm also going to remove this issue from the redesign launch project, and put it on hold for now.