@wordpress/edit-site 5.9.0 → 5.10.0

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+
+/**
+ * Returns a button label for the revision.
+ *
+ * @param {Object} revision A revision object.
+ * @return {string} Translated label.
+ */
+function getRevisionLabel( revision ) {
+	const authorDisplayName = revision?.author?.name || __( 'User' );
+	const isUnsaved = 'unsaved' === revision?.id;
+
+	if ( isUnsaved ) {
+		return sprintf(
+			/* translators: %(name)s author display name */
+			__( 'Unsaved changes by %(name)s' ),
+			{
+				name: authorDisplayName,
+			}
+		);
+	}
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( revision?.modified )
+	);
+
+	return revision?.isLatest
+		? sprintf(
+				/* translators: %(name)s author display name, %(date)s: revision creation date */
+				__( 'Changes saved by %(name)s on %(date)s (current)' ),
+				{
+					name: authorDisplayName,
+					date: formattedDate,
+				}
+		  )
+		: sprintf(
+				/* translators: %(name)s author display name, %(date)s: revision creation date */
+				__( 'Changes saved by %(name)s on %(date)s' ),
+				{
+					name: authorDisplayName,
+					date: formattedDate,
+				}
+		  );
+}
+
+/**
+ * Returns a rendered list of revisions buttons.
+ *
+ * @typedef {Object} props
+ * @property {Array<Object>} userRevisions     A collection of user revisions.
+ * @property {number}        currentRevisionId Callback fired when the modal is closed or action cancelled.
+ * @property {Function}      onChange          Callback fired when a revision is selected.
+ *
+ * @param    {props}         Component         props.
+ * @return {JSX.Element} The modal component.
+ */
+function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
+	return (
+		<ol
+			className="edit-site-global-styles-screen-revisions__revisions-list"
+			aria-label={ __( 'Global styles revisions' ) }
+			role="group"
+		>
+			{ userRevisions.map( ( revision ) => {
+				const { id, author, isLatest, modified } = revision;
+				const authorDisplayName = author?.name || __( 'User' );
+				const authorAvatar = author?.avatar_urls?.[ '48' ];
+				/*
+				 * If the currentId hasn't been selected yet, the first revision is
+				 * the current one so long as the API returns revisions in descending order.
+				 */
+				const isActive = !! currentRevisionId
+					? id === currentRevisionId
+					: isLatest;
+
+				return (
+					<li
+						className={ classnames(
+							'edit-site-global-styles-screen-revisions__revision-item',
+							{
+								'is-current': isActive,
+							}
+						) }
+						key={ id }
+					>
+						<Button
+							className="edit-site-global-styles-screen-revisions__revision-button"
+							disabled={ isActive }
+							onClick={ () => {
+								onChange( revision );
+							} }
+							label={ getRevisionLabel( revision ) }
+						>
+							<span className="edit-site-global-styles-screen-revisions__description">
+								<time dateTime={ modified }>
+									{ humanTimeDiff( modified ) }
+								</time>
+								<span className="edit-site-global-styles-screen-revisions__meta">
+									{ sprintf(
+										/* translators: %(name)s author display name */
+										__( 'Changes saved by %(name)s' ),
+										{
+											name: authorDisplayName,
+										}
+									) }
+
+									<img
+										alt={ author?.name }
+										src={ authorAvatar }
+									/>
+								</span>
+							</span>
+						</Button>
+					</li>
+				);
+			} ) }
+		</ol>
+	);
+}
+
+export default RevisionsButtons;

package/src/components/global-styles/screen-revisions/style.scss

@@ -0,0 +1,99 @@
+
+.edit-site-global-styles-screen-revisions {
+	margin: $grid-unit-20;
+}
+
+.edit-site-global-styles-screen-revisions__revisions-list {
+	list-style: none;
+	margin: 0;
+	li {
+		margin-bottom: 0;
+		border-left: 1px solid $gray-300;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__revision-item {
+	position: relative;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
+
+	&:first-child {
+		padding-top: 0;
+	}
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+
+	&::before {
+		background: $gray-300;
+		border-radius: 50%;
+		content: "\a";
+		display: inline-block;
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		position: absolute;
+		top: 50%;
+		left: 0;
+		transform: translate(-50%, -50%);
+	}
+	&.is-current::before {
+		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+}
+
+.edit-site-global-styles-screen-revisions__revision-button {
+	width: 100%;
+	height: auto;
+	display: block;
+	padding: $grid-unit-10 $grid-unit-15;
+
+	&:hover {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.is-current {
+	.edit-site-global-styles-screen-revisions__revision-button {
+		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		opacity: 1;
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+
+	.edit-site-global-styles-screen-revisions__meta {
+		color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-global-styles-screen-revisions__button {
+	justify-content: center;
+	width: 100%;
+}
+
+.edit-site-global-styles-screen-revisions__description {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-10;
+}
+
+.edit-site-global-styles-screen-revisions__meta {
+	color: $gray-700;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	align-items: center;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		border-radius: 100%;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__loading {
+	margin: $grid-unit-30 auto !important;
+}

package/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useGlobalStylesRevisions from '../use-global-styles-revisions';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+jest.mock( '@wordpress/element', () => {
+	return {
+		__esModule: true,
+		...jest.requireActual( '@wordpress/element' ),
+		useContext: jest.fn().mockImplementation( () => ( {
+			user: {
+				styles: 'ice-cream',
+				settings: 'cake',
+			},
+		} ) ),
+	};
+} );
+
+describe( 'useGlobalStylesRevisions', () => {
+	const selectValue = {
+		authors: [
+			{
+				id: 4,
+				name: 'sam',
+			},
+		],
+		currentUser: {
+			name: 'fred',
+			avatar_urls: {},
+		},
+		isDirty: false,
+		revisions: [
+			{
+				id: 1,
+				author: 4,
+				settings: {},
+				styles: {},
+			},
+		],
+		isLoading: false,
+	};
+
+	it( 'returns loaded revisions with no unsaved changes', () => {
+		useSelect.mockImplementation( () => selectValue );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns loaded revisions with saved changes', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isDirty: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( true );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					avatar_urls: {},
+					name: 'fred',
+				},
+				id: 'unsaved',
+				modified: revisions[ 0 ].modified,
+				settings: 'cake',
+				styles: 'ice-cream',
+			},
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns empty revisions when still loading', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isLoading: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( true );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+} );

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../private-apis';
+
+const SITE_EDITOR_AUTHORS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,avatar_urls',
+	context: 'view',
+	capabilities: [ 'edit_theme_options' ],
+};
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+export default function useGlobalStylesRevisions() {
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const { authors, currentUser, isDirty, revisions, isLoading } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getCurrentUser,
+				getUsers,
+				getCurrentThemeGlobalStylesRevisions,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const _currentUser = getCurrentUser();
+			const _isDirty = dirtyEntityRecords.length > 0;
+			const globalStylesRevisions =
+				getCurrentThemeGlobalStylesRevisions() || [];
+			const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY );
+
+			return {
+				authors: _authors,
+				currentUser: _currentUser,
+				isDirty: _isDirty,
+				revisions: globalStylesRevisions,
+				isLoading:
+					! globalStylesRevisions.length ||
+					isResolving( 'getUsers', [ SITE_EDITOR_AUTHORS_QUERY ] ),
+			};
+		},
+		[]
+	);
+	return useMemo( () => {
+		let _modifiedRevisions = [];
+		if ( isLoading || ! revisions.length ) {
+			return {
+				revisions: _modifiedRevisions,
+				hasUnsavedChanges: isDirty,
+				isLoading,
+			};
+		}
+		/*
+		 * Adds a flag to the first revision, which is the latest.
+		 * Also adds author information to the revision.
+		 * Then, if there are unsaved changes in the editor, create a
+		 * new "revision" item that represents the unsaved changes.
+		 */
+		_modifiedRevisions = revisions.map( ( revision ) => {
+			return {
+				...revision,
+				author: authors.find(
+					( author ) => author.id === revision.author
+				),
+			};
+		} );
+
+		if ( _modifiedRevisions[ 0 ]?.id !== 'unsaved' ) {
+			_modifiedRevisions[ 0 ].isLatest = true;
+		}
+
+		if ( isDirty && ! isEmpty( userConfig ) && currentUser ) {
+			const unsavedRevision = {
+				id: 'unsaved',
+				styles: userConfig?.styles,
+				settings: userConfig?.settings,
+				author: {
+					name: currentUser?.name,
+					avatar_urls: currentUser?.avatar_urls,
+				},
+				modified: new Date(),
+			};
+
+			_modifiedRevisions.unshift( unsavedRevision );
+		}
+		return {
+			revisions: _modifiedRevisions,
+			hasUnsavedChanges: isDirty,
+			isLoading,
+		};
+	}, [ revisions.length, isDirty, isLoading ] );
+}

package/src/components/global-styles/screen-root.js

@@ -23,7 +23,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
+import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
@@ -78,7 +78,7 @@ function ScreenRoot() {
 							</NavigationButtonAsItem>
 						</ItemGroup>
 					) }
-					<ContextMenu />
+					<RootMenu />
 				</VStack>
 			</CardBody>
 

package/src/components/global-styles/screen-typography-element.js

@@ -39,7 +39,7 @@ const elements = {
 	},
 };
 
-function ScreenTypographyElement( { name, element } ) {
+function ScreenTypographyElement( { element } ) {
 	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
 
 	return (
@@ -50,7 +50,6 @@ function ScreenTypographyElement( { name, element } ) {
 			/>
 			<Spacer marginX={ 4 }>
 				<TypographyPreview
-					name={ name }
 					element={ element }
 					headingLevel={ headingLevel }
 				/>
@@ -100,7 +99,6 @@ function ScreenTypographyElement( { name, element } ) {
 				</Spacer>
 			) }
 			<TypographyPanel
-				name={ name }
 				element={ element }
 				headingLevel={ headingLevel }
 			/>

package/src/components/global-styles/screen-typography.js

@@ -16,15 +16,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
-import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function Item( { name, parentMenu, element, label } ) {
-	const hasSupport = ! name;
+function Item( { parentMenu, element, label } ) {
 	const prefix =
 		element === 'text' || ! element ? '' : `elements.${ element }.`;
 	const extraStyles =
@@ -33,32 +30,15 @@ function Item( { name, parentMenu, element, label } ) {
 					textDecoration: 'underline',
 			  }
 			: {};
-	const [ fontFamily ] = useGlobalStyle(
-		prefix + 'typography.fontFamily',
-		name
-	);
-	const [ fontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ fontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
+	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
+	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
 	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing',
-		name
+		prefix + 'typography.letterSpacing'
 	);
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
+	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
 	const navigationButtonLabel = sprintf(
 		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
@@ -92,9 +72,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name, variation = '' } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-	const variationClassName = getVariationClassName( variation );
+function ScreenTypography() {
+	const parentMenu = '';
+
 	return (
 		<>
 			<ScreenHeader
@@ -104,55 +84,40 @@ function ScreenTypography( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
-			{ ! name && (
-				<div className="edit-site-global-styles-screen-typography">
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="text"
-								label={ __( 'Text' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="link"
-								label={ __( 'Links' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="heading"
-								label={ __( 'Headings' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="caption"
-								label={ __( 'Captions' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="button"
-								label={ __( 'Buttons' ) }
-							/>
-						</ItemGroup>
-					</VStack>
-				</div>
-			) }
-			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && (
-				<TypographyPanel
-					name={ name }
-					variation={ variation }
-					element="text"
-				/>
-			) }
+			<div className="edit-site-global-styles-screen-typography">
+				<VStack spacing={ 3 }>
+					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+					<ItemGroup isBordered isSeparated>
+						<Item
+							parentMenu={ parentMenu }
+							element="text"
+							label={ __( 'Text' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="link"
+							label={ __( 'Links' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="heading"
+							label={ __( 'Headings' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="caption"
+							label={ __( 'Captions' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="button"
+							label={ __( 'Buttons' ) }
+						/>
+					</ItemGroup>
+				</VStack>
+			</div>
 		</>
 	);
 }

package/src/components/global-styles/style-variations-container.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -22,14 +21,9 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function compareVariations( a, b ) {
-	return (
-		fastDeepEqual( a.styles, b.styles ) &&
-		fastDeepEqual( a.settings, b.settings )
-	);
-}
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
 
 function Variation( { variation } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
@@ -63,7 +57,7 @@ function Variation( { variation } ) {
 	};
 
 	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
+		return areGlobalStyleConfigsEqual( user, variation );
 	}, [ user, variation ] );
 
 	return (