Gutenberg integration roadmap

omarreiss commented 6 years ago

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

[x] Feature parity sidebar and analysis metabox section: 1, 2.1.1, 2.2.1, 2.2.2
[x] Content analysis in sidebar: 1, 2.1.1, 2.2.3, 2.2.4, 3.1, 3.9, 7.1
[x] 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)

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

2. Prepare for native integration

2.1 Backend

[x] 2.1.1 Add REST endpoint(s) to save post metadata #9218
[x] 2.1.2 Add REST endpoint(s) to save taxonomy metadata

2.2 Frontend

[x] 2.2.1 Reactify Snippet preview https://github.com/Yoast/yoast-components/pull/428
[x] 2.2.2 Reactify Snippet editor https://github.com/Yoast/yoast-components/pull/460
[x] 2.2.3 Reactify Cornerstone content checkbox
[x] 2.2.4 Integrate focus keyword in the SEO analysis React component https://github.com/Yoast/yoast-components/issues/475 (taking into account multiple keywords later)
[x] 2.2.5 Reactify Social metadata forms
[x] 2.2.6 Reactify Advanced metadata form https://github.com/Yoast/wordpress-seo/issues/14433
[ ] 2.2.7 Autosave metadata using REST endpoints.
[ ] 2.2.8 Move featured image validation to an assessment for now.

2.3 Premium

[x] 2.3.1 Reactify Social previews (Premium)
[x] 2.3.2 Reactify Insights section (Premium)
[x] 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

[x] 3.1 Move content analysis to sidebar https://github.com/Yoast/wordpress-seo/issues/9205
[x] 3.2 Add Help center trigger to sidebar (UI in screen takeover)
[x] 3.3 Add Snippet preview trigger to sidebar (UI in screen takeover)
[x] 3.4 Add Social metadata trigger to sidebar (UI in screen takeover)
[x] 3.5 Add Advanced metadata trigger to sidebar (UI in screen takeover)
[x] 3.6 Add a slot to our sidebar where we can render more things.
[x] 3.7 Add Internal linking suggestions section to sidebar (Premium)
[x] 3.8 Add Insights widget to sidebar (Premium)
[x] 3.9 Add support for multiple keywords in sidebar (Premium)

4. Plugin Screen takeover

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

5. Pré publish workflow.

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

6. Editor Sidebar

[x] 6.1 Create custom category widget which includes primary category functionality.

7. Extensibility API's (in Gutenberg)

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

8. Gutenblocks

[x] 8.1 Subpages and siblings (#6663)
[ ] 8.2 Breadcrumbs
[ ] 8.3 Read next (Premium)
[x] 8.4 Related posts based on internal links (Premium)

9. Classic editor overhaul

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

IreneStr commented 6 years ago

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

[x] Focus keywords #9306
[x] Cornerstone checkbox #9328
[x] Over-all scores readability and SEO #9308
[x] Active sections #9305
[x] Insights (Premium) Yoast/wordpress-seo-premium/issues/1667
[x] Internal linking suggestions Yoast/wordpress-seo-premium/issues/1671
[x] Backport Gutenberg data API store registration and access to classic editor #9329

React components

Shared between classic editor and Gutenberg

[x] Insights component
[x] Results component
[x] Refactored analysis collapsible component https://github.com/Yoast/yoast-components/issues/451
[x] Sidebar component: containing all sections https://github.com/Yoast/yoast-components/issues/452
[x] Keyword inputfield component, including comma separated keywords warning (see https://github.com/Yoast/wordpress-seo/issues/9179#issuecomment-378182987)

Gutenberg-specific

[ ] Sidebar-metabox toggle

Classic editor-specific

[x] Collapsible header https://github.com/Yoast/yoast-components/issues/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 https://github.com/Yoast/wordpress-seo/issues/9380

Miscellaneous

[x] Disable markings when in Gutenberg #9327

atimmer commented 6 years ago

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

omarreiss commented 6 years ago

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 commented 6 years ago

8.0 Roadmap

Researching

[x] 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
[x] 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: https://github.com/WordPress/gutenberg/issues/3228 Otherwise, we’ll have register our own endpoint.
[x] 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 https://github.com/WordPress/gutenberg/issues/7144 and https://github.com/WordPress/gutenberg/issues/7129
[x] Default pinning of plugin sidebar by the plugin itself https://github.com/Yoast/gutenberg/issues/70

Components

[x] Sidebar 'empty canvas with title'
[x] SEO and readability analysis components, including focus keyword field https://github.com/Yoast/yoast-components/issues/475
[x] Synonym field https://github.com/Yoast/yoast-components/pull/625/
[x] Collapsible heading with icon https://github.com/Yoast/yoast-components/issues/654
[x] Collapsible heading with icon and keyword https://github.com/Yoast/yoast-components/issues/653
[x] Cornerstone content toggle https://github.com/Yoast/wordpress-seo/issues/10267
[x] Cornerstone content section: https://github.com/Yoast/wordpress-seo/issues/10178
[x] Help text
[x] Internal linking (premium)
[x] Insights (premium)

Container components

to connect React components with store

[x] SEO analysis container https://github.com/Yoast/wordpress-seo/issues/10303
[x] Readability analysis container https://github.com/Yoast/wordpress-seo/issues/10304
[x] Cornerstone checkbox container https://github.com/Yoast/wordpress-seo/issues/10302
[x] Insights container (premium) https://github.com/Yoast/wordpress-seo-premium/issues/1854
[x] Internal linking suggestions container (premium) https://github.com/Yoast/wordpress-seo-premium/issues/1854
[x] Sidebar container --> regulates which sections are rendered and active/opened. In this stadium, multiple collapsible can be expanded at the same time. https://github.com/Yoast/yoast-components/issues/452

Other

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

Finalizing

[x] Remove the feature flag and implement functionality as default behaviour: https://github.com/Yoast/wordpress-seo/issues/10373
[x] Remove code that is no longer needed: https://github.com/Yoast/wordpress-seo/issues/10371

moorscode commented 6 years ago

8.1 Roadmap

Gutenberg

[x] 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 https://github.com/Yoast/wordpress-seo/issues/9519

Replacevars

[ ] Category name https://github.com/Yoast/wordpress-seo/issues/9355
[x] Parent title https://github.com/Yoast/wordpress-seo/issues/9263
[ ] Custom taxonomy name https://github.com/Yoast/gutenberg/issues/60
[x] Primary category --> waiting for primary category component
[ ] Custom fields --> waiting for REST API research

Components

[x] Snippet editor in screen takeover
[ ] Social previews in screen takeover
[ ] Robots in screen takeover
[x] Synonym field
[x] Primary category picker
[ ] Buttons: Settings, Dock below content and Need help? https://github.com/Yoast/yoast-components/issues/627

Yoast / wordpress-seo