For GlotPress and thus translate.wordpress.org, Polyglots contributors @spiraltee and @amieiro, with the help of @piermario and @lidialab (thank you!), created a tour that is a bit different than tours that you’d usually encounter. Often, tours pop in your face when you visit a website for the first time. This tour indicates its starting point using a glowing dot. You can just ignore it (for now) if you are not interested.
During the tour, that element of the web page will be highlighted like this:
Since the Polyglot contributors got good feedback about this tour and its potential applicability to other areas of Make WordPress, they then collaborated with Meta contributors @psrpinto and me (@akirk) to convert this tour into a dedicated plugin, simply called Tour, and added an easy way to create such tours (similar like you might know the Inspector of browser developer tools).
In order to restart a tour that you already completed (or dismissed), and for better accessibility, there is also a Masterbar menu to start the tours that are visible on the current page:
There is also a shortcode and an “Available Tours” Gutenberg block that allows you to embed the list of tours in a place of your choosing on the website so that there is also an additional path of starting a tour for people who are not logged in (and thus don’t see a Masterbar).
Demos
To demo this, we created two videos, one to show what it’s like to go through a tour, and one to show how to create a tour. Finally, a screenshot to show what updating a tour looks like.
Taking a Tour (Video)
Creating a Tour (Video)
Updating a Tour (Screenshot)
Also note that tours are a custom post type with revisions, so you can undo any changes. While creating, testing, and editing a tour, you can keep it as a draft so that it won’t be visible to users who cannot see drafts.
The Tour plugin is not yet in the plugin directory but you can download the ZIP file from Github and install it on any WordPress site.
On Make WordPress, we have activated the plugin on the Meta and the Polyglots P2 and we’d be happy to activate it on other Make teams if they want to use it on their own P2 for whatever they feel it could be useful.
Accessibility
I’d like to give a special invitation to the +make.wordpress.org/accessibility/ team to try the tour and let us know which improvements we’d need to make to make it more accessible. We think that an important aspect to start with is that it doesn’t open up automatically and gets in the way of people who were trying to do something different in the first place. The underlying driver.js library had in the past made some strides to make it accessible and per suggestion from @joedolson, we have added alternative ways (such as the Masterbar or Gutenberg block) to start tours.
Try It On this P2
We have created a first tour here on the Meta P2 (see the logo in the blue bar at the top of the page, or start it using the Masterbar). It is just a very quick demo, we’ll probably expand it in future. You can take it to get an idea of how such a tour could work and if you’d like to discuss with your own Make team whether you’d like to try it out as well. Please reach out in the comments!