Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gutenberg integration roadmap #9189

omarreiss opened this issue Mar 12, 2018 · 5 comments

Gutenberg integration roadmap #9189

omarreiss opened this issue Mar 12, 2018 · 5 comments


Copy link

@omarreiss omarreiss commented Mar 12, 2018

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 #9019
  • 1.2 Make sure the replacement variables work with Gutenberg Yoast/gutenberg#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 #9218
  • 2.1.2 Add REST endpoint(s) to save taxonomy metadata

2.2 Frontend

  • 2.2.1 Reactify Snippet preview Yoast/yoast-components#428
  • 2.2.2 Reactify Snippet editor Yoast/yoast-components#460
  • 2.2.3 Reactify Cornerstone content checkbox
  • 2.2.4 Integrate focus keyword in the SEO analysis React component Yoast/yoast-components#475 (taking into account multiple keywords later)
  • 2.2.5 Reactify Social metadata forms
  • 2.2.6 Reactify Advanced metadata form #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 #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 (#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.
Copy link

@IreneStr IreneStr commented Mar 21, 2018

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

React components

Shared between classic editor and Gutenberg


  • Sidebar-metabox toggle

Classic editor-specific

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


  • Premium upsell when wanting to add second keyword


  • Tab manager
  • activeKeywords logic in Redux #9380


  • Disable markings when in Gutenberg #9327
Copy link

@atimmer atimmer commented Apr 3, 2018

Designs can be found here:

Copy link
Member Author

@omarreiss omarreiss commented Apr 19, 2018

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:
screen shot 2018-04-19 at 14 49 04

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.

Copy link

@IreneStr IreneStr commented Jun 26, 2018

8.0 Roadmap



Container components

to connect React components with store


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


  • Remove the feature flag and implement functionality as default behaviour: #10373
  • Remove code that is no longer needed: #10371
Copy link

@moorscode moorscode commented Jul 16, 2018

8.1 Roadmap


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


  • POST, PUT, PATCH for saving meta values like cornerstone content toggle #9519


  • Category name #9355
  • Parent title #9263
  • Custom taxonomy name Yoast/gutenberg#60
  • Primary category --> waiting for primary category component
  • Custom fields --> waiting for REST API research


  • 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? Yoast/yoast-components#627


  • Docking/switching between metbox and sidebar

Longer term


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants