Update SlotFillProvider to the new context API #11123

oandregal · 2018-10-26T15:48:01Z

To be merged after #11314 lands.

The SlotFillProvider is using the React's legacy context API which will be removed in the next major version and was added as a deprecation in StrictMode in 16.6.0.

This PR updates the SlotFillProvider to the stable React's context API.

Test

The popover component works as expected. For example, use the / inserter to add blocks.
Install a plugin that uses the SlotFill API (for example: DropIt or Yoast SEO) and make sure it works as expected.

packages/components/src/slot-fill/index.js

noisysocks · 2018-10-29T01:21:57Z

I'm thinking we should upgrade to React v16.6 first so that we can use Class.contextType to migrate these components to the new Context API without having to introduce new wrapper components.

packages/components/src/slot-fill/provider.js

oandregal · 2018-10-29T08:56:27Z

I'm thinking we should upgrade to React v16.6 first so that we can use Class.contextType to migrate these components to the new Context API without having to introduce new wrapper components.

I'd rather have this upgrade in 5.0. Using legacy APIs inside Gutenberg justifies its use within third-party (plugins, etc), which are a lot harder to migrate. Also, when we upgrade React we might end doing things differently (hooks anyone? where Class.contextType can't be used), or perhaps at that point there is an even newer/better API built on top of the low-level primitives.

youknowriad · 2018-10-29T16:59:21Z

Moving out of 4.2 as it doesn't really touch the public API but still good to have for 5.0 among other react deprecations/upgrade.

oandregal · 2018-10-29T18:12:29Z

Wanted to note that this PR is blocked until the tests are fixed.

The reason why they fail is that we are using an old version of enzyme that doesn't support the new React Context API. Updating enzyme and enzyme-adapter-react-16 fixes the issue. I'll put together a PR to update those dependencies so we can explore their impact. Note that enzyme not fully supporting React 16 has been a problem in the past that forced us to either skip tests, remove, or migrate them to react-test-renderer.

oandregal · 2018-10-29T18:40:19Z

Update: I'm going to explore update those tests to the react-test-renderer.

Also, I've created #11214 to keep track of workarounds we do to make (the versions we use of) enzyme and enzyme-adapter-react-16 work with React.

oandregal · 2018-10-30T10:57:57Z

packages/components/src/slot-fill/test/__snapshots__/slot.js.snap

+  <div>
+    1
+  </div>,
+  <button


Note that, previously, we weren't doing snapshot testing and the button component wasn't checked for.

oandregal · 2018-10-30T10:58:31Z

packages/components/src/slot-fill/test/__snapshots__/slot.js.snap

+  <div>
+    2
+  </div>,
+  <button


Note that, previously, we weren't doing snapshot testing and the button component wasn't checked for.

oandregal · 2018-10-30T10:59:22Z

packages/components/src/slot-fill/test/__snapshots__/slot.js.snap

+    first
+    second
+  </div>,
+  <button


Note that, previously, we weren't doing snapshot testing and the button component wasn't checked for.

oandregal · 2018-10-30T11:06:10Z

Tests updated - note that tests are migrated in atomic commits one by one so it's easier to compare the changes. This is ready for a second review.

oandregal · 2018-10-30T11:12:40Z

mmm, some other tests still need to be migrated:

oandregal · 2018-10-31T11:19:58Z

Tests have been fixed. This is ready for review.

gziolo

It would be nice to move all test updates to their own PR. Ensure it works with master and then upgrade Slot and Fill to the new Context API. Otherwise, it's not that obvious if we didn't break anything.

I also would love to avoid using snapshots for Slot tests as they become very hard to reason after changes introduced. In general they are awesome for UI components, but Slot is more container which doesn't care as much about UI but to ensure that all fills are properly rendered.

packages/components/src/slot-fill/provider.js

packages/components/src/slot-fill/index.js

packages/components/src/slot-fill/slot.js

packages/components/src/slot-fill/test/slot.js

oandregal · 2018-10-31T16:04:14Z

@gziolo Tests are now in a separate PR at #11314 I've rebased this with that PR, so we can merge cleanly after that lands into master.

gziolo · 2018-10-31T17:15:47Z

Nice work, changes in this PR looks great. There are a few e2e tests which ensure that plugins can extend editor, so I think it also covers Slot and FIll logic indirectly.

packages/components/src/slot-fill/fill.js

oandregal · 2018-10-31T17:45:43Z

Cool! The base branch is #11314 I'll wait until that's approved and merged, then I'll rebase this with master and will merge.

oandregal self-assigned this Oct 26, 2018

oandregal added [Status] In Progress Tracking issues with work in progress Framework Issues related to broader framework topics, especially as it relates to javascript labels Oct 26, 2018

oandregal requested a review from a team October 26, 2018 16:16

oandregal removed the [Status] In Progress Tracking issues with work in progress label Oct 26, 2018

oandregal added this to the 4.2 milestone Oct 26, 2018

oandregal commented Oct 26, 2018

View reviewed changes

packages/components/src/slot-fill/index.js Show resolved Hide resolved

noisysocks reviewed Oct 29, 2018

View reviewed changes

packages/components/src/slot-fill/provider.js Show resolved Hide resolved

youknowriad modified the milestones: 4.2, WordPress 5.0 Oct 29, 2018

oandregal force-pushed the update/slotfill-context-api branch from 875b034 to 4c4a70e Compare October 30, 2018 10:53

oandregal commented Oct 30, 2018

View reviewed changes

oandregal requested a review from a team October 30, 2018 11:06

oandregal added the [Status] In Progress Tracking issues with work in progress label Oct 30, 2018

oandregal removed the request for review from a team October 30, 2018 11:12

gziolo mentioned this pull request Oct 30, 2018

Heading Block: Inconsistent location of HTML Anchor in Advanced section of sidebar #7964

Closed

oandregal requested a review from a team October 31, 2018 11:19

oandregal removed the [Status] In Progress Tracking issues with work in progress label Oct 31, 2018

gziolo requested changes Oct 31, 2018

View reviewed changes

oandregal mentioned this pull request Oct 31, 2018

Update tests so we can migrate SlotFill component to the stable context API #11314

Merged

oandregal force-pushed the update/slotfill-context-api branch from ccdf0bb to d04fb12 Compare October 31, 2018 16:02

oandregal changed the base branch from master to update/tests-for-context-api October 31, 2018 16:02

gziolo approved these changes Oct 31, 2018

View reviewed changes

gziolo reviewed Oct 31, 2018

View reviewed changes

packages/components/src/slot-fill/fill.js Outdated Show resolved Hide resolved

youknowriad mentioned this pull request Nov 1, 2018

Upgrade to React 16.6 stable APIs #11360

Closed

12 tasks

oandregal force-pushed the update/tests-for-context-api branch from 6ac3037 to 4e5b61c Compare November 2, 2018 10:40

oandregal force-pushed the update/slotfill-context-api branch from cb19a4e to cc36d71 Compare November 2, 2018 10:41

youknowriad modified the milestones: WordPress 5.0, 4.3 Nov 2, 2018

oandregal added 6 commits November 2, 2018 13:19

Update provider to the new context API

1c7f4e1

Export SlotFillConsumer

482bbc3

Migrate Slot component to the new context Consumer API

d33800f

Migrate Fill component to the new context Consumer API

7f30a1d

Migrate Popover component to the new context Consumer API

3e5b2a4

Rename SlotFillConsumer to Consumer to be inline with provider name

6be0541

oandregal force-pushed the update/slotfill-context-api branch from cc36d71 to 08daa84 Compare November 2, 2018 12:21

oandregal changed the base branch from update/tests-for-context-api to master November 2, 2018 12:21

oandregal added 3 commits November 2, 2018 13:46

Move Slot and Fill component to the end of its respective files

94b2d00

Rename provider.js to context.js

bcf07b2

Remove noop for consistency

24a9729

oandregal force-pushed the update/slotfill-context-api branch from 08daa84 to 24a9729 Compare November 2, 2018 12:47

oandregal merged commit aad371d into master Nov 2, 2018

oandregal deleted the update/slotfill-context-api branch November 2, 2018 13:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update SlotFillProvider to the new context API #11123

Update SlotFillProvider to the new context API #11123

oandregal commented Oct 26, 2018 •

edited

Loading

noisysocks commented Oct 29, 2018

oandregal commented Oct 29, 2018 •

edited

Loading

youknowriad commented Oct 29, 2018

oandregal commented Oct 29, 2018

oandregal commented Oct 29, 2018 •

edited

Loading

oandregal Oct 30, 2018 •

edited

Loading

oandregal Oct 30, 2018

oandregal Oct 30, 2018 •

edited

Loading

oandregal commented Oct 30, 2018

oandregal commented Oct 30, 2018 •

edited

Loading

oandregal commented Oct 31, 2018

gziolo left a comment

oandregal commented Oct 31, 2018

gziolo commented Oct 31, 2018

oandregal commented Oct 31, 2018

+                <div>
+
+                </div>,
+                <button

Update SlotFillProvider to the new context API #11123

Update SlotFillProvider to the new context API #11123

Conversation

oandregal commented Oct 26, 2018 • edited Loading

Test

noisysocks commented Oct 29, 2018

oandregal commented Oct 29, 2018 • edited Loading

youknowriad commented Oct 29, 2018

oandregal commented Oct 29, 2018

oandregal commented Oct 29, 2018 • edited Loading

oandregal Oct 30, 2018 • edited Loading

Choose a reason for hiding this comment

oandregal Oct 30, 2018

Choose a reason for hiding this comment

oandregal Oct 30, 2018 • edited Loading

Choose a reason for hiding this comment

oandregal commented Oct 30, 2018

oandregal commented Oct 30, 2018 • edited Loading

oandregal commented Oct 31, 2018

gziolo left a comment

Choose a reason for hiding this comment

oandregal commented Oct 31, 2018

gziolo commented Oct 31, 2018

oandregal commented Oct 31, 2018

oandregal commented Oct 26, 2018 •

edited

Loading

oandregal commented Oct 29, 2018 •

edited

Loading

oandregal commented Oct 29, 2018 •

edited

Loading

oandregal Oct 30, 2018 •

edited

Loading

oandregal Oct 30, 2018 •

edited

Loading

oandregal commented Oct 30, 2018 •

edited

Loading