@wordpress/edit-site 5.8.0 → 5.10.0

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 (

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

@@ -131,7 +131,7 @@
 	.components-v-stack {
 		flex: 1 1 auto;
 
-		.edit-site-global-styles__custom-css-input {
+		.block-editor-global-styles-advanced-panel__custom-css-input {
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
@@ -149,28 +149,6 @@
 	}
 }
 
-.edit-site-global-styles__custom-css-input textarea {
-	font-family: $editor_html_font;
-}
-
-.edit-site-global-styles__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.edit-site-global-styles__custom-css-validation-icon {
-	fill: $alert-red;
-}
-
-.edit-site-global-styles__custom-css-theme-css {
-	width: 100%;
-	line-break: anywhere;
-	white-space: break-spaces;
-	max-height: 200px;
-	overflow-y: scroll;
-}
-
 .edit-site-global-styles-screen-css-help-link {
 	display: block;
 	margin-top: $grid-unit-10;

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

@@ -15,32 +15,31 @@ const {
 	TypographyPanel: StylesTypographyPanel,
 } = unlock( blockEditorPrivateApis );
 
-export default function TypographyPanel( {
-	name,
-	element,
-	headingLevel,
-	variation = '',
-} ) {
+export default function TypographyPanel( { element, headingLevel } ) {
 	let prefixParts = [];
 	if ( element === 'heading' ) {
 		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
 		prefixParts = prefixParts.concat( [ 'elements', element ] );
 	}
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+	const [ style ] = useGlobalStyle( prefix, undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle(
+		prefix,
+		undefined,
+		'all',
+		{
+			shouldDecodeEncode: false,
+		}
+	);
+	const [ rawSettings ] = useGlobalSetting( '' );
 	const usedElement = element === 'heading' ? headingLevel : element;
 	const settings = useSettingsForBlockElement(
 		rawSettings,
-		name,
+		undefined,
 		usedElement
 	);