Component System: Upgrade FontSizePicker

package.json

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

packages/block-editor/src/hooks/font-size.js

@@ -105,15 +105,6 @@ export function FontSizeEdit( props ) {
 	const isDisabled = useIsFontSizeDisabled( props );
 	const fontSizes = useEditorFeature( 'typography.fontSizes' );
 
-	if ( isDisabled ) {
-		return null;
-	}
-
-	const fontSizeObject = getFontSize(
-		fontSizes,
-		fontSize,
-		style?.typography?.fontSize
-	);
 	const onChange = ( value ) => {
 		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
 
@@ -129,9 +120,20 @@ export function FontSizeEdit( props ) {
 		} );
 	};
 
-	return (
-		<FontSizePicker value={ fontSizeObject.size } onChange={ onChange } />
+	if ( isDisabled ) {
+		return null;
+	}
+
+	const fontSizeObject = getFontSize(
+		fontSizes,
+		fontSize,
+		style?.typography?.fontSize
 	);
+
+	const fontSizeValue =
+		fontSizeObject?.size || style?.typography?.fontSize || fontSize;
+
+	return <FontSizePicker onChange={ onChange } value={ fontSizeValue } />;
 }
 
 /**

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

@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { hasBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+/**
+ * External dependencies
+ */
+import {
+	PanelBody,
+	__unstableComponentSystemProvider as ComponentSystemProvider,
+} from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -61,11 +67,15 @@ export function TypographyPanel( props ) {
 	return (
 		<InspectorControls>
 			<PanelBody title={ __( 'Typography' ) }>
-				<FontFamilyEdit { ...props } />
-				<FontSizeEdit { ...props } />
-				<FontAppearanceEdit { ...props } />
-				<LineHeightEdit { ...props } />
-				<TextDecorationAndTransformEdit { ...props } />
+				<ComponentSystemProvider
+					__unstableNextInclude={ [ 'WPComponentsFontSizePicker' ] }
+				>
+					<FontFamilyEdit { ...props } />
+					<FontSizeEdit { ...props } />
+					<FontAppearanceEdit { ...props } />
+					<LineHeightEdit { ...props } />
+					<TextDecorationAndTransformEdit { ...props } />
+				</ComponentSystemProvider>
 			</PanelBody>
 		</InspectorControls>
 	);

packages/components/package.json

@@ -45,6 +45,10 @@
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
+		"@wp-g2/components": "^0.0.139",
+		"@wp-g2/context": "^0.0.139",
+		"@wp-g2/styles": "^0.0.139",
+		"@wp-g2/utils": "^0.0.139",
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^5.4.0",
@@ -57,7 +61,7 @@
 		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
-		"react-use-gesture": "^7.0.15",
+		"react-use-gesture": "^7.0.16",
 		"reakit": "^1.3.4",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",

packages/components/src/__next/context/component-system-provider.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { ContextSystemProvider } from '@wp-g2/components';
+
+export function ComponentSystemProvider( {
+	__unstableNextInclude = [],
+	children,
+	value = {},
+} ) {
+	if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) {
+		const contextValue = { ...value };
+
+		__unstableNextInclude.forEach( ( namespace ) => {
+			const baseValue = contextValue[ namespace ] || {};
+			contextValue[ namespace ] = {
+				...baseValue,
+				__unstableVersion: 'next',
+			};
+		} );
+
+		return (
+			<ContextSystemProvider value={ contextValue }>
+				{ children }
+			</ContextSystemProvider>
+		);
+	}
+
+	return children;
+}

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

@@ -0,0 +1,2 @@
+export { ComponentSystemProvider as __unstableComponentSystemProvider } from './component-system-provider';
+export { withNext as __unstableWithNext } from './with-next';

packages/components/src/__next/context/with-next.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/components';
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+export function withNext(
+	CurrentComponent = () => null,
+	NextComponent = () => null,
+	namespace = 'Component',
+	adapter = ( p ) => p
+) {
+	if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) {
+		const WrappedComponent = ( props, ref ) => {
+			const { __unstableVersion, ...otherProps } = useContextSystem(
+				props,
+				namespace
+			);
+
+			if ( __unstableVersion === 'next' ) {
+				const nextProps = adapter( otherProps );
+				return <NextComponent { ...nextProps } ref={ ref } />;
+			}
+
+			return <CurrentComponent { ...props } ref={ ref } />;
+		};
+
+		return contextConnect( WrappedComponent, namespace );
+	}
+
+	return forwardRef( CurrentComponent );
+}

packages/components/src/font-size-picker/index.js

@@ -18,6 +18,7 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import CustomSelectControl from '../custom-select-control';
 import VisuallyHidden from '../visually-hidden';
+import { withNextComponent } from './next/';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';
@@ -52,14 +53,17 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-export default function FontSizePicker( {
-	fallbackFontSize,
-	fontSizes = [],
-	disableCustomFontSizes = false,
-	onChange,
-	value,
-	withSlider = false,
-} ) {
+function FontSizePicker(
+	{
+		fallbackFontSize,
+		fontSizes = [],
+		disableCustomFontSizes = false,
+		onChange,
+		value,
+		withSlider = false,
+	},
+	ref
+) {
 	const hasUnits =
 		isString( value ) ||
 		( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) );
@@ -90,7 +94,10 @@ export default function FontSizePicker( {
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
 
 	return (
-		<fieldset className="components-font-size-picker">
+		<fieldset
+			className="components-font-size-picker"
+			{ ...( ref ? {} : { ref } ) }
+		>
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<div className="components-font-size-picker__controls">
 				{ fontSizes.length > 0 && (
@@ -169,3 +176,5 @@ export default function FontSizePicker( {
 		</fieldset>
 	);
 }
+
+export default withNextComponent( FontSizePicker );

packages/components/src/font-size-picker/next/font-size-control-select.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/context';
+import { noop } from '@wp-g2/utils';
+import {
+	Grid,
+	TextInput,
+	SelectDropdown,
+	FormGroup,
+	Button,
+	View,
+} from '@wp-g2/components';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectTemplateColumns } from './font-size-control-utils';
+
+function renderItem( { name, style } ) {
+	return <span style={ style }>{ name }</span>;
+}
+
+function FontSizeControlSelect( props, forwardedRef ) {
+	const {
+		customLabel,
+		disabled,
+		inputValue,
+		isDefaultValue,
+		label,
+		max,
+		min,
+		onChange = noop,
+		onInputChange = noop,
+		onReset = noop,
+		options = [],
+		size,
+		value,
+		withNumberInput,
+		withSelect,
+		...otherProps
+	} = useContextSystem( props, 'FontSizeControlSelect' );
+
+	const templateColumns = getSelectTemplateColumns( withNumberInput );
+	const subControlsTemplateColumns = withNumberInput ? '1fr 1fr' : '1fr';
+
+	return (
+		<Grid alignment="bottom" templateColumns={ templateColumns }>
+			{ withSelect && (
+				<FormGroup label={ label }>
+					<SelectDropdown
+						disabled={ disabled }
+						max={ 260 }
+						onChange={ onChange }
+						options={ options }
+						renderItem={ renderItem }
+						ref={ forwardedRef }
+						size={ size }
+						value={ value }
+						{ ...otherProps }
+					/>
+				</FormGroup>
+			) }
+			<Grid
+				alignment="bottom"
+				templateColumns={ subControlsTemplateColumns }
+			>
+				{ withNumberInput && (
+					<FormGroup label={ customLabel }>
+						<TextInput
+							disabled={ disabled }
+							max={ max }
+							min={ min }
+							onChange={ onInputChange }
+							size={ size }
+							type="number"
+							value={ inputValue }
+						/>
+					</FormGroup>
+				) }
+				<View>
+					<Button
+						disabled={ isDefaultValue }
+						isBlock
+						onClick={ onReset }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</View>
+			</Grid>
+		</Grid>
+	);
+}
+
+export default contextConnect( FontSizeControlSelect, 'FontSizeControlSelect' );

packages/components/src/font-size-picker/next/font-size-control-slider.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * External dependencies
+ */
+import { noop } from '@wp-g2/utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ControlLabel,
+	Grid,
+	Slider,
+	TextInput,
+	VStack,
+} from '@wp-g2/components';
+import { getSliderTemplateColumns } from './font-size-control-utils';
+
+function FontSizeControlSlider( props ) {
+	const {
+		label = __( 'Custom size' ),
+		disabled,
+		min,
+		max,
+		onChange = noop,
+		size,
+		value,
+		withSlider,
+	} = props;
+
+	if ( ! withSlider ) return null;
+
+	const templateColumns = getSliderTemplateColumns();
+
+	const controlProps = {
+		disabled,
+		min,
+		max,
+		onChange,
+		size,
+		value,
+	};
+
+	return (
+		<VStack spacing={ 0 }>
+			<ControlLabel>{ label }</ControlLabel>
+			<Grid templateColumns={ templateColumns }>
+				<Slider { ...controlProps } />
+				<TextInput { ...controlProps } type="number" />
+			</Grid>
+		</VStack>
+	);
+}
+
+export default FontSizeControlSlider;

packages/components/src/font-size-picker/next/font-size-control-styles.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { css } from '@wp-g2/styles';
+
+export const FontSizeControl = css`
+	appearance: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+`;