@wordpress/global-styles-ui 1.1.0

package/src/screen-color-palette.tsx

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+// @ts-ignore - WordPress private APIs
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+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 (
+		<>
+			<ScreenHeader
+				title={ __( 'Edit palette' ) }
+				description={ __(
+					'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 }>
+					<ColorPalettePanel name={ name } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="gradient" focusable={ false }>
+					<GradientPalettePanel name={ name } />
+				</Tabs.TabPanel>
+			</Tabs>
+		</>
+	);
+}
+
+export default ScreenColorPalette;

package/src/screen-colors.tsx

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import type {
+	GlobalStylesStyles,
+	GlobalStylesSettings,
+} from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import Palette from './palette';
+import { useStyle, useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenColors() {
+	// Get user styles for editing
+	const [ style, setStyle ] = useStyle< GlobalStylesStyles >(
+		'',
+		undefined,
+		'user',
+		false
+	);
+	// Get inherited styles for display
+	const [ inheritedStyle ] = useStyle< GlobalStylesStyles >(
+		'',
+		undefined,
+		'merged',
+		false
+	);
+	// Get settings for the color panel
+	const [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Colors' ) }
+				description={ __(
+					'Palette colors and the application of those colors on site elements.'
+				) }
+			/>
+			<div className="global-styles-ui-screen">
+				<VStack spacing={ 7 }>
+					<Palette />
+					<StylesColorPanel
+						inheritedValue={ inheritedStyle }
+						value={ style }
+						onChange={ setStyle }
+						settings={ settings }
+					/>
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenColors;

package/src/screen-css.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import { useStyle } from './hooks';
+import { unlock } from './lock-unlock';
+
+// Access AdvancedPanel from block-editor private APIs
+const { AdvancedPanel: StylesAdvancedPanel } = unlock( blockEditorPrivateApis );
+
+function ScreenCSS() {
+	const description = __(
+		'Add your own CSS to customize the appearance and layout of your site.'
+	);
+
+	// Get user-only styles (should not decode/encode to preserve raw CSS)
+	const [ style ] = useStyle( '', undefined, 'user', false );
+	// Get all styles (inherited + user) for context
+	const [ inheritedStyle, setStyle ] = useStyle(
+		'',
+		undefined,
+		'merged',
+		false
+	);
+
+	return (
+		<>
+			<ScreenHeader title={ __( 'CSS' ) } description={ description } />
+			<div className="global-styles-ui-screen-css">
+				<ExternalLink
+					href={ __(
+						'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+					) }
+					className="global-styles-ui-screen-css-help-link"
+				>
+					{ __( 'Learn more about CSS' ) }
+				</ExternalLink>
+				<StylesAdvancedPanel
+					value={ style }
+					onChange={ setStyle }
+					inheritedValue={ inheritedStyle }
+				/>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCSS;

package/src/screen-header.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+	Navigator,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+interface ScreenHeaderProps {
+	title: string;
+	description?: string | React.ReactElement;
+	onBack?: () => void;
+}
+
+export function ScreenHeader( {
+	title,
+	description,
+	onBack,
+}: ScreenHeaderProps ) {
+	return (
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<Navigator.BackButton
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							size="small"
+							label={ __( 'Back' ) }
+							onClick={ onBack }
+						/>
+						<Spacer>
+							<Heading
+								className="global-styles-ui-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
+						</Spacer>
+					</HStack>
+				</Spacer>
+			</View>
+			{ description && (
+				<p className="global-styles-ui-header__description">
+					{ description }
+				</p>
+			) }
+		</VStack>
+	);
+}

package/src/screen-layout.tsx

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import type { GlobalStylesSettings } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import DimensionsPanel from './dimensions-panel';
+import { useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const { useHasDimensionsPanel, useSettingsForBlockElement } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenLayout() {
+	const [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+
+	return (
+		<>
+			<ScreenHeader title={ __( 'Layout' ) } />
+			{ hasDimensionsPanel && <DimensionsPanel /> }
+		</>
+	);
+}
+
+export default ScreenLayout;

package/src/screen-revisions/index.tsx

@@ -0,0 +1,158 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalConfirmDialog as ConfirmDialog,
+	Spinner,
+	useNavigator,
+} from '@wordpress/components';
+import { useContext, useState, useMemo } from '@wordpress/element';
+import { areGlobalStylesEqual } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from '../screen-header';
+import { GlobalStylesContext } from '../context';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
+import RevisionsButtons from './revisions-buttons';
+import Pagination from '../pagination';
+
+const PAGE_SIZE = 10;
+
+interface ScreenRevisionsProps {
+	onClose?: () => void;
+}
+
+function ScreenRevisions( { onClose }: ScreenRevisionsProps = {} ) {
+	const { user: currentEditorGlobalStyles, onChange: setUserConfig } =
+		useContext( GlobalStylesContext );
+	const { params, goTo } = useNavigator();
+	const { revisionId } = params;
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const { revisions, isLoading, hasUnsavedChanges, revisionsCount } =
+		useGlobalStylesRevisions( {
+			query: {
+				per_page: PAGE_SIZE,
+				page: currentPage,
+			},
+		} );
+
+	const numPages = Math.ceil( revisionsCount / PAGE_SIZE );
+
+	const [
+		isLoadingRevisionWithUnsavedChanges,
+		setIsLoadingRevisionWithUnsavedChanges,
+	] = useState( false );
+
+	// Derive the currently selected revision from the path parameter
+	const currentlySelectedRevision = useMemo( () => {
+		if ( ! revisionId ) {
+			return currentEditorGlobalStyles;
+		}
+		const revision = revisions.find(
+			( rev ) => String( rev.id ) === String( revisionId )
+		);
+		return revision || currentEditorGlobalStyles;
+	}, [ revisionId, revisions, currentEditorGlobalStyles ] );
+
+	const selectedRevisionMatchesEditorStyles = areGlobalStylesEqual(
+		currentlySelectedRevision,
+		currentEditorGlobalStyles
+	);
+
+	const onCloseRevisions = () => {
+		if ( onClose ) {
+			onClose();
+		}
+	};
+
+	const restoreRevision = ( revision: any ) => {
+		setUserConfig( revision );
+		setIsLoadingRevisionWithUnsavedChanges( false );
+		onCloseRevisions();
+	};
+
+	const handleRevisionSelect = ( revision: any ) => {
+		goTo( `/revisions/${ revision.id }` );
+	};
+
+	const currentlySelectedRevisionId =
+		// @ts-expect-error: revision id is not present in the fallback (default object).
+		currentlySelectedRevision?.id ?? revisions[ 0 ]?.id;
+
+	// Only display load button if there is a revision to load,
+	// and it is different from the current editor styles.
+	const isLoadButtonEnabled =
+		!! currentlySelectedRevisionId &&
+		currentlySelectedRevisionId !== 'unsaved' &&
+		! selectedRevisionMatchesEditorStyles;
+	const hasRevisions = !! revisions.length;
+
+	return (
+		<>
+			<ScreenHeader
+				title={
+					revisionsCount
+						? sprintf(
+								// translators: %d: number of revisions.
+								__( 'Revisions (%d)' ),
+								revisionsCount
+						  )
+						: __( 'Revisions' )
+				}
+				description={ __(
+					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
+				) }
+				onBack={ onCloseRevisions }
+			/>
+			{ ! hasRevisions && (
+				<Spinner className="global-styles-ui-screen-revisions__loading" />
+			) }
+			<RevisionsButtons
+				onChange={ handleRevisionSelect }
+				selectedRevisionId={ currentlySelectedRevisionId }
+				userRevisions={ revisions }
+				canApplyRevision={ isLoadButtonEnabled }
+				onApplyRevision={ () =>
+					hasUnsavedChanges
+						? setIsLoadingRevisionWithUnsavedChanges( true )
+						: restoreRevision( currentlySelectedRevision )
+				}
+			/>
+			{ numPages > 1 && (
+				<div className="global-styles-ui-screen-revisions__footer">
+					<Pagination
+						className="global-styles-ui-screen-revisions__pagination"
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ setCurrentPage }
+						totalItems={ revisionsCount }
+						disabled={ isLoading }
+						label={ __( 'Global Styles pagination' ) }
+					/>
+				</div>
+			) }
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( 'Apply' ) }
+					onConfirm={ () =>
+						restoreRevision( currentlySelectedRevision )
+					}
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+					size="medium"
+				>
+					{ __(
+						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
+					) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+export default ScreenRevisions;

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

@@ -0,0 +1,259 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Composite } from '@wordpress/components';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { getGlobalStylesChanges } from '@wordpress/global-styles-engine';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import type { Revision } from './types';
+
+const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+
+interface ChangesSummaryProps {
+	revision: Revision;
+	previousRevision?: Revision;
+}
+
+function ChangesSummary( { revision, previousRevision }: ChangesSummaryProps ) {
+	const changes: string[] = getGlobalStylesChanges(
+		revision,
+		previousRevision,
+		{
+			maxResults: 7,
+		}
+	);
+
+	if ( ! changes.length ) {
+		return null;
+	}
+
+	return (
+		<ul
+			data-testid="global-styles-revision-changes"
+			className="global-styles-ui-screen-revisions__changes"
+		>
+			{ changes.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
+	);
+}
+
+/**
+ * Returns a button label for the revision.
+ * @param id
+ * @param authorDisplayName
+ * @param formattedModifiedDate
+ * @param areStylesEqual
+ */
+function getRevisionLabel(
+	id: string | number,
+	authorDisplayName: string,
+	formattedModifiedDate: string,
+	areStylesEqual: boolean
+): string {
+	if ( 'parent' === id ) {
+		return __( 'Reset the styles to the theme defaults' );
+	}
+
+	if ( 'unsaved' === id ) {
+		return sprintf(
+			/* translators: %s: author display name */
+			__( 'Unsaved changes by %s' ),
+			authorDisplayName
+		);
+	}
+
+	return areStylesEqual
+		? sprintf(
+				// translators: 1: author display name. 2: revision creation date.
+				__(
+					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
+				),
+				authorDisplayName,
+				formattedModifiedDate
+		  )
+		: sprintf(
+				// translators: 1: author display name. 2: revision creation date.
+				__( 'Changes saved by %1$s on %2$s' ),
+				authorDisplayName,
+				formattedModifiedDate
+		  );
+}
+
+interface RevisionButtonsProps {
+	userRevisions: Revision[];
+	selectedRevisionId?: string | number;
+	onChange: ( revision: Revision ) => void;
+	canApplyRevision?: boolean;
+	onApplyRevision?: () => void;
+}
+
+/**
+ * Returns a rendered list of revisions buttons.
+ * @param root0
+ * @param root0.userRevisions
+ * @param root0.selectedRevisionId
+ * @param root0.onChange
+ * @param root0.canApplyRevision
+ * @param root0.onApplyRevision
+ */
+function RevisionsButtons( {
+	userRevisions,
+	selectedRevisionId,
+	onChange,
+	canApplyRevision,
+	onApplyRevision,
+}: RevisionButtonsProps ) {
+	const { currentThemeName, currentUser } = useSelect( ( select ) => {
+		const { getCurrentTheme, getCurrentUser } = select( coreStore );
+		const currentTheme = getCurrentTheme();
+		return {
+			currentThemeName:
+				currentTheme?.name?.rendered || currentTheme?.stylesheet,
+			currentUser: getCurrentUser(),
+		};
+	}, [] );
+	const dateNowInMs = getDate( null ).getTime();
+	const { datetimeAbbreviated } = getSettings().formats;
+
+	return (
+		<Composite
+			orientation="vertical"
+			className="global-styles-ui-screen-revisions__revisions-list"
+			aria-label={ __( 'Global styles revisions list' ) }
+			role="listbox"
+		>
+			{ userRevisions.map( ( revision, index ) => {
+				const { id, author, modified } = revision;
+				const isUnsaved = 'unsaved' === id;
+				// Unsaved changes are created by the current user.
+				const revisionAuthor = isUnsaved ? currentUser : author;
+				const authorDisplayName = revisionAuthor?.name || __( 'User' );
+				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
+				const isFirstItem = index === 0;
+				const isSelected = selectedRevisionId
+					? selectedRevisionId === id
+					: isFirstItem;
+				const areStylesEqual = ! canApplyRevision && isSelected;
+				const isReset = 'parent' === id;
+				// Convert modified to string if it's a Date, for type compatibility
+				const modifiedString =
+					modified instanceof Date
+						? modified.toISOString()
+						: modified;
+				const modifiedDate = getDate( modifiedString ?? null );
+				const displayDate =
+					modifiedString &&
+					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
+						? dateI18n( datetimeAbbreviated, modifiedDate )
+						: humanTimeDiff(
+								modifiedString ?? modifiedDate,
+								undefined
+						  );
+				const revisionLabel = getRevisionLabel(
+					id,
+					authorDisplayName,
+					dateI18n( datetimeAbbreviated, modifiedDate ),
+					areStylesEqual
+				);
+
+				return (
+					<Composite.Item
+						key={ id }
+						className="global-styles-ui-screen-revisions__revision-item"
+						aria-current={ isSelected }
+						role="option"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
+								onChange( revision );
+							}
+						} }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onChange( revision );
+						} }
+						aria-selected={ isSelected }
+						aria-label={ revisionLabel }
+						render={ <div /> }
+					>
+						<span className="global-styles-ui-screen-revisions__revision-item-wrapper">
+							{ isReset ? (
+								<span className="global-styles-ui-screen-revisions__description">
+									{ __( 'Default styles' ) }
+									<span className="global-styles-ui-screen-revisions__meta">
+										{ currentThemeName }
+									</span>
+								</span>
+							) : (
+								<span className="global-styles-ui-screen-revisions__description">
+									{ isUnsaved ? (
+										<span className="global-styles-ui-screen-revisions__date">
+											{ __( '(Unsaved)' ) }
+										</span>
+									) : (
+										<time
+											className="global-styles-ui-screen-revisions__date"
+											dateTime={ modifiedString }
+										>
+											{ displayDate }
+										</time>
+									) }
+									<span className="global-styles-ui-screen-revisions__meta">
+										<img
+											alt={ authorDisplayName }
+											src={ authorAvatar }
+										/>
+										{ authorDisplayName }
+									</span>
+									{ isSelected && (
+										<ChangesSummary
+											revision={ revision }
+											previousRevision={
+												index < userRevisions.length
+													? userRevisions[ index + 1 ]
+													: undefined
+											}
+										/>
+									) }
+								</span>
+							) }
+						</span>
+						{ isSelected &&
+							( areStylesEqual ? (
+								<p className="global-styles-ui-screen-revisions__applied-text">
+									{ __(
+										'These styles are already applied to your site.'
+									) }
+								</p>
+							) : (
+								<Button
+									size="compact"
+									variant="primary"
+									className="global-styles-ui-screen-revisions__apply-button"
+									onClick={ onApplyRevision }
+									aria-label={ __(
+										'Apply the selected revision to your site.'
+									) }
+								>
+									{ isReset
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
+								</Button>
+							) ) }
+					</Composite.Item>
+				);
+			} ) }
+		</Composite>
+	);
+}
+
+export default RevisionsButtons;