@wordpress/global-styles-ui 1.17.0 → 1.18.0

package/src/preview-wrapper.tsx

@@ -13,6 +13,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { useLayoutEffect, useState } from '@wordpress/element';
+import { Skeleton } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -101,6 +102,15 @@ function PreviewWrapper( {
 			<div style={ { position: 'relative' } }>
 				{ containerResizeListener }
 			</div>
+			{ ! isReady && (
+				// Match the preview aspect ratio so layout doesn't jump once width is measured.
+				<Skeleton
+					className="global-styles-ui-preview__wrapper"
+					style={ {
+						aspectRatio: normalizedWidth / normalizedHeight,
+					} }
+				/>
+			) }
 			{ isReady && (
 				<div
 					className={ clsx( 'global-styles-ui-preview__wrapper', {

package/src/screen-block.tsx

@@ -100,8 +100,11 @@ interface ScreenBlockProps {
 }
 
 function ScreenBlock( { name, variation }: ScreenBlockProps ) {
-	const { user: userConfig, onChange: onChangeGlobalStyles } =
-		useContext( GlobalStylesContext );
+	const {
+		user: userConfig,
+		merged: mergedConfig,
+		onChange: onChangeGlobalStyles,
+	} = useContext( GlobalStylesContext );
 
 	let prefixParts: string[] = [];
 	if ( variation ) {
@@ -114,13 +117,24 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 		useState< string >( 'default' );
 	const [ selectedPseudoState, setSelectedPseudoState ] =
 		useState< string >( 'default' );
-	const validViewportStates = useMemo( () => getValidViewportStates(), [] );
+	const viewportSettings = mergedConfig.settings?.viewport;
+	const validViewportStates = useMemo(
+		() => getValidViewportStates( viewportSettings ),
+		[ viewportSettings ]
+	);
+	const effectiveSelectedViewport =
+		selectedViewport === 'default' ||
+		validViewportStates.some(
+			( state ) => state.value === selectedViewport
+		)
+			? selectedViewport
+			: 'default';
 	const validPseudoStates = useMemo(
 		() => getValidPseudoStates( name ),
 		[ name ]
 	);
 
-	const stateParam = [ selectedViewport, selectedPseudoState ]
+	const stateParam = [ effectiveSelectedViewport, selectedPseudoState ]
 		.filter( ( value ) => value !== 'default' )
 		.join( '.' );
 	const hasSelectedState = stateParam.length > 0;
@@ -194,7 +208,7 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
 	const shouldShowFiltersPanel =
-		hasFiltersPanel && selectedViewport === 'default';
+		hasFiltersPanel && effectiveSelectedViewport === 'default';
 	const hasImageSettingsPanel = useHasImageSettingsPanel(
 		name,
 		userSettings,
@@ -344,7 +358,7 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 				}
 				viewportStates={ validViewportStates }
 				pseudoStates={ validPseudoStates }
-				selectedViewport={ selectedViewport }
+				selectedViewport={ effectiveSelectedViewport }
 				selectedPseudoState={ selectedPseudoState }
 				onChangeViewport={ setSelectedViewport }
 				onChangePseudoState={ setSelectedPseudoState }
@@ -352,9 +366,10 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 			<BlockPreviewPanel
 				name={ name }
 				variation={ variation }
-				selectedViewport={ selectedViewport }
+				selectedViewport={ effectiveSelectedViewport }
 				selectedState={ hasSelectedState ? stateParam : 'default' }
 				stateStyles={ hasSelectedState ? inheritedStyle : undefined }
+				viewportSettings={ viewportSettings }
 			/>
 			{ hasVariationsPanel && (
 				<div className="global-styles-ui-screen-variations">
@@ -364,15 +379,6 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 					</VStack>
 				</div>
 			) }
-			{ hasBackgroundPanel && (
-				<StylesBackgroundPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-				/>
-			) }
 			{ hasTypographyPanel && (
 				<StylesTypographyPanel
 					inheritedValue={ inheritedStyle }
@@ -385,6 +391,24 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 					isGlobalStyles={ ! hasSelectedState }
 				/>
 			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+				/>
+			) }
+			{ shouldShowFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
 			{ hasDimensionsPanel && (
 				<StylesDimensionsPanel
 					inheritedValue={ inheritedStyleWithLayout }
@@ -402,15 +426,6 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 					settings={ settings }
 				/>
 			) }
-			{ shouldShowFiltersPanel && (
-				<StylesFiltersPanel
-					inheritedValue={ inheritedStyleWithLayout }
-					value={ styleWithLayout }
-					onChange={ setStyle }
-					settings={ settings }
-					includeLayoutControls
-				/>
-			) }
 			{ hasColorPanel && (
 				<StylesColorPanel
 					inheritedValue={ inheritedStyle }

package/src/screen-color-palette.tsx

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-// @ts-ignore - WordPress private APIs
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Tabs } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -12,13 +11,6 @@ import { ScreenHeader } from './screen-header';
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
 
-/**
- * External dependencies
- */
-import { unlock } from './lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
 function ScreenColorPalette( { name }: { name?: string } ) {
 	return (
 		<>
@@ -28,18 +20,22 @@ function ScreenColorPalette( { name }: { name?: string } ) {
 					'The combination of colors used across the site and in color pickers.'
 				) }
 			/>
-			<Tabs>
-				<Tabs.TabList>
-					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
-					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
-				</Tabs.TabList>
-				<Tabs.TabPanel tabId="color" focusable={ false }>
+			<Tabs.Root defaultValue="color">
+				<div className="global-styles-ui-color-palette__tablist-container">
+					<Tabs.List className="global-styles-ui-color-palette__tablist">
+						<Tabs.Tab value="color">{ __( 'Color' ) }</Tabs.Tab>
+						<Tabs.Tab value="gradient">
+							{ __( 'Gradient' ) }
+						</Tabs.Tab>
+					</Tabs.List>
+				</div>
+				<Tabs.Panel value="color" tabIndex={ -1 }>
 					<ColorPalettePanel name={ name } />
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="gradient" focusable={ false }>
+				</Tabs.Panel>
+				<Tabs.Panel value="gradient" tabIndex={ -1 }>
 					<GradientPalettePanel name={ name } />
-				</Tabs.TabPanel>
-			</Tabs>
+				</Tabs.Panel>
+			</Tabs.Root>
 		</>
 	);
 }

package/src/screen-revisions/style.scss

@@ -116,7 +116,7 @@
 	gap: $grid-unit-10;
 	.global-styles-ui-screen-revisions__date {
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-size: 12px;
 	}
 }

package/src/screen-typography-element.tsx

@@ -68,7 +68,6 @@ function ScreenTypographyElement( { element }: ScreenTypographyElementProps ) {
 							setHeadingLevel( value as string )
 						}
 						isBlock
-						size="__unstable-large"
 					>
 						<ToggleGroupControlOption
 							value="heading"

package/src/shadows-edit-panel.tsx

@@ -243,7 +243,6 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
-							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }
@@ -494,7 +493,6 @@ function ShadowPopover( { shadowObj, onChange }: ShadowPopoverProps ) {
 					onShadowChange( 'inset', value === 'inset' )
 				}
 				hideLabelFromVision
-				__next40pxDefaultSize
 			>
 				<ToggleGroupControlOption
 					value="outset"
@@ -551,7 +549,6 @@ function ShadowInputControl( {
 	return (
 		<UnitControl
 			label={ label }
-			__next40pxDefaultSize
 			value={ value }
 			onChange={ onValueChange }
 		/>

package/src/size-control/index.tsx

@@ -56,7 +56,6 @@ function SizeControl( props: SizeControlProps ) {
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
-						__next40pxDefaultSize
 						label={ label }
 						hideLabelFromVision
 						value={ value }
@@ -69,7 +68,6 @@ function SizeControl( props: SizeControlProps ) {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ label }
 							hideLabelFromVision
 							value={ valueQuantity }

package/src/stories/index.story.jsx

@@ -366,7 +366,7 @@ const BASE_SETTINGS = {
 				theme: [
 					{
 						fontFamily:
-							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+							'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 						name: 'System Font',
 						slug: 'system-font',
 					},

package/src/style.scss

@@ -81,13 +81,13 @@
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;
 	text-transform: uppercase;
-	font-weight: variables.$font-weight-medium !important;
+	font-weight: var(--wpds-typography-font-weight-emphasis) !important;
 	font-size: 11px !important;
 }
 
 .global-styles-ui-section-title {
 	color: colors.$gray-800;
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	line-height: 1.2;
 	padding: 16px 16px 0;
 	margin: 0;
@@ -233,6 +233,14 @@
 	height: 100%;
 }
 
+.global-styles-ui-color-palette__tablist-container {
+	border-bottom: variables.$border-width solid colors.$gray-300;
+}
+
+.global-styles-ui-color-palette__tablist {
+	margin-bottom: calc(-1 * variables.$border-width);
+}
+
 .global-styles-ui-sidebar__navigator-screen .single-column {
 	grid-column: span 1;
 }

package/src/utils.ts

@@ -1,10 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { areGlobalStylesEqual } from '@wordpress/global-styles-engine';
-import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+import {
+	areGlobalStylesEqual,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
+import type {
+	GlobalStylesConfig,
+	GlobalStylesSettings,
+} from '@wordpress/global-styles-engine';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
+
 /**
  * State definition with value and label.
  */
@@ -83,10 +96,19 @@ export function getValidPseudoStates( name: string ): StateDefinition[] {
 /**
  * Get the valid viewport state definitions.
  *
+ * @param viewportSettings
  * @return Array of valid viewport state definitions.
  */
-export function getValidViewportStates(): StateDefinition[] {
-	return RESPONSIVE_STATES;
+export function getValidViewportStates(
+	viewportSettings?: GlobalStylesSettings[ 'viewport' ]
+): StateDefinition[] {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	return RESPONSIVE_STATES.filter(
+		( state ) =>
+			( state.value !== '@tablet' || breakpoints.tablet !== undefined ) &&
+			( state.value !== '@mobile' || breakpoints.mobile !== undefined )
+	);
 }
 
 /**