Gutenberg integration roadmap

[omarreiss]

Below I've written out a roadmap for our integration. These things are pretty much by order in which they should be done, but can mostly also be done in parallel. When the content analysis is ready to be included in the sidebar for instance, we should just do it. The rest can remain in the metabox while needed.

Higher level priorities

• Feature parity sidebar and analysis metabox section: 1, 2.1.1, 2.2.1, 2.2.2
• Content analysis in sidebar: 1, 2.1.1, 2.2.3, 2.2.4, 3.1, 3.9, 7.1
• Snippet preview in screen takeover: 1, 2.1, 2.2.1, 2.2.2, 3.3, 4.2, 7.1, 7.2

1. Basic integration (Metabox)

• 1.1 Make sure the content analysis works with Gutenberg Integrate Gutenberg data API subscription #9019
• 1.2 Make sure the replacement variables work with Gutenberg https://github.com/Yoast/gutenberg/issues/44
• 1.3 Make sure slug editing works with Gutenberg
• 1.4 Make sure the content markings work with Gutenberg
• 1.5 Make sure the look of the metabox is consistent between classic and Gutenberg.

2. Prepare for native integration

2.1 Backend

• 2.1.1 Add REST endpoint(s) to save post metadata Create REST API endpoint for indexables #9218
• 2.1.2 Add REST endpoint(s) to save taxonomy metadata

2.2 Frontend

• 2.2.1 Reactify Snippet preview Implement Snippet Preview yoast-components#428
• 2.2.2 Reactify Snippet editor Implements the snippet editor in React yoast-components#460
• 2.2.3 Reactify Cornerstone content checkbox
• 2.2.4 Integrate focus keyword in the SEO analysis React component Implement an SEO analysis component yoast-components#475 (taking into account multiple keywords later)
• 2.2.5 Reactify Social metadata forms
• 2.2.6 Reactify Advanced metadata form Reactify Advanced settings tab #14433
• 2.2.7 Autosave metadata using REST endpoints.
• 2.2.8 Move featured image validation to an assessment for now.

2.3 Premium

• 2.3.1 Reactify Social previews (Premium)
• 2.3.2 Reactify Insights section (Premium)
• 2.3.3 Reactify Internal linking suggestions section (Premium)

2.4 Add-ons

• 2.4.1 Reactify News SEO metabox section
• 2.4.2 Reactify Video SEO metabox section
• 2.4.3 Reactify WooCommerce SEO metabox section
• 2.4.4 Create Gutenblocks for Local SEO shortcodes.

3. Plugin Sidebar

• 3.1 Move content analysis to sidebar Move content analysis to sidebar #9205
• 3.2 Add Help center trigger to sidebar (UI in screen takeover)
• 3.3 Add Snippet preview trigger to sidebar (UI in screen takeover)
• 3.4 Add Social metadata trigger to sidebar (UI in screen takeover)
• 3.5 Add Advanced metadata trigger to sidebar (UI in screen takeover)
• 3.6 Add a slot to our sidebar where we can render more things.
• 3.7 Add Internal linking suggestions section to sidebar (Premium)
• 3.8 Add Insights widget to sidebar (Premium)
• 3.9 Add support for multiple keywords in sidebar (Premium)

4. Plugin Screen takeover

• 4.1 Add Help center to screen takeover
• 4.2 Add Snippet preview to screen takeover
• 4.3 Add Social metadata to screen takeover
• 4.4 Add Advanced metadata to screen takeover
• 4.5 Have a way to add more forms to our screen takeover (Slot/fill)

5. Pré publish workflow.

• 5.1 Come up with a non-obtrusive way to warn folks if their content isn't optimized yet.
• 5.2 Show overall SEO and readability score

6. Editor Sidebar

• 6.1 Create custom category widget which includes primary category functionality.

7. Extensibility API's (in Gutenberg)

• 7.1 Sidebar
• 7.2 Screentakeover
• 7.3 Annotations
• 7.4 Publish overlay
• 7.5 Plugin overlay
• 7.6 Register plugin
• 7.7 Modals

8. Gutenblocks

• 8.1 Subpages and siblings (Gutenberg blocks for subpages and siblings #6663)
• 8.2 Breadcrumbs
• 8.3 Read next (Premium)
• 8.4 Related posts based on internal links (Premium)

9. Classic editor overhaul

• 9.1 Create custom sidebar metabox which works in the same way as the Gutenberg one. To be designed.

[IreneStr]

Content analysis in the sidebar

@atimmer and I were discussing what the content analysis in the sidebar should look like. We came up with the following proposal:

What should it look like?

The analysis should move to the sidebar:

• In Gutenberg: the plugin sidebar
• In the classic editor: a metabox on the righthand side

In the sidebar:

• Focus keyword (multiple in Premium)
• Results: readability and (multiple) SEO
• Cornerstone toggle
• Insights (Premium)

Remaining in metabox:

• Snippet preview and social tab are combined on one tab. Three subtabs: Google logo, Facebook, Twitter
• Advanced tab

Technical needs

This will be a separate release. We're planning on making these changes in a feature branch before merging them in trunk.

Redux store

• Focus keywords Add focus keywords to redux state #9306
• Cornerstone checkbox Add cornerstone to the redux state #9328
• Over-all scores readability and SEO Add overall scores to the redux state #9308
• Active sections Change activeKeyword in store to activeSections #9305
• Insights (Premium) Yoast/wordpress-seo-premium/issues/1667
• Internal linking suggestions Yoast/wordpress-seo-premium/issues/1671
• Backport Gutenberg data API store registration and access to classic editor Backport Gutenberg data API store registration and access #9329

React components

Shared between classic editor and Gutenberg

• Insights component
• Results component
• Refactored analysis collapsible component Refactor analysisCollapsible to contain a text link button yoast-components#451
• Sidebar component: containing all sections Implement sidebar container component yoast-components#452
• Keyword inputfield component, including comma separated keywords warning (see [Feature Request] Add warning that Focus Keyword is not comma separated #9179 (comment))

Gutenberg-specific

• Sidebar-metabox toggle

Classic editor-specific

• Collapsible header Implement collapsible header component for classic editor sidebar yoast-components#436

Container components

to connect React components with store

• Cornerstone checkbox container
• Results container --> one per keyword + one for readability
• Insights container
• Sidebar container --> regulates which sections are rendered and active/opened. In this stadium, multiple collapsible can be expanded at the same time.
• Internal linking suggestions container

Modals:

• Premium upsell when wanting to add second keyword

Deletions:

• Tab manager
• activeKeywords logic in Redux Remove activeKeywords and related logic when moving to sidebar #9380

Miscellaneous

• Disable markings when in Gutenberg Hide marker buttons when in Gutenberg #9327

[atimmer]

Designs can be found here: https://github.com/Yoast/roadmap/issues/5.

[omarreiss]

Updated the roadmap with a few tweaks. Most importantly, feature parity in the metabox is going to be an objective after all. We will probably hold on to the metabox for a little longer, even if we have a sidebar, since it will be a very big change for users if that will be gone and right now it's too important in how discoverable our plugin is on the editor.

This means we want to support both a metabox and a sidebar, at least in the beginning. Once we have both. We want to hide the metabox when the sidebar is toggled and vice versa. The metabox toolbar should have a "Dock to sidebar" button which opens the sidebar.

I'm thinking something like this:

When the sidebar is closed, the metabox is toggled back on etc.

Once we have this, we might consider removing the metabox at some point, but it's important to take it slow and allow users to get used to all the changes that are coming at them.

[IreneStr]

8.0 Roadmap

Researching

• Is data availble for the category, parent_title and custom taxonomies replacevars, either in Gutenberg itself or via the REST API? https://github.com/Yoast/gutenberg/issues/72
• Possible to retrieve custom fields using REST API? https://github.com/Yoast/gutenberg/issues/71
  • There is no endpoint yet. We're trying to get it in Core: Should WP Core "Custom Fields" UI be present by default? WordPress/gutenberg#3228 Otherwise, we’ll have register our own endpoint.
• Slug editing scenarios: https://github.com/Yoast/gutenberg/issues/66
  • Slug editing is buggy when writing a new post in Gutenberg that hasn't been saved as a draft or published yet. See Changing Permalinks on new posts WordPress/gutenberg#7144 and Permalinks: cannot define post/page permalink until after clicking Save Draft WordPress/gutenberg#7129
• Default pinning of plugin sidebar by the plugin itself https://github.com/Yoast/gutenberg/issues/70

Components

• Sidebar 'empty canvas with title'
• SEO and readability analysis components, including focus keyword field Implement an SEO analysis component yoast-components#475
• Synonym field Add Synonyms component yoast-components#625
• Collapsible heading with icon Create a collapsible header with icon yoast-components#654
• Collapsible heading with icon and keyword Create a collapsible header with keyword and icon yoast-components#653
• Cornerstone content toggle Implement a cornerstone toggle component #10267
• Cornerstone content section: Implement the cornerstone toggle section #10178
• Help text
• Internal linking (premium)
• Insights (premium)

Container components

to connect React components with store

• SEO analysis container Create an SEO analysis container #10303
• Readability analysis container Create and implement a readability analysis container #10304
• Cornerstone checkbox container Implement cornerstone content checkmark connector #10302
• Insights container (premium) https://github.com/Yoast/wordpress-seo-premium/issues/1854
• Internal linking suggestions container (premium) https://github.com/Yoast/wordpress-seo-premium/issues/1854
• Sidebar container --> regulates which sections are rendered and active/opened. In this stadium, multiple collapsible can be expanded at the same time. Implement sidebar container component yoast-components#452

Other

• Only when the metabox is enabled in the settings, the sidebar should be registered.
• Remove internal linking metabox (premium) https://github.com/Yoast/wordpress-seo-premium/issues/1830
• Persisting settings from sidebar: cornerstone content Implement cornerstone content checkmark connector #10302
• Persisting settings from sidebar: focus keyword (syncing from/to metabox)
• Use the correct pin icon Use the correct pin icon for the Gutenberg sidebar #10295
• Connect sidebar to hidden fields - Connect the hidden fields to the React stores #10374
• Default opened sections: snippet preview + 1st focus keyword+cornerstone`
• Slug updating: https://github.com/Yoast/gutenberg/issues/67

Finalizing

• Remove the feature flag and implement functionality as default behaviour: Remove the Sidebar Feature flag #10373
• Remove code that is no longer needed: Persist feature toggle: clean up unused code #10371

[moorscode]

8.1 Roadmap

Gutenberg

• Modal: https://github.com/Yoast/gutenberg/issues/63
• Make it possible to retrieve a post data object (containing taxonomy data needed for replacevars) using a resolver in the data module.

Backend

• POST, PUT, PATCH for saving meta values like cornerstone content toggle Create REST API endpoint for PATCH, POST and PUT indexables #9519

Replacevars

• Category name Use Gutenberg data for %%category%% replacevar #9355
• Parent title Retrieve parent_title using REST API #9263
• Custom taxonomy name https://github.com/Yoast/gutenberg/issues/60
• Primary category --> waiting for primary category component
• Custom fields --> waiting for REST API research

Components

• Snippet editor in screen takeover
• Social previews in screen takeover
• Robots in screen takeover
• Synonym field
• Primary category picker
• Buttons: Settings, Dock below content and Need help? Create a sidebar button component yoast-components#627

Other

• Docking/switching between metbox and sidebar

Longer term

Gutenberg

• Annotations (@atimmer)