Add Idea Hub feature tour on WordPress posts page

Feature Description

In addition to #3524, another feature tour should showcase the possible Idea Hub interactions on the WordPress posts page.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

A new tooltip tour ideaHubPostsTable should be displayed on the WordPress admin posts list table if the ideaHubModule feature flag is enabled. Additional requirements to show the tooltip:

• The Idea Hub module is active.
• The user has successfully completed Idea Hub setup.
• The user has created at least one draft from Idea Hub

Tooltip

• Position: point to the first saved draft entry on the Posts page
• Heading: Get started writing about your saved ideas
• Body: Drafts you created from Idea Hub within Site Kit appear here for easy access.

Note that this will require to load the feature tooltip infrastructure on a non-Site Kit screen for the first time. The JS files to do that should for now only be loaded if necessary (i.e. if the above conditions are fulfilled and if the above feature tour hasn’t been dismissed yet).

Implementation Brief

Our high level approach is as follows:

1. Add a tooltip tour and a new tooltip tour type (context) for posts list.
2. Add dependencies to our existing JS file on the edit.php screen to run the tooltip tour checkRequirements(). and to render the <FeatureTour />
3. Create a container for rendering a js app.
4. Add classes to each row of a draft idea hub post so that we can attach a tour to it.
5. Render our tooltip tours on the edit.php screen

Before you begin, keep in mind that you may need to further update either the javascript file or dependencies list to add any missing javascript dependencies we need for loading the functionality as you progress with the execution of this ticket.

Here’s how we achieve it:

• Rename js/googlesitekit-idea-hub-post-list-notice.js to js/googlesitekit-idea-hub-post-list.js:

  • in includes/Modules/Idea_Hub.php
  • in webpack.config.js

• In includes/Modules/Idea_Hub.php

  • For the script 'googlesitekit-idea-hub-post-list-notice' (which we just renamed to googlesitekit-idea-hub-post-list) add to the dependencies: ‘googlesitekit-modules-idea-hub’. This will give our selectors in the checkRequirements to follow.
  • In the register() function, in is_connected, add a filter for post_class which will be used as the anchor point for the tooltip tour - https://developer.wordpress.org/reference/hooks/post_class/
    • Confirm that the post type = post and we are on the edit-post of get_current_screen()->id (see the implementation of admin_notice_idea_hub_ideas)
    • Confirm that the post type is a draft and an idea post (see the implementation in display_post_states hook in the same file).
    • If both checks above are true, add the class googlesitekit-idea-hub__draft
  • In the register() function, in is_connected, add a hook for admin_footer which will be used to render the <FeatureToursDesktop /> component:

add_action('admin_footer', function() { echo '<div id="js-googlesitekit-post-list" class="googlesitekit-page"></div>';  } );

• Edit googlesitekit/constants.js

  • Add a new constant export const VIEW_CONTEXT_POSTS_LIST = 'postsList'; - this will be the context for tours on the edit posts page.

• In our renamed js/googlesitekit-idea-hub-post-list.js render the react app:

  • import { render } from '@wordpress/element';
  • import { FeatureToursDesktop } from './components/FeatureToursDesktop';
  • In existing domReady(), render the react component as follows:

const renderTarget = document.getElementById( 'js-googlesitekit-post-list' );
  	render(
		<FeatureToursDesktop viewContext={ 'VIEW_CONTEXT_POSTS_LIST' } />,
		renderTarget,
	);

• Create a new file assets/js/feature-tours/idea-hub-posts-table.js ( For reference, you can take a look at assets/js/feature-tours/idea-hub-module.js from #3524 ) that exports an object with the following properties:

  • slug should be ideaHubPostsTable;
  • contexts should be an array with VIEW_CONTEXT_POSTS_LIST value;
  • version should be 1.36.0; - with an @TODO - change this version if the launch version for the feature changes.
  • checkRequirements should check the following:
    • At least one element with class googlesitekit-idea-hub__draft exists.
    • Idea Hub Module is active Data.select( CORE_MODULES ).isModuleActive( 'idea-hub' ) (console: window.googlesitekit.data.stores["core/modules"].selectors.isModuleActive('idea-hub'))
    • The user has successfully completed Idea Hub setup. - Data.select( CORE_MODULES ).isModuleConnected( 'idea-hub' ) (window.googlesitekit.data.stores["core/modules"].selectors.isModuleConnected('idea-hub'))
    • There are “draft” posts from idea hub ideas. Data.select( MODULES_IDEA_HUB ).getDraftPostIdeas() (window.googlesitekit.data.stores['modules/idea-hub'].selectors.getDraftPostIdeas())
  • steps should be an array with ONE item:
  1. • target selector: .googlesitekit-idea-hub__draft we added this class via the hook earlier.
     • title should be as per the AC Heading
     • content should be as per the AC Body
     • placement top (this may need to be adjusted once you have the feature tour loading to figure out the optimal placement)

• Add your tour to assets/js/feature-tours/index.js, loading it conditionally based on whether or not the feature flag ideaHubModule is enabled.

Add new storybook story for the tooltip tour, reference the following as an example: https://google.github.io/site-kit-wp/storybook/main/?path=/story/global--tourtooltips

Test Coverage

• Update backstop VRT to cover the new tooltip tour.

Visual Regression Changes

• Added new tests as above.

QA Brief

• Make sure you have no idea posts yet
• Go to the posts page and verify that no feature tour is displayed
• Create a new draft post using any idea
• Go to the posts page again and confirm that you see the new feature tour for your newly created post.

Changelog entry

• Add feature tour for Idea Hub drafts to the post list table in WP admin.

[ivankruchkoff]

@wpdarren, here’s what we need to test:

1. idea hub active and setup.
2. draft post created
3. tours not yet dismissed, with the testing plugin ( Site Kit by Google – Test Idea Hub connection ) you can visit /wp-admin/?idea-hub-reset
4. open the post edit screen /wp-admin/edit.php and you should see the feature tour.

When I went through these steps, here’s what my feature tour looked like:

if the feature tour isn’t showing up, a couple of things to check via console to debug (on the post edit screen from step 4 above):

• is the container for the js app available? we can test this via document.getElementById( 'js-googlesitekit-post-list' );
• is an idea hub draft post visible? we can test this via document.querySelector( '.googlesitekit-idea-hub__post' )

[eugene-manuilov]

@aaemnnosttv @felixarntz this is ready for another round of code review.