@wordpress/edit-site 5.9.0 → 5.11.0

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

@@ -2,25 +2,273 @@
  * 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,
+	__experimentalHasSplitBorders as hasSplitBorders,
+} 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 } ) {
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
+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,
+			} );
+		}
+	};
+	const onChangeBorders = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
 
 	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={ onChangeBorders }
+					settings={ settings }
+				/>
+			) }
+			{ hasEffectsPanel && (
+				<StylesEffectsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					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,169 @@
+/**
+ * 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 [ selectedRevisionId, setSelectedRevisionId ] = useState();
+	const [ globalStylesRevision, setGlobalStylesRevision ] =
+		useState( userConfig );
+	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,
+		} );
+		setSelectedRevisionId( 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 }
+					selectedRevisionId={ selectedRevisionId }
+					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;