@wordpress/edit-site 5.8.0 → 5.10.0

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

@@ -2,25 +2,202 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ContextMenu from './context-menu';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
+import { unlock } from '../../private-apis';
+import Subtitle from './subtitle';
+import { useBlockVariations, VariationsPanel } from './variations-panel';
 
-function ScreenBlock( { name } ) {
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
+	useGlobalStyle,
+	BorderPanel: StylesBorderPanel,
+	ColorPanel: StylesColorPanel,
+	TypographyPanel: StylesTypographyPanel,
+	DimensionsPanel: StylesDimensionsPanel,
+	EffectsPanel: StylesEffectsPanel,
+	FiltersPanel: StylesFiltersPanel,
+	AdvancedPanel: StylesAdvancedPanel,
+} = unlock( blockEditorPrivateApis );
+
+function ScreenBlock( { name, variation } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
+	const blockVariations = useBlockVariations( name );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasVariationsPanel = !! blockVariations?.length && ! variation;
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+	const currentBlockStyle = variation
+		? blockVariations.find( ( s ) => s.name === variation )
+		: null;
+
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
+		return {
+			...inheritedStyle,
+			layout: settings.layout,
+		};
+	}, [ inheritedStyle, settings.layout ] );
+	const styleWithLayout = useMemo( () => {
+		return {
+			...style,
+			layout: settings.layout,
+		};
+	}, [ style, settings.layout ] );
+	const onChangeDimensions = ( newStyle ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
+
+		if ( newStyle.layout !== settings.layout ) {
+			setSettings( {
+				...rawSettings,
+				layout: newStyle.layout,
+			} );
+		}
+	};
 
 	return (
 		<>
-			<ScreenHeader title={ blockType.title } />
-			<BlockPreviewPanel name={ name } />
-			<ContextMenu
-				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
-				name={ name }
+			<ScreenHeader
+				title={ variation ? currentBlockStyle.label : blockType.title }
 			/>
+			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasVariationsPanel && (
+				<div className="edit-site-global-styles-screen-variations">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+						<VariationsPanel name={ name } />
+					</VStack>
+				</div>
+			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasDimensionsPanel && (
+				<StylesDimensionsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasEffectsPanel && (
+				<StylesEffectsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ {
+						...settings,
+						color: {
+							...settings.color,
+							customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+						},
+					} }
+					includeLayoutControls
+				/>
+			) }
+			{ canEditCSS && (
+				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
+					<p>
+						{ sprintf(
+							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+							__(
+								'Add your own CSS to customize the appearance of the %s block.'
+							),
+							blockType?.title
+						) }
+					</p>
+					<StylesAdvancedPanel
+						value={ style }
+						onChange={ setStyle }
+						inheritedValue={ inheritedStyle }
+					/>
+				</PanelBody>
+			) }
 		</>
 	);
 }

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

@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const {
@@ -21,21 +20,15 @@ const {
 	ColorPanel: StylesColorPanel,
 } = unlock( blockEditorPrivateApis );
 
-function ScreenColors( { name, variation = '' } ) {
-	const variationClassName = getVariationClassName( variation );
-
-	let prefixParts = [];
-	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', {
+function ScreenColors() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	return (
 		<>
@@ -46,11 +39,11 @@ function ScreenColors( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
-					<Palette name={ name } />
+					<Palette />
 
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

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

@@ -1,34 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../private-apis';
 import ScreenHeader from './header';
-import CustomCSSControl from './custom-css';
 
-function ScreenCSS( { name } ) {
-	// If name is defined, we are customizing CSS at the block level.
-	// Display the block title in the description.
-	const blockType = getBlockType( name );
-	const title = blockType?.title;
+const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
+	blockEditorPrivateApis
+);
 
-	const description =
-		title !== undefined
-			? sprintf(
-					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-					__(
-						'Add your own CSS to customize the appearance of the %s block.'
-					),
-					title
-			  )
-			: __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-			  );
+function ScreenCSS() {
+	const description = __(
+		'Add your own CSS to customize the appearance and layout of your site.'
+	);
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
 
 	return (
 		<>
@@ -47,7 +43,11 @@ function ScreenCSS( { name } ) {
 				}
 			/>
 			<div className="edit-site-global-styles-screen-css">
-				<CustomCSSControl blockName={ name } />
+				<StylesAdvancedPanel
+					value={ style }
+					onChange={ setStyle }
+					inheritedValue={ inheritedStyle }
+				/>
 			</div>
 		</>
 	);

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

@@ -10,24 +10,20 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );
 
-function ScreenLayout( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+function ScreenLayout() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasDimensionsPanel && (
-				<DimensionsPanel name={ name } variation={ variation } />
-			) }
+			<BlockPreviewPanel />
+			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);
 }

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

@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalConfirmDialog as ConfirmDialog,
+	Spinner,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useState, useEffect } from '@wordpress/element';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from '../header';
+import { unlock } from '../../../private-apis';
+import Revisions from '../../revisions';
+import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
+import { store as editSiteStore } from '../../../store';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
+import RevisionsButtons from './revisions-buttons';
+
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenRevisions() {
+	const { goBack } = useNavigator();
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
+		return {
+			editorCanvasContainerView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			blocks: select( blockEditorStore ).getBlocks(),
+		};
+	}, [] );
+
+	const { revisions, isLoading, hasUnsavedChanges } =
+		useGlobalStylesRevisions();
+	const [ globalStylesRevision, setGlobalStylesRevision ] =
+		useState( userConfig );
+
+	const [ currentRevisionId, setCurrentRevisionId ] = useState(
+		/*
+		 * We need this for the first render,
+		 * otherwise the unsaved changes haven't been merged into the revisions array yet.
+		 */
+		hasUnsavedChanges ? 'unsaved' : revisions?.[ 0 ]?.id
+	);
+	const [
+		isLoadingRevisionWithUnsavedChanges,
+		setIsLoadingRevisionWithUnsavedChanges,
+	] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	useEffect( () => {
+		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+			goBack();
+			setEditorCanvasContainerView( editorCanvasContainerView );
+		}
+	}, [ editorCanvasContainerView ] );
+
+	const onCloseRevisions = () => {
+		goBack();
+	};
+
+	const restoreRevision = ( revision ) => {
+		setUserConfig( () => ( {
+			styles: revision?.styles,
+			settings: revision?.settings,
+		} ) );
+		setIsLoadingRevisionWithUnsavedChanges( false );
+		onCloseRevisions();
+	};
+
+	const selectRevision = ( revision ) => {
+		setGlobalStylesRevision( {
+			styles: revision?.styles,
+			settings: revision?.settings,
+			id: revision?.id,
+		} );
+		setCurrentRevisionId( revision?.id );
+	};
+
+	const isLoadButtonEnabled =
+		!! globalStylesRevision?.id &&
+		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Revisions' ) }
+				description={ __(
+					'Revisions are added to the timeline when style changes are saved.'
+				) }
+			/>
+			{ isLoading && (
+				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
+			) }
+			{ ! isLoading && (
+				<Revisions
+					blocks={ blocks }
+					userConfig={ globalStylesRevision }
+					onClose={ onCloseRevisions }
+				/>
+			) }
+			<div className="edit-site-global-styles-screen-revisions">
+				<RevisionsButtons
+					onChange={ selectRevision }
+					currentRevisionId={ currentRevisionId }
+					userRevisions={ revisions }
+				/>
+				{ isLoadButtonEnabled && (
+					<SidebarFixedBottom>
+						<Button
+							variant="primary"
+							className="edit-site-global-styles-screen-revisions__button"
+							disabled={
+								! globalStylesRevision?.id ||
+								globalStylesRevision?.id === 'unsaved'
+							}
+							onClick={ () => {
+								if ( hasUnsavedChanges ) {
+									setIsLoadingRevisionWithUnsavedChanges(
+										true
+									);
+								} else {
+									restoreRevision( globalStylesRevision );
+								}
+							} }
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</SidebarFixedBottom>
+				) }
+			</div>
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					title={ __(
+						'Loading this revision will discard all unsaved changes.'
+					) }
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( ' Discard unsaved changes' ) }
+					onConfirm={ () => restoreRevision( globalStylesRevision ) }
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+				>
+					<>
+						<h2>
+							{ __(
+								'Loading this revision will discard all unsaved changes.'
+							) }
+						</h2>
+						<p>
+							{ __(
+								'Do you want to replace your unsaved changes in the editor?'
+							) }
+						</p>
+					</>
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+export default ScreenRevisions;

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;