[WIP] Components: Add size variant context

packages/block-editor/src/components/inspector-controls/fill.js

@@ -7,6 +7,8 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import {
+	__experimentalContextSystemProvider as ContextSystemProvider,
+	__experimentalSizeVariantContext as SIZE_VARIANT_CONTEXT,
 	__experimentalStyleProvider as StyleProvider,
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
@@ -42,9 +44,13 @@ export default function InspectorControlsFill( {
 					// Provider in this subtree.
 					const value = ! isEmpty( fillProps ) ? fillProps : null;
 					return (
+						<ContextSystemProvider
+							value={ SIZE_VARIANT_CONTEXT[ '40px' ] }
+						>
 							<ToolsPanelContext.Provider value={ value }>
 								{ children }
 							</ToolsPanelContext.Provider>
+						</ContextSystemProvider>
 					);
 				} }
 			</Fill>

packages/components/src/index.js

@@ -55,6 +55,10 @@ export {
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
+export {
+	SIZE_VARIANT_CONTEXT as __experimentalSizeVariantContext,
+	ContextSystemProvider as __experimentalContextSystemProvider,
+} from './ui/context';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';

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

@@ -8,3 +8,11 @@ export const CONTEXT_COMPONENT_NAMESPACE = 'data-wp-c5tc8t';
  * This is attached to Context connected components as a static property.
  */
 export const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
+
+export const SIZE_VARIANT_CONTEXT = {
+	'40px': {
+		InputControl: {
+			size: '__unstable-large',
+		},
+	},
+};

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

@@ -1,3 +1,4 @@
+export { SIZE_VARIANT_CONTEXT } from './constants';
 export {
 	ContextSystemProvider,
 	useComponentsContext,

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

@@ -2,8 +2,10 @@
  * WordPress dependencies
  */
 import {
+	__experimentalContextSystemProvider as ContextSystemProvider,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalSizeVariantContext as SIZE_VARIANT_CONTEXT,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
 
@@ -97,6 +99,7 @@ function GlobalStylesUI() {
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
+			<ContextSystemProvider value={ SIZE_VARIANT_CONTEXT[ '40px' ] }>
 				<GlobalStylesNavigationScreen path="/">
 					<ScreenRoot />
 				</GlobalStylesNavigationScreen>
@@ -126,6 +129,7 @@ function GlobalStylesUI() {
 						name={ block.name }
 					/>
 				) ) }
+			</ContextSystemProvider>
 		</NavigatorProvider>
 	);
 }