@wordpress/global-styles-ui 1.1.0

package/src/screen-revisions/style.scss

@@ -0,0 +1,194 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.global-styles-ui-screen-revisions__revisions-list {
+	list-style: none;
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+	// Forces subsequent flex items to the bottom.
+	flex-grow: 1;
+	li {
+		margin-bottom: 0;
+	}
+}
+
+.global-styles-ui-screen-revisions__revision-item {
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+
+	&[role="option"]:active,
+	&[role="option"]:focus {
+		@include button-style__focus();
+	}
+
+	&:hover {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		.global-styles-ui-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
+	&::before,
+	&::after {
+		position: absolute;
+		content: "\a";
+		display: block;
+	}
+
+	&::before {
+		background: $gray-300;
+		border-radius: 50%;
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		top: $grid-unit-20 + 2;
+		left: $grid-unit-20 + 1; // So the circle is centered on the line.
+		transform: translate(-50%, -50%);
+		z-index: 1;
+
+		// This border serves as a background color in Windows High Contrast mode.
+		border: 4px solid transparent;
+	}
+
+	&[aria-selected="true"] {
+		border-radius: $radius-small;
+
+		// Only visible in Windows High Contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: -2px;
+
+		color: var(--wp-admin-theme-color);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.global-styles-ui-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&::before {
+			background: var(--wp-admin-theme-color);
+		}
+
+		.global-styles-ui-screen-revisions__changes > li,
+		.global-styles-ui-screen-revisions__meta,
+		.global-styles-ui-screen-revisions__applied-text {
+			color: $gray-900;
+		}
+	}
+
+	&::after {
+		height: 100%;
+		left: $grid-unit-20;
+		top: 0;
+		width: 0;
+		border: 0.5px solid $gray-300;
+	}
+
+	&:first-child::after {
+		top: $grid-unit-20 + 2;
+	}
+
+	&:last-child::after {
+		height: $grid-unit-20 + 2;
+	}
+}
+.global-styles-ui-screen-revisions__revision-item-wrapper {
+	display: block;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
+}
+
+.global-styles-ui-screen-revisions__apply-button.is-primary,
+.global-styles-ui-screen-revisions__applied-text {
+	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;
+}
+
+.global-styles-ui-screen-revisions__changes,
+.global-styles-ui-screen-revisions__meta,
+.global-styles-ui-screen-revisions__applied-text {
+	color: $gray-700;
+	font-size: 12px;
+}
+
+.global-styles-ui-screen-revisions__description {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-10;
+	.global-styles-ui-screen-revisions__date {
+		text-transform: uppercase;
+		font-weight: 600;
+		font-size: 12px;
+	}
+}
+
+.global-styles-ui-screen-revisions__meta {
+	display: flex;
+	justify-content: start;
+	width: 100%;
+	align-items: flex-start;
+	text-align: left;
+	margin-bottom: $grid-unit-05;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		border-radius: 100%;
+		margin-right: $grid-unit-10;
+	}
+}
+
+.global-styles-ui-screen-revisions__loading {
+	margin: $grid-unit-30 auto !important;
+}
+
+.global-styles-ui-screen-revisions__changes {
+	text-align: left;
+	line-height: $default-line-height;
+	margin-left: $grid-unit-15;
+	list-style: disc;
+
+	li {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
+	justify-content: space-between;
+	gap: 2px;
+	.edit-site-pagination__total {
+		position: absolute;
+		left: -1000px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+	}
+
+	.components-text {
+		font-size: 12px;
+		// `will-change` is required because something about flex props prevents
+		// Safari from rendering the page / total text.
+		will-change: opacity;
+	}
+
+	.components-button.is-tertiary {
+		color: $gray-900;
+	}
+
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
+		color: $gray-600;
+	}
+}
+
+.global-styles-ui-screen-revisions__footer {
+	height: $grid-unit-70;
+	z-index: 1;
+	position: sticky;
+	min-width: 100%;
+	bottom: 0;
+	background: $white;
+	padding: $grid-unit-15;
+	border-top: $border-width solid $gray-300;
+}

package/src/screen-revisions/types.ts

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+export interface User {
+	id: number;
+	name: string;
+	avatar_urls: Record< string, string >;
+}
+
+export interface Revision extends GlobalStylesConfig {
+	id: string | number;
+	author?: User;
+	modified?: string | Date;
+	isLatest?: boolean;
+	_links?: any;
+}

package/src/screen-revisions/use-global-styles-revisions.tsx

@@ -0,0 +1,204 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	store as coreStore,
+	type GlobalStylesRevision,
+} from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from '../context';
+import type { Revision, User } from './types';
+
+interface RawRevision extends Omit< Revision, 'author' > {
+	author?: number;
+}
+
+interface Query {
+	per_page?: number;
+	page?: number;
+}
+
+interface UseGlobalStylesRevisionsParams {
+	query?: Query;
+}
+
+interface UseGlobalStylesRevisionsReturn {
+	revisions: Revision[];
+	hasUnsavedChanges: boolean;
+	isLoading: boolean;
+	revisionsCount: number;
+}
+
+const SITE_EDITOR_AUTHORS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,avatar_urls',
+	context: 'view',
+	capabilities: [ 'edit_theme_options' ],
+};
+const DEFAULT_QUERY = { per_page: 100, page: 1 };
+const EMPTY_ARRAY: RawRevision[] = [];
+
+export default function useGlobalStylesRevisions( {
+	query,
+}: UseGlobalStylesRevisionsParams = {} ): UseGlobalStylesRevisionsReturn {
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const _query: Query = useMemo(
+		() => ( { ...DEFAULT_QUERY, ...query } ),
+		[ query ]
+	);
+	const {
+		authors,
+		currentUser,
+		isDirty,
+		revisions,
+		isLoadingGlobalStylesRevisions,
+		revisionsCount,
+	} = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getCurrentUser,
+				getUsers,
+				getRevisions,
+				__experimentalGetCurrentGlobalStylesId,
+				getEntityRecord,
+				// @ts-expect-error
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords =
+				__experimentalGetDirtyEntityRecords() || [];
+			const _currentUser = getCurrentUser();
+			const _isDirty = dirtyEntityRecords.length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord< GlobalStylesRevision >(
+						'root',
+						'globalStyles',
+						globalStylesId
+				  )
+				: undefined;
+			const _revisionsCount: number =
+				// @ts-expect-error - _links is not typed in GlobalStylesRevision
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+			// @ts-expect-error - getRevisions is not fully typed
+			const globalStylesRevisions: RawRevision[] = globalStylesId
+				? getRevisions(
+						'root',
+						'globalStyles',
+						globalStylesId,
+						_query
+				  ) || EMPTY_ARRAY
+				: EMPTY_ARRAY;
+			// @ts-expect-error - getUsers is not fully typed
+			const _authors: User[] =
+				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || [];
+			const _isResolving = globalStylesId
+				? isResolving( 'getRevisions', [
+						'root',
+						'globalStyles',
+						globalStylesId,
+						_query,
+				  ] )
+				: false;
+			return {
+				authors: _authors,
+				currentUser: _currentUser,
+				isDirty: _isDirty,
+				revisions: globalStylesRevisions,
+				isLoadingGlobalStylesRevisions: _isResolving,
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[ _query ]
+	);
+	return useMemo( (): UseGlobalStylesRevisionsReturn => {
+		if ( ! authors.length || isLoadingGlobalStylesRevisions ) {
+			return {
+				revisions: EMPTY_ARRAY as Revision[],
+				hasUnsavedChanges: isDirty,
+				isLoading: true,
+				revisionsCount,
+			};
+		}
+
+		// Adds author details to each revision.
+		const _modifiedRevisions: Revision[] = revisions.map( ( revision ) => {
+			return {
+				...revision,
+				author: authors.find(
+					( author ) => author.id === revision.author
+				),
+			};
+		} );
+
+		const fetchedRevisionsCount = revisions.length;
+
+		if ( fetchedRevisionsCount ) {
+			// Flags the most current saved revision.
+			if (
+				_modifiedRevisions[ 0 ].id !== 'unsaved' &&
+				_query.page === 1
+			) {
+				_modifiedRevisions[ 0 ].isLatest = true;
+			}
+
+			// Adds an item for unsaved changes.
+			if (
+				isDirty &&
+				userConfig &&
+				Object.keys( userConfig ).length > 0 &&
+				currentUser &&
+				_query.page === 1
+			) {
+				const unsavedRevision: Revision = {
+					id: 'unsaved',
+					styles: userConfig?.styles,
+					settings: userConfig?.settings,
+					_links: userConfig?._links,
+					author: {
+						name: currentUser?.name || '',
+						// @ts-expect-error - avatar_urls is not typed in User
+						avatar_urls: currentUser?.avatar_urls || {},
+					},
+					modified: new Date(),
+				};
+
+				_modifiedRevisions.unshift( unsavedRevision );
+			}
+
+			if (
+				_query.per_page &&
+				_query.page === Math.ceil( revisionsCount / _query.per_page )
+			) {
+				// Adds an item for the default theme styles.
+				_modifiedRevisions.push( {
+					id: 'parent',
+					styles: {},
+					settings: {},
+				} );
+			}
+		}
+
+		return {
+			revisions: _modifiedRevisions,
+			hasUnsavedChanges: isDirty,
+			isLoading: false,
+			revisionsCount,
+		};
+	}, [
+		isDirty,
+		revisions,
+		currentUser,
+		authors,
+		userConfig,
+		isLoadingGlobalStylesRevisions,
+		revisionsCount,
+		_query.page,
+		_query.per_page,
+	] );
+}

package/src/screen-root.tsx

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	__experimentalVStack as VStack,
+	FlexItem,
+	CardBody,
+	Card,
+	CardDivider,
+	CardMedia,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { IconWithCurrentColor } from './icon-with-current-color';
+import { NavigationButtonAsItem } from './navigation-button';
+import RootMenu from './root-menu';
+import PreviewStyles from './preview-styles';
+
+function ScreenRoot() {
+	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
+		const {
+			__experimentalGetCurrentThemeGlobalStylesVariations,
+			__experimentalGetCurrentGlobalStylesId,
+			getEntityRecord,
+		} = select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			hasVariations:
+				!! __experimentalGetCurrentThemeGlobalStylesVariations()
+					?.length,
+			canEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[
+				'wp:action-edit-css'
+			],
+		};
+	}, [] );
+
+	return (
+		<Card
+			size="small"
+			isBorderless
+			className="global-styles-ui-screen-root"
+			isRounded={ false }
+		>
+			<CardBody>
+				<VStack spacing={ 4 }>
+					<Card className="global-styles-ui-screen-root__active-style-tile">
+						<CardMedia className="global-styles-ui-screen-root__active-style-tile-preview">
+							<PreviewStyles />
+						</CardMedia>
+					</Card>
+					{ hasVariations && (
+						<ItemGroup>
+							<NavigationButtonAsItem path="/variations">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Browse styles' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					) }
+					<RootMenu />
+				</VStack>
+			</CardBody>
+
+			<CardDivider />
+
+			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Customize the appearance of specific blocks for the whole site.'
+					) }
+				</Spacer>
+				<ItemGroup>
+					<NavigationButtonAsItem path="/blocks">
+						<HStack justify="space-between">
+							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</NavigationButtonAsItem>
+				</ItemGroup>
+			</CardBody>
+
+			{ canEditCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem path="/css">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Additional CSS' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
+		</Card>
+	);
+}
+
+export default ScreenRoot;

package/src/screen-shadows.tsx

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import ShadowsPanel from './shadows-panel';
+import ShadowsEditPanel from './shadows-edit-panel';
+
+export function ScreenShadows() {
+	return <ShadowsPanel />;
+}
+
+export function ScreenShadowsEdit() {
+	return <ShadowsEditPanel />;
+}

package/src/screen-style-variations.tsx

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Card, CardBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import { StyleVariationsContent } from './style-variations-content';
+
+function ScreenStyleVariations() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Browse styles' ) }
+				description={ __(
+					'Choose a variation to change the look of the site.'
+				) }
+			/>
+
+			<Card
+				size="small"
+				isBorderless
+				className="global-styles-ui-screen-style-variations"
+			>
+				<CardBody>
+					<StyleVariationsContent />
+				</CardBody>
+			</Card>
+		</>
+	);
+}
+
+export default ScreenStyleVariations;