components: Remove all withNext wrappers (#32205)

* Remove all `withNext` wrappers

* Remove the rest of the helpers

* Remove usages of ComponentSystemProvider

package.json

@@ -19,8 +19,7 @@
 		"npm": ">=6.9.0 <7"
 	},
 	"config": {
-		"GUTENBERG_PHASE": 2,
-		"COMPONENT_SYSTEM_PHASE": 1
+		"GUTENBERG_PHASE": 2
 	},
 	"dependencies": {
 		"@wordpress/a11y": "file:packages/a11y",

packages/block-editor/src/hooks/typography.js

@@ -5,10 +5,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
 /**
  * External dependencies
  */
-import {
-	PanelBody,
-	__unstableComponentSystemProvider as ComponentSystemProvider,
-} from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -73,16 +70,12 @@ export function TypographyPanel( props ) {
 	return (
 		<InspectorControls>
 			<PanelBody title={ __( 'Typography' ) }>
-				<ComponentSystemProvider
-					__unstableNextInclude={ [ 'WPComponentsFontSizePicker' ] }
-				>
-					<FontFamilyEdit { ...props } />
-					<FontSizeEdit { ...props } />
-					<FontAppearanceEdit { ...props } />
-					<LineHeightEdit { ...props } />
-					<TextDecorationAndTransformEdit { ...props } />
-					<LetterSpacingEdit { ...props } />
-				</ComponentSystemProvider>
+				<FontFamilyEdit { ...props } />
+				<FontSizeEdit { ...props } />
+				<FontAppearanceEdit { ...props } />
+				<LineHeightEdit { ...props } />
+				<TextDecorationAndTransformEdit { ...props } />
+				<LetterSpacingEdit { ...props } />
 			</PanelBody>
 		</InspectorControls>
 	);

packages/components/src/index.js

@@ -164,9 +164,3 @@ export {
 } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
-
-// Component System
-export {
-	withNext as __unstableWithNext,
-	ComponentSystemProvider as __unstableComponentSystemProvider,
-} from './ui/context';

packages/components/src/tooltip/index.js

@@ -20,7 +20,6 @@ import { useDebounce } from '@wordpress/compose';
  */
 import Popover from '../popover';
 import Shortcut from '../shortcut';
-import { withNextComponent } from './next';
 
 /**
  * Time over children to wait before showing tooltip
@@ -217,4 +216,4 @@ function Tooltip( { children, position, text, shortcut } ) {
 	} );
 }
 
-export default withNextComponent( Tooltip );
+export default Tooltip;

packages/components/src/ui/context/index.js

@@ -1,5 +1,3 @@
-export { ComponentSystemProvider } from './component-system-provider';
-export { withNext } from './with-next';
 export {
 	ContextSystemProvider,
 	useComponentsContext,

packages/components/src/visually-hidden/index.js

@@ -12,7 +12,6 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { renderAsRenderProps } from './utils';
-import { withNextComponent } from './next';
 
 /**
  * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor<any>} T
@@ -43,4 +42,4 @@ function VisuallyHidden( { as = 'div', className, ...props }, forwardedRef ) {
 	} );
 }
 
-export default withNextComponent( forwardRef( VisuallyHidden ) );
+export default forwardRef( VisuallyHidden );

packages/edit-site/src/components/sidebar/global-styles-sidebar.js

@@ -6,12 +6,7 @@ import { map, sortBy } from 'lodash';
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	PanelBody,
-	TabPanel,
-	__unstableComponentSystemProvider as ComponentSystemProvider,
-} from '@wordpress/components';
+import { Button, PanelBody, TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
@@ -50,9 +45,7 @@ function GlobalStylesPanel( {
 	}
 
 	const content = (
-		<ComponentSystemProvider
-			__unstableNextInclude={ [ 'WPComponentsFontSizePicker' ] }
-		>
+		<>
 			{ hasTypographyPanel && (
 				<TypographyPanel
 					context={ context }
@@ -83,7 +76,7 @@ function GlobalStylesPanel( {
 					setStyle={ setStyle }
 				/>
 			) }
-		</ComponentSystemProvider>
+		</>
 	);
 	if ( ! wrapperPanelTitle ) {
 		return content;

storybook/main.js

@@ -5,9 +5,7 @@ const stories = [
 	'../packages/icons/src/**/stories/*.js',
 ].filter( Boolean );
 
-const customEnvVariables = {
-	COMPONENT_SYSTEM_PHASE: 1,
-};
+const customEnvVariables = {};
 
 module.exports = {
 	stories,

typings/gutenberg-env/index.d.ts

@@ -1,6 +1,5 @@
 interface Environment {
 	NODE_ENV: unknown;
-	COMPONENT_SYSTEM_PHASE: number | undefined;
 	FORCE_REDUCED_MOTION: boolean | undefined;
 }
 interface Process {

webpack.config.js

@@ -178,13 +178,6 @@ module.exports = {
 					10
 				) || 1
 			),
-			// Inject the `COMPONENT_SYSTEM_PHASE` global, used for controlling Component System roll-out.
-			'process.env.COMPONENT_SYSTEM_PHASE': JSON.stringify(
-				parseInt(
-					process.env.npm_package_config_COMPONENT_SYSTEM_PHASE,
-					10
-				) || 0
-			),
 			'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
 				process.env.FORCE_REDUCED_MOTION
 			),