Add a Tour Component

[trymebytes]

What?

Add a site tour to GlotPress to show new users around and also draw attention to new features or improvements.

Why?

It may be difficult for new translators/contributors to get around the different and important features of translation.

How?

To add a tour and tour steps a filter like this can be used:

add_filter( 'gp_tour', function( ) {
	return array(
		'ui-intro' => [
			[
				'title' => 'UI Introduction Tour',
				'color' => '#3939c7',
			],
			[
				'selector' => '.revealing.filter',
				'html' => 'Click here to reveal the search field'
			],
			[
				'reveal' => '.revealing.filter',
				'selector' => '.filters-expanded input.is-primary',
				'html' => 'Click here to search',
			]
		],
		'translation-guide' => [
			[
				'title' => 'How to translate',
				'color' => '#f939c7',
			],
			[
				'selector' => '.source-string',
				'html' => 'This is the English text',
                                 // To add custom css to the tour item selector
                                 'css' => [
					'background' => 'blue',
				],
			],
			[
				'selector' => '.translation-actions .is-primary',
				'html' => 'Submit your translation',
			]
		],
	);
} );

Testing Instructions

Screenshots or screencast

[trymebytes]

Update: The steps as specified in the tour draft have been added.

[pedro-mendonca]

I would like to suggest using a single color for the popover element, e.g. assinging the GlotPress primary color to a new color var: gp-color-tour.

It also needs a few tweaks so that the dashed border doesn't change the UI rendering. I'm not sure if it's a good practice, but I've achieved some good results using a negative margin for the pulse-wrapper.
To test this, set a Tour with popovers in both Projects links (Create new and Projects per Locale) to see how the UI is currently shifting.

Also, instead of having CSS for Previous and Next, might be useful to use a generic CSS for the popover buttons and a primary-button class to highlight the Next.

I'll add a PR for the site-tour branch for you to test.

[trymebytes]

Awesome! Thank you so much for the feedback @pedro-mendonca, looking forward to your PR!

[trymebytes]

@pedro-mendonca I cherry picked and applied some of your commits from your PR here since that branch has diverged significantly, thank you!

[akirk]

You can get stuck on the first step of the tour if the references are missing. While this is technically for WordPress/wordpress.org#172, the tour should be capable of skipping a step if it cannot find the pulse element.

[akirk]

Works now for me!