Gradually externalize @wordpress/components and finally opt-in all imports via DEWP

[eason9487]

With the ability to selectively externalize specific imports, introduced in #1762, we can start gradually externalizing @wordpress/components, and finally opt-in all imports via DEWP.

This issue is used to track this process and illustrate the approach.

Progress of @wordpress/components imports to be externalized

• __experimentalInputControl - #2054
• Button - #1834
  • @import "node_modules/@wordpress/components/src/button/style"; in _gutenberg-components.scss should be removed together.
• Card - #2036
• CardBody - #2036
• CardDivider - #2036
• CardFooter - #2036
• CardHeader - #2036
• CheckboxControl - #2054
• Dashicon - #2037
• Dropdown - #2042
• ExternalLink
• Flex - #2036
• FlexBlock - #2036
• FlexItem - #2036
• Icon - #2037
• KeyboardShortcuts - #1914
• Modal - #2042
• NavigableMenu - #2042
• Notice - #2037
• Panel - #1881
  • @import "node_modules/@wordpress/components/src/panel/style"; in _gutenberg-components.scss should be removed
• PanelBody - #1881
• PanelRow - #1881
• Popover
• RadioControl - #2054
• SelectControl - #2054
• Tip - #2037
• ToggleControl - #2054
• Tooltip

Externalization steps

1. Add 'extracted/' prefix to all '@wordpress/components' imports of the selected component(s).
   • For example, import { Modal } from '@wordpress/components'; should be changed to import { Modal } from 'extracted/@wordpress/components';.
   • Please note that components with dependencies should be externalized together, e.g. Flex, FlexBlock and FlexItem.
2. Search if there are related JavaScript workarounds for compatibility reasons that can be removed as well.
3. Search if there are related CSS styles for compatibility reasons that can be removed as well.
   • If these CSS styles still need to be preserved, check whether they can be scoped to the CSS class .gla-admin-page in _gutenberg-components.scss.
4. Test the usages of the externalized components in GAL with WordPress versions covering at least L-2.
5. Once a PR has been merged, please mark the related tracking item(s) as completed in this issue.

Opt-in all @wordpress/components imports via DEWP

Once all the externalizations are done, it should be time to opt-in @wordpress/components via DEWP and revert all related imports back to without the extracted/ prefix

• Remove 'extracted/' prefix from all 'extracted/@wordpress/components' imports - #2055
• Remove @import "node_modules/@wordpress/components/src/date-time/date/datepicker"; from _gutenberg-components.scss - #2055
• Remove '@wordpress/components' from the requestToExternal array in the webpack config - #2055

Reference

• Working with DEWP
• Import from an externalized package if explicitly asked for #1762
• Prevent the "import/no-duplicates" warning for the externalization process #1844
• Use AppButton with extracted Button component #1834 (review)
• Use AppButton with extracted Button component #1834 (review)