@wordpress/edit-site 5.9.0 → 5.10.0

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
 	);
 

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

@@ -14,7 +14,7 @@ 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';
@@ -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 }
@@ -320,6 +259,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 +318,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 }
-		/>
-	);
-}

package/src/components/header-edit-mode/index.js

@@ -38,7 +38,10 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { getEditorCanvasContainerTitle } from '../editor-canvas-container';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
 import { unlock } from '../../private-apis';
 
 const preventDefault = ( event ) => {
@@ -122,7 +125,7 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const hasDefaultEditorCanvasView = ! editorCanvasView;
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = templateType === 'wp_template_part';
 

package/src/components/keyboard-shortcuts/register.js

@@ -66,7 +66,7 @@ function KeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/edit-site/toggle-block-settings-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

package/src/components/layout/index.js

@@ -24,6 +24,8 @@ import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as coreCmmandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -33,7 +35,6 @@ import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
@@ -44,7 +45,10 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import { useCommands } from '../../hooks/commands';
+
+const { useCommands } = unlock( coreCmmandsPrivateApis );
+
+const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -248,7 +252,7 @@ export default function Layout() {
 								}
 							>
 								<NavigableRegion
-									ariaLabel={ __( 'Navigation sidebar' ) }
+									ariaLabel={ __( 'Navigation' ) }
 								>
 									<Sidebar />
 								</NavigableRegion>

package/src/components/layout/style.scss

@@ -20,7 +20,7 @@
 	}
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding});
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -105,11 +105,10 @@
 	left: 0;
 	bottom: 0;
 	width: 100%;
+	overflow: hidden;
 
 	& > div {
 		color: $gray-900;
-		background: $white;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
 
 	@include break-medium {
@@ -135,7 +134,6 @@
 
 		& > div {
 			border-radius: 0;
-			box-shadow: none;
 		}
 	}
 }

package/src/components/list/index.js

@@ -7,6 +7,7 @@ import { InterfaceSkeleton } from '@wordpress/interface';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { EditorSnackbars } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -14,8 +15,10 @@ import { EditorSnackbars } from '@wordpress/editor';
 import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import Table from './table';
-import { useLocation } from '../routes';
 import useTitle from '../routes/use-title';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function List() {
 	const {

package/src/components/list/style.scss

@@ -33,6 +33,10 @@
 
 .edit-site {
 	.edit-site-list {
+		background: $white;
+		border-radius: $radius-block-ui * 4;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
 		.interface-interface-skeleton__editor {
 			min-width: 100%;
 

package/src/components/list/table.js

@@ -61,7 +61,9 @@ export default function Table( { templateType } ) {
 	}
 
 	const sortedTemplates = [ ...templates ];
-	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
 
 	return (
 		// These explicit aria roles are needed for Safari.

package/src/components/plugin-template-setting-panel/index.js

@@ -0,0 +1,33 @@
+/**
+ * Defines an extensibility slot for the Template sidebar.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' );
+
+const PluginTemplateSettingPanel = Fill;
+PluginTemplateSettingPanel.Slot = Slot;
+
+/**
+ * Renders items in the Template Sidebar below the main information
+ * like the Template Card.
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { PluginTemplateSettingPanel } from '@wordpress/edit-site';
+ *
+ * const MyTemplateSettingTest = () => (
+ * 		<PluginTemplateSettingPanel>
+ *			<p>Hello, World!</p>
+ *		</PluginTemplateSettingPanel>
+ *	);
+ * ```
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
+export default PluginTemplateSettingPanel;

package/src/components/revisions/index.js

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../private-apis';
+import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
+import EditorCanvasContainer from '../editor-canvas-container';
+
+const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
+	unlock( blockEditorPrivateApis );
+
+function Revisions( { onClose, userConfig, blocks } ) {
+	const { baseConfig } = useSelect(
+		( select ) => ( {
+			baseConfig:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		} ),
+		[]
+	);
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const renderedBlocksArray = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const editorStyles =
+		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
+	return (
+		<EditorCanvasContainer
+			title={ __( 'Revisions' ) }
+			onClose={ onClose }
+			closeButtonLabel={ __( 'Close revisions' ) }
+		>
+			<Iframe
+				className="edit-site-revisions__iframe"
+				name="revisions"
+				tabIndex={ 0 }
+			>
+				<EditorStyles styles={ editorStyles } />
+				<style>
+					{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
+					}
+				</style>
+				<Disabled className="edit-site-revisions__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocksArray }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</Iframe>
+		</EditorCanvasContainer>
+	);
+}
+
+export default Revisions;