Wp-calypso: Theme Showcase: No longer a link to theme demo site from showcase page

[zoeth]

Steps to reproduce

1. Starting at URL: https://wordpress.com/theme/mellow
2. Click Open Live Demo
3. Look for link to theme demo site at top of live demo modal
4. See it isn't there :(

What I expected

I was trying to find the actual theme demo site in order to help a user set up this theme on their site. Specifically, I was looking for how to display a Page title when the static front page is using the 'Home' template.

What happened instead

I couldn't find a link to the the theme demo site, but was instead directed to it by a colleague.

Browser / OS version

Chrome, Windows 10

Screenshot / Video

http://cld.wthms.co/ZzfMi8

Context / Source

It has been discussed in this ticket https://github.com/Automattic/wp-calypso/issues/20664 that not linking to the theme test site may be an intentional design choice, but for users wanting to set up the theme, it may be really useful to view that page using the inspector.

[kathrynwp]

Modal Window Before

Modal Window Now

The removal of any link to view the demo in a new window adds even more extra steps to a process that already took too many clicks for both Happiness Engineers and customers, as I brought up in #20664. With the complete removal of the button, most users are now not able to get to the full demo site at all. Viewing the full demo site is essential for HEs to troubleshoot issues, open its back end to look at setup, see the theme at specific screen sizes, and many other reasons. It is also helpful for users.

[ehti]

+infinity to what @kathrynwp said.

It was already quite a bit of overhead and clicking to get to theme's demo. IMO, we should implement what's suggested in #20664 and make the demo link available in showcase, directly.

[nielslange]

@hafizrahman mentioned a great workaround: Right click on the logo to open the page in a new window. It's pretty much the same effort as clicking the old link.

[kathrynwp]

Good workaround.

I have an Alfred shortcut set up, which avoids going to the showcase page entirely. In case it helps anyone:

query: http://{query}demo.wordpress.com
keyword: demo

Example: demo smallbusiness takes you to https://smallbusinessdemo.wordpress.com/

Unfortunately neither of these really helps our users, who can't be expected to go to know our tricks.

[benchilcote]

As an HE, the removal of the live demo link has been frustrating over the past few days as I use these links multiple times a day. The workaround is great and I can use that now.

I'm adding a comment here to also express my support of adding the direct link to theme demos from the showcase page. I do see the benefit of the live demo in an overlay/popup, with a few viewing options for the user to test out. However, I believe some users will want the option to view the website in it's own window to see what their website might look like normally.

Adding a direct link to the live demo in the Theme Info Overlay would be the best solution, in my opinion. Thanks!

[designsimply]

It looks like it's still supposed to be there but perhaps went away around the same time the masterbar was hidden from the Editor view, see https://github.com/Automattic/wp-calypso/blame/0a86163336f969b080e16016d540fec483aacc53/client/components/web-preview/toolbar.jsx#L144-L154

^{Seen at https://wordpress.com/theme/mellow using Chrome 63.0.3239.84 on Mac OS X 10.13.1.}

cc @shaunandrews @lsinger (because you last edited related files)

[Lochlaer]

@kathrynwp

I have an Alfred shortcut set up, which avoids going to the showcase page entirely. In case it helps anyone:
query: http://{query}demo.wordpress.com
keyword: demo

I think that works for most themes, but not all. For example, Port's demo is actually at:

https://portthemedemo.wordpress.com/

I only learned this when I manually typed in portdemo.wordpress.com this morning and got a random user's site, so I just guessed that it was portthemedemo. :-)

+1000 in bringing this back! One major reason why I prefer it is because sometimes I really can't figure out how a theme demo is set up just by reading the setup instructions, and having quick access to the theme demo's admin site with a couple of clicks is super useful during a 1:1.

[kathrynwp]

I think that works for most themes, but not all.

Indeed. There are a handful of themes where the standard demo URL was already taken when the theme was launched, so we had to add the word "theme."

[msilbers]

This change is pretty inconvenient for me when chatting. I'm very used to opening up the theme demo to check customization options and to send the demo right to the customer. I'm actually confused about Niels' workaround, what logo are we clicking once on a theme page? I'm unable to find a way to open it up anywhere on a theme page.

The users surely will not have an Alfred workflow for this. I hope we get the link back soon! Or implement what's described in #20664