Description
openedon May 3, 2021
The WordPress block editor (Gutenberg) should indicate if the current post is a draft based on an Idea Hub idea.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
- When editing a WordPress post that has Idea Hub idea metadata set in the block editor (Gutenberg), a notice like in this Figma file should be displayed on top of the editor.
- The copy used should actually differ from the Figma design and say: This post was created from an idea you picked in Site Kit's Idea Hub: {idea} The bold "Google Site Kit" prefix from the Figma design should not be included.
- The notice should be dismissible. When dismissed, that dismissal should be cached temporarily for an hour, it doesn't need to be persistently stored. Editing a particular post doesn't happen all the time, and it's okay to remind the user again if they open the same post in the editor after a while.
- This functionality should rely on the Gutenberg Notice API.
- The entire integration should be implemented in a separate JS file that is loaded only in the block editor (from the
Idea_Hub
class in PHP), if necessary for the current post. Other than typical for Site Kit JS code, the code here should actually rely on WordPress's included versions of@wordpress/*
dependencies (e.g. referencewp.data
instead of@wordpress/data
, and includewp-data
in the dependencies for the asset in PHP) and not come with any of our own bundled dependencies, to not double-load dependencies and minimize the footprint in the block editor.
Implementation Brief
PHP
- Edit the
Asset
class:- Add the following constants to the class:
CONTEXT_ADMIN_GLOBAL = 'admin-global'
CONTEXT_ADMIN_POST_EDITOR = 'admin-post-editor'
CONTEXT_ADMIN_POSTS = 'admin-posts'
CONTEXT_ADMIN_SITEKIT = 'admin-sitekit'
- Add
'load_contexts' => array( self::CONTEXT_ADMIN_SITEKIT ),
to the array of default values for the$args
property. - Add a new public method
has_context( $context )
that returnsTRUE
if the incoming$context
exists in the$this->args['load_contexts']
array.
- Add the following constants to the class:
- Update the
enqueue_assets
method of theModule_With_Assets
interface to accept$context = Asset::CONTEXT_ADMIN_SITEKIT
argument. - Edit the
enqueue_assets
method of theModule_With_Assets_Trait
trait to have the same new$context = Asset::CONTEXT_ADMIN_SITEKIT
argument and to filter out assets that don't have provided context before enqueueing assets. - Add a new hook for the
enqueue_block_editor_assets
action in theAssets::register
method to enqueue registered gutenberg assets. UseAssets::get_assets()
method to return registered assets and filter out assets that don't support theCONTEXT_ADMIN_POST_EDITOR
context. - Edit the
Idea_Hub::setup_assets
method to define a new Script for thedist/js/googlesitekit-idea-hub-notice.js
with theCONTEXT_ADMIN_POST_EDITOR
context andwp-data
as a dependency.
JS
-
Create
assets/js/googlesitekit-idea-hub-notice.js
which has theshowIdeaHubNotice
function and the file which will be enqueued in the block editor only. -
Update
webpack.config.js
to add a new entry for the above file similar toanalytics-advanced-tracking
. -
The
showIdeaHubNotice
function should do the following:- Check if the current post has idea hub metadata via the
getEditedPostAttribute
selector ofcore/editor
data store. As per the IB,wp.data
should be used. For e.g:const postMeta = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' );
- The following meta keys should be present and not empty to identify an idea hub post:
googlesitekitpersistent_idea_name
googlesitekitpersistent_idea_text
googlesitekitpersistent_idea_topics
- Import the
setItem
andgetItem
fromassets/js/googlesitekit/api/cache.js
. - Use the
getItem
function to check if there is an item in local storage with the keymodules::idea-hub::dismissed-editor-notice-<post_ID>
where<post_ID>
is the ID of the currently edited post. To get the current post ID, query thecore/editor
data store via thegetCurrentPostId
selector. - If
cacheHit
isfalse
from the result ofgetItem
, then the user has not dismissed the notice. The Gutenberg notice API will be used to display the notice but theonDismiss
callback did not work until recently. To circumvent that, we can create listen to data store changes checking whether the notice is still present on the page or has been dismissed. - To display the notice:
- Use the Gutenberg notice API to create an info dismissable notice as per the designs in Figma by using the
createInfoNotice
action of thecore/notices
data store. For e.g:
wp.data.dispatch( 'core/notices' ).createInfoNotice( 'My custom notice', options ); // options is an object
- The text for the notice should be as per the second bullet point from the AC where
{idea}
is the value from the post meta with thegooglesitekitpersistent_idea_text
key. - The
id
of the notice should begooglesitekit-idea-hub-notice
. - Since we want to know when the user dismisses the notice and the
onDismiss
property does not work, listen to the data store to see if the notice is still present.- Define a function,
hasNotice
which returnstrue
if the notice id defined in the previous bullet point is in the list of notices. To get the list of notices, use thegetNotices
selector of thecore/notice
data store. - Define another function,
handleDataChange
change, which checks whetherhasNotice
returnstrue
. If this is the case, then the notice is currently being displayed on the page. IfhasNotice
returnsfalse
, this means that the user has dismissed the notice. In that case, do the following:- Use the
setItem
to set the keymodules::idea-hub::dismissed-editor-notice-<post_ID>
to havetrue
as value. - We can only pass the
key
andvalue
parameters to thesetItem
function since the default parameters set the expiry for the item in local storage to 1 hour.
- Use the
- Listen to the changes to the data store using the
subscribe
function ofwp.data
, passinghandleDataChange
as parameter. Thesubscribe
function returns a unsubscribe function used to stop the subscription. This should occur in thehandleDataChange
function whenhasNotice
returnsfalse
.
- Define a function,
- Use the Gutenberg notice API to create an info dismissable notice as per the designs in Figma by using the
- If
cacheHit
istrue
from the result ofgetItem
, do not do anything. It means that the user has seen the notice and dismissed it in the past hour.
- Check if the current post has idea hub metadata via the
-
POC for listening to data changes: Show Idea Hub context for post based on Idea Hub idea in WordPress block editor / Gutenberg #3272 (comment)
Test Coverage
- No new tests to be added.
Visual Regression Changes
- N/A
QA Brief
To the engineer writing the QA Brief: Similar to #3271, this issue should be testable by our QA team and not require QA: Eng
. Include a sample datastore call to do in the browser console (e.g. window.googlesitekit.data.dispatch( 'modules/idea-hub' ).createIdeaDraftPost( ... )
) so that a draft post is created that can then be checked.
Changelog entry
- Add the Idea Hub notification to the WordPress block editor