@wordpress/global-styles-ui 1.15.1 → 1.16.0

package/build-types/screen-revisions/revisions-buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"revisions-buttons.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/revisions-buttons.tsx"],"names":[],"mappings":"AAWA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA4ExC,UAAU,oBAAoB;IAC7B,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAE,QAAQ,EAAE,QAAQ,KAAM,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAE,EAC1B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,EAAE,oBAAoB,+BA+ItB;eAEc,gBAAgB"}
+{"version":3,"file":"revisions-buttons.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/revisions-buttons.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA+ExC,UAAU,oBAAoB;IAC7B,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAE,QAAQ,EAAE,QAAQ,KAAM,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAE,EAC1B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,EAAE,oBAAoB,+BAgJtB;eAEc,gBAAgB"}

package/build-types/variations/variation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"AAsBA,UAAU,cAAc;IACvB,SAAS,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,KAAK,CAAC,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,SAAS,EACT,QAAQ,EACR,MAAc,EACd,UAAU,EACV,WAAmB,EACnB,EAAE,cAAc,+BAiFhB"}
+{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"AAqBA,UAAU,cAAc;IACvB,SAAS,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,KAAK,CAAC,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,SAAS,EACT,QAAQ,EACR,MAAc,EACd,UAAU,EACV,WAAmB,EACnB,EAAE,cAAc,+BAiFhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-ui",
-	"version": "1.15.1",
+	"version": "1.16.0",
 	"description": "Global Styles UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,24 +43,23 @@
 		"./build-style/": "./build-style/"
 	},
 	"dependencies": {
-		"@types/react": "^18.3.27",
-		"@wordpress/a11y": "^4.48.1",
-		"@wordpress/api-fetch": "^7.48.1",
-		"@wordpress/base-styles": "^10.0.1",
-		"@wordpress/block-editor": "^15.21.1",
-		"@wordpress/blocks": "^15.21.1",
-		"@wordpress/components": "^35.0.1",
-		"@wordpress/compose": "^8.1.1",
-		"@wordpress/core-data": "^7.48.1",
-		"@wordpress/data": "^10.48.1",
-		"@wordpress/date": "^5.48.1",
-		"@wordpress/element": "^8.0.1",
-		"@wordpress/global-styles-engine": "^1.15.1",
-		"@wordpress/i18n": "^6.21.1",
-		"@wordpress/icons": "^14.0.1",
-		"@wordpress/keycodes": "^4.48.1",
-		"@wordpress/private-apis": "^1.48.1",
-		"@wordpress/ui": "^0.15.1",
+		"@wordpress/a11y": "^4.49.0",
+		"@wordpress/api-fetch": "^7.49.0",
+		"@wordpress/base-styles": "^10.1.0",
+		"@wordpress/block-editor": "^15.22.0",
+		"@wordpress/blocks": "^15.22.0",
+		"@wordpress/components": "^36.0.0",
+		"@wordpress/compose": "^8.2.0",
+		"@wordpress/core-data": "^7.49.0",
+		"@wordpress/data": "^10.49.0",
+		"@wordpress/date": "^5.49.0",
+		"@wordpress/element": "^8.1.0",
+		"@wordpress/global-styles-engine": "^1.16.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/keycodes": "^4.49.0",
+		"@wordpress/private-apis": "^1.49.0",
+		"@wordpress/ui": "^0.16.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3"
@@ -70,11 +69,17 @@
 		"@testing-library/react": "^16.3.2"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

package/src/block-preview-panel.tsx

@@ -24,8 +24,8 @@ interface BlockPreviewPanelProps {
 // Keep in sync with responsive breakpoint media queries in the global styles engine.
 const PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {
 	default: 783,
-	tablet: 600,
-	mobile: 480,
+	'@tablet': 600,
+	'@mobile': 480,
 };
 
 const BlockPreviewPanel = ( {

package/src/hooks.ts

@@ -36,8 +36,8 @@ extend( [ a11yPlugin ] );
  * @param blockName          The name of the block, if applicable.
  * @param readFrom           Which source to read from: "base" (theme), "user" (customizations), or "merged" (final result).
  * @param shouldDecodeEncode Whether to decode and encode the style value.
- * @param state              Optional style state path. Supports viewport states (e.g. `mobile`),
- *                           pseudo-selector states (e.g. `:hover`) or both (e.g. `mobile.:hover`).
+ * @param state              Optional style state path. Supports viewport states (e.g. `@mobile`),
+ *                           pseudo-selector states (e.g. `:hover`) or both (e.g. `@mobile.:hover`).
  *                           Pseudo selectors are always read/written as nested keys.
  * @return An array containing the style value and a function to set the style
  * value.

package/src/screen-block-list.tsx

@@ -40,6 +40,7 @@ const {
 	useHasBorderPanel,
 	useSettingsForBlockElement,
 	useHasColorPanel,
+	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
@@ -70,6 +71,7 @@ export function useBlockHasGlobalStyles( blockName: string ) {
 	const settings = useSettingsForBlockElement( rawSettings, blockName );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
@@ -77,6 +79,7 @@ export function useBlockHasGlobalStyles( blockName: string ) {
 	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
+		hasBackgroundPanel ||
 		hasLayoutPanel ||
 		hasVariationsPanel;
 	return hasGlobalStyles;

package/src/screen-block.tsx

@@ -275,7 +275,7 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 		// If there are settings changes, we need to update both styles and
 		// settings atomically to avoid race conditions.
 		if ( newSettings?.typography ) {
-			// Build the state-aware path so that viewport styles (e.g. mobile)
+			// Build the state-aware path so that viewport styles (e.g. @mobile)
 			// are written to the correct sub-path and do not overwrite the default.
 			const stylePathForState = [ prefix, stateParam ]
 				.filter( Boolean )
@@ -364,14 +364,6 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 					</VStack>
 				</div>
 			) }
-			{ hasColorPanel && (
-				<StylesColorPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-				/>
-			) }
 			{ hasBackgroundPanel && (
 				<StylesBackgroundPanel
 					inheritedValue={ inheritedStyle }
@@ -419,6 +411,14 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 					includeLayoutControls
 				/>
 			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
 			{ hasImageSettingsPanel && ! hasSelectedState && (
 				<ImageSettingsPanel
 					onChange={ onChangeLightbox }

package/src/screen-revisions/revisions-buttons.tsx

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, Composite } from '@wordpress/components';
+import {
+	Button,
+	Composite,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -13,6 +17,9 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import type { Revision } from './types';
+import { unlock } from '../lock-unlock';
+
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
 
@@ -229,11 +236,12 @@ function RevisionsButtons( {
 						</span>
 						{ isSelected &&
 							( areStylesEqual ? (
-								<p className="global-styles-ui-screen-revisions__applied-text">
-									{ __(
-										'These styles are already applied to your site.'
-									) }
-								</p>
+								<WCBadge
+									className="global-styles-ui-screen-revisions__active-badge"
+									intent="info"
+								>
+									{ __( 'Active' ) }
+								</WCBadge>
 							) : (
 								<Button
 									size="compact"

package/src/screen-revisions/style.scss

@@ -70,8 +70,7 @@
 		}
 
 		.global-styles-ui-screen-revisions__changes > li,
-		.global-styles-ui-screen-revisions__meta,
-		.global-styles-ui-screen-revisions__applied-text {
+		.global-styles-ui-screen-revisions__meta {
 			color: $gray-900;
 		}
 	}
@@ -98,15 +97,14 @@
 }
 
 .global-styles-ui-screen-revisions__apply-button.is-primary,
-.global-styles-ui-screen-revisions__applied-text {
+.global-styles-ui-screen-revisions__active-badge {
 	align-self: flex-start;
 	// Left margin = left padding of .global-styles-ui-screen-revisions__revision-item-wrapper.
-	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
+	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 
 .global-styles-ui-screen-revisions__changes,
-.global-styles-ui-screen-revisions__meta,
-.global-styles-ui-screen-revisions__applied-text {
+.global-styles-ui-screen-revisions__meta {
 	color: $gray-700;
 	font-size: 12px;
 }

package/src/utils.ts

@@ -56,8 +56,8 @@ export const VALID_BLOCK_STATES: Record< string, StateDefinition[] > = {
  * These map to CSS media queries wrapping the block's styles.
  */
 export const RESPONSIVE_STATES: StateDefinition[] = [
-	{ value: 'tablet', label: __( 'Tablet' ) },
-	{ value: 'mobile', label: __( 'Mobile' ) },
+	{ value: '@tablet', label: __( 'Tablet' ) },
+	{ value: '@mobile', label: __( 'Mobile' ) },
 ];
 
 /**

package/src/variations/variation.tsx

@@ -10,7 +10,6 @@ import {
 	areGlobalStylesEqual,
 	mergeGlobalStyles,
 } from '@wordpress/global-styles-engine';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**