@wordpress/edit-site 5.9.0 → 5.11.0

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 (
@@ -97,13 +91,10 @@ function Variation( { variation } ) {
 }
 
 export default function StyleVariationsContainer() {
-	const { variations } = useSelect( ( select ) => {
-		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations() || [],
-		};
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
 	const withEmptyVariation = useMemo( () => {
@@ -113,7 +104,7 @@ export default function StyleVariationsContainer() {
 				settings: {},
 				styles: {},
 			},
-			...variations.map( ( variation ) => ( {
+			...( variations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
@@ -122,15 +113,13 @@ export default function StyleVariationsContainer() {
 	}, [ variations ] );
 
 	return (
-		<>
-			<Grid
-				columns={ 2 }
-				className="edit-site-global-styles-style-variations-container"
-			>
-				{ withEmptyVariation?.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } />
-				) ) }
-			</Grid>
-		</>
+		<Grid
+			columns={ 2 }
+			className="edit-site-global-styles-style-variations-container"
+		>
+			{ withEmptyVariation.map( ( variation, index ) => (
+				<Variation key={ index } variation={ variation } />
+			) ) }
+		</Grid>
 	);
 }

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;
@@ -143,34 +143,15 @@
 
 				.components-textarea-control__input {
 					flex: 1 1 auto;
+					// CSS input is always LTR regardless of language.
+					/*rtl:ignore*/
+					direction: ltr;
 				}
 			}
 		}
 	}
 }
 
-.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
 	);
 

package/src/components/global-styles/ui.js

@@ -14,11 +14,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,17 +31,14 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
-import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import { ScreenVariation } from './screen-variations';
-import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
+import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../private-apis';
-import ScreenEffects from './screen-effects';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -50,7 +47,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 
 function GlobalStylesActionMenu() {
 	const { toggle } = useDispatch( preferencesStore );
-	const { canEditCSS } = useSelect( ( select ) => {
+	const { canEditCSS, revisionsCount } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
 
@@ -62,12 +59,23 @@ function GlobalStylesActionMenu() {
 		return {
 			canEditCSS:
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
 	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const loadCustomCSS = () => goTo( '/css' );
+	const loadRevisions = () => {
+		goTo( '/revisions' );
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	};
+	const hasRevisions = revisionsCount >= 2;
+
 	return (
 		<GlobalStylesMenuFill>
 			<DropdownMenu
@@ -92,6 +100,22 @@ function GlobalStylesActionMenu() {
 								},
 						  ]
 						: [] ),
+					...( hasRevisions
+						? [
+								{
+									title: sprintf(
+										/* translators: %d: number of revisions */
+										_n(
+											'%d Revision',
+											'%d Revisions',
+											revisionsCount
+										),
+										revisionsCount
+									),
+									onClick: loadRevisions,
+								},
+						  ]
+						: [] ),
 				] }
 			/>
 		</GlobalStylesMenuFill>
@@ -112,33 +136,6 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function BlockStyleVariationsScreens( { name } ) {
-	const blockStyleVariations = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	if ( ! blockStyleVariations?.length ) {
-		return null;
-	}
-
-	return blockStyleVariations.map( ( variation ) => (
-		<ContextScreens
-			key={ variation.name + name }
-			name={ name }
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( name ) +
-				'/variations/' +
-				encodeURIComponent( variation.name )
-			}
-			variation={ variation.name }
-		/>
-	) );
-}
-
 function BlockStylesNavigationScreens( {
 	parentMenu,
 	blockStyles,
@@ -149,12 +146,12 @@ function BlockStylesNavigationScreens( {
 			key={ index }
 			path={ parentMenu + '/variations/' + style.name }
 		>
-			<ScreenVariation blockName={ blockName } style={ style } />
+			<ScreenBlock name={ blockName } variation={ style.name } />
 		</GlobalStylesNavigationScreen>
 	) );
 }
 
-function ContextScreens( { name, parentMenu = '', variation = '' } ) {
+function ContextScreens( { name, parentMenu = '' } ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -165,70 +162,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 
 	return (
 		<>
-			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/text' }
-			>
-				<ScreenTypographyElement name={ name } element="text" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/link' }
-			>
-				<ScreenTypographyElement name={ name } element="link" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/heading' }
-			>
-				<ScreenTypographyElement name={ name } element="heading" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/caption' }
-			>
-				<ScreenTypographyElement name={ name } element="caption" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/button' }
-			>
-				<ScreenTypographyElement name={ name } element="button" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/palette' }
 			>
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
-				<ScreenFilters name={ name } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
-				<ScreenEffects name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
-				<ScreenCSS name={ name } />
-			</GlobalStylesNavigationScreen>
-
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
 					parentMenu={ parentMenu }
@@ -264,7 +203,6 @@ function GlobalStylesStyleBook() {
 
 function GlobalStylesBlockLink() {
 	const navigator = useNavigator();
-	const isMounted = useRef();
 	const { selectedBlockName, selectedBlockClientId } = useSelect(
 		( select ) => {
 			const { getSelectedBlockClientId, getBlockName } =
@@ -278,20 +216,23 @@ function GlobalStylesBlockLink() {
 		[]
 	);
 	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	// When we're in the `Blocks` screen enable deep linking to the selected block.
 	useEffect( () => {
-		// Avoid navigating to the block screen on mount.
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
 			return;
 		}
-		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+		const currentPath = navigator.location.path;
+		if (
+			currentPath !== '/blocks' &&
+			! currentPath.startsWith( '/blocks/' )
+		) {
 			return;
 		}
-		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		const newPath = '/blocks/' + encodeURIComponent( selectedBlockName );
 		// Avoid navigating to the same path. This can happen when selecting
 		// a new block of the same type.
-		if ( path !== navigator.location.path ) {
-			navigator.goTo( path, { skipFocus: true } );
+		if ( newPath !== currentPath ) {
+			navigator.goTo( newPath, { skipFocus: true } );
 		}
 	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
@@ -320,6 +261,46 @@ function GlobalStylesUI() {
 				<ScreenBlockList />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography">
+				<ScreenTypography />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/text">
+				<ScreenTypographyElement element="text" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/link">
+				<ScreenTypographyElement element="link" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/heading">
+				<ScreenTypographyElement element="heading" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/caption">
+				<ScreenTypographyElement element="caption" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/button">
+				<ScreenTypographyElement element="button" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/colors">
+				<ScreenColors />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/layout">
+				<ScreenLayout />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path={ '/revisions' }>
+				<ScreenRevisions />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
@@ -339,14 +320,6 @@ function GlobalStylesUI() {
 				/>
 			) ) }
 
-			{ blocks.map( ( block, index ) => {
-				return (
-					<BlockStyleVariationsScreens
-						key={ 'screens-block-styles-' + block.name + index }
-						name={ block.name }
-					/>
-				);
-			} ) }
 			{ 'style-book' === editorCanvasContainerView && (
 				<GlobalStylesStyleBook />
 			) }

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

@@ -9,14 +9,12 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  */
 
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
 
 function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );
 }
 
-export function useHasVariationsPanel( name, parentMenu = '' ) {
-	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+export function useBlockVariations( name ) {
 	const blockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -25,18 +23,11 @@ export function useHasVariationsPanel( name, parentMenu = '' ) {
 		[ name ]
 	);
 	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+	return coreBlockStyles;
 }
 
 export function VariationsPanel( { name } ) {
-	const blockStyles = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	const coreBlockStyles = useBlockVariations( name );
 
 	return (
 		<ItemGroup isBordered isSeparated>
@@ -62,17 +53,3 @@ export function VariationsPanel( { name } ) {
 		</ItemGroup>
 	);
 }
-
-export function VariationPanel( { blockName, styleName } ) {
-	return (
-		<ContextMenu
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( blockName ) +
-				'/variations/' +
-				encodeURIComponent( styleName )
-			}
-			name={ blockName }
-		/>
-	);
-}