Unbundle wp.components

[psealock]

Fixes #5034

Bundling wp.components has become technical debt and this PR eliminates it from the bundle in favour of the version found on the window.

By bumping the minimum version of Requires at least to 5.4.0, we are sure that React Hooks are available. This is also in line with Core's minimum version requirements to support current and last two minor versions now that WP 5.6 has been released.

This PR automatically turns the Navigation feature flag off for users of WP less than WP 5.6.0 because the Navigation component is not available. If Gutenberg feature plugin is active and greater than 9.0.0, then Navigation feature is enabled.

This PR does the following

• Enqueue wp.components
• Bump minimum WP requirements
• Disable Navigation feature if WP or Gutenberg requirements aren't met

Detailed test instructions:

1. Use WP 5.5.x.
2. Turn the option on to enable Navigation by setting woocommerce_navigation_enabled to "yes".
3. Disable Gutenberg feature plugin if you have it enabled.
4. Disable wc-calypso-bridge in case you were testing a branch that forces Navigation on.
5. Run npm start. Not doing so could carry over a feature flag config from a previous branch.
6. See Navigation not turned on.
7. Activate the Gutenberg plugin.
8. See the Navigation turned on.
9. Deacitvate Gutenberg. Poke around the app to make sure there are no regressions.
10. Update to WP 5.6
11. See the Nav turned on.
12. Poke around the app to make sure there are no regressions.
13. Repeat the steps with WP 5.4.x installed. Be sure to run through the OBW. You can also use this JN site:

• https://presidential-marmoset.jurassic.ninja/wp-admin/admin.php?page=wc-admin
• un: demo
• pw: G4pRipcXseMz

Consequences

• 650kb reduction in bundle measured using npm ci && npm run analyze. This isn't as much as previously measured but I'm not sure why.
• Adding new features available only in the latest version of Gutenberg will need to be behind a feature so we can check version compatibility.
• Until a proper Dependency Extraction Webpack Plugin is added, extensions may experience fatals due to dependencies not correctly enqueued.
• Upstream Gutenberg contribution can't be made easily available. Some strategy will be required to add just components we absolutely need updated. A strategy to easily revert this when an update becomes available on the minimum WP version will be useful too.
• We can remove SlotFill re-export workarounds The Slot/Fill feature depends on a singleton registry in components package WordPress/gutenberg#27191

Known Issues and Follow Ups

• Add a note to Feature Setting Navigation: Add a link to update WP  #5871
• Nav "back" button issues Navigation: WP 5.6 duplicate "back" buttons and wrong color #5872
• Handle potential problems with __experimental prefix Make usage of __experimantal prefix safe #5873
• Add Dependency Extraction Webpack Plugin Add Dependency Extraction Webpack Plugin #5762

Changelog Note:

• Dev: Unbundle wp.components and enqueue it instead.

[psealock]

cc @pmcpinto this PR preps for WP 5.6 release and unbundling of wp.components. This means the Navigation components won't be available unless users have the latest WP version.

Since our first deploy will be to eComm plan users, they are guaranteed to have the latest, but subsequent steps of the roll out plan may be to users still on 5.5.x which means we'll need to turn off Navigation until they update. Do you think this is a fair requirement for release of the new feature?

[pmcpinto]

Since our first deploy will be to eComm plan users, they are guaranteed to have the latest, but subsequent steps of the roll out plan may be to users still on 5.5.x which means we'll need to turn off Navigation until they update. Do you think this is a fair requirement for release of the new feature?

@psealock thanks for the heads up. I think it would be good to add that info to the nav setting description and trigger an inbox notification about that. @elizaan36 what do you think?

[elizaan36]

@pmcpinto and I chatted about this today and I think we could include a link to update to 5.5 if the store hasn't already.

@psealock Is it possible to present a link to update in the Settings > Advanced > Features area? This would appear for the entire user segment we've released the nav to, regardless of what WordPress version they're on (except for 5.5.X and above.)

The checkbox would be disabled until they update, something like this:

[psealock]

Is it possible to present a link to update in the Settings > Advanced > Features area?

Cool idea, I don't know offhand but bet we could make that work.

I misspoke in the original description, Nav elements won't be available until 5.6.0, not 5.5.3. I don't think this changes anything, because only eComm plan will see the Nav but I will need to keep an eye on timing so that we don't offer the Nav and then take it away for users still on 5.5.x.

[samueljseay]

Fwiw you need to run npm run clean && npm run build && npm run analyze to get the full picture of the build. This looks good though. Gzipped the total build of all our JS assets is 585.13kb (versus almost 800kb gzipped on main), which is amazing! thats a saving of over 200kb gzipped!

@psealock Question: I noticed I could easily get another 30KB of savings by also unbundling wp/compose and wp/date here. Is that worth doing here too?

[psealock]

@psealock Question: I noticed I could easily get another 30KB of savings by also unbundling wp/compose and wp/date here. Is that worth doing here too?

Wow 😮 , I did not realize we bundled those! I don't think that was intentional, but more likely to be a result of us not using Dependency Webpack Extraction Plugin and forgetting to declare them as externals. I added them in d6eee46 but that will be taken care of in #5762 which should maybe be combined with this PR because script dependency declarations could cause issues.

[jeffstieler]

I see the min version of WP for all of WC-Admin is still 5.4.0, but I didn't notice that in the testing instructions. Did we test 5.4.x?

[psealock]

Did we test 5.4.x?

😢 Yikes we did not! Thanks for noticing. Everything seems to be working except for <FlexItem /> used in the OBW. That was introduced in Gutenberg 8.3 and not available until WP 5.5.

4cb33b2 provides a workaround if that component is not available.

[psealock]

I added a Jurassic Ninja site with 5.4 and this branch installed for easy testing to the instructions. cc @jeffstieler

[becdetat]

@psealock I'm testing in the JN site and getting some strange UI issue on the business details page:

Seems to be repeated wherever the toggle is used:

Everything else looks fine though.

[psealock]

Thanks for the review @becdetat, this was caused by the styles being bundled still. Instead of bringing in the styles into scss sheets, I enqueued the styles in eee8c97 and made a few fixes in styles.

While here, I noticed an issue that is also on main. The date picker on mobile sizes should occupy the whole screen. Some is-mobile logic got removed somehow because the styles are still there. Fixed in f56663e

Note

I updated the example 5.4 site described in the original issue.

Known issue

In 5.4 the ellipsis are off by a bit. I think this is an issue with the Gutenberg styles included in 5.4 because the issue resolves itself in later versions and I can't find wc-admin styles affecting this.

[psealock]

Seeing as there is a code freeze in early January and there is already one approval, I'm going to merge this so that there are more eyes on this and we have time to spot anything gone wrong.