@wordpress/edit-site 5.8.0 → 5.10.0

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;

package/src/components/routes/link.js

@@ -2,11 +2,18 @@
  * WordPress dependencies
  */
 import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from './index';
+import { unlock } from '../../private-apis';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export function useLink( params = {}, state, shouldReplace = false ) {
 	const history = useHistory();
@@ -26,6 +33,14 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 		window.location.href,
 		...Object.keys( currentArgs )
 	);
+
+	if ( isPreviewingTheme() ) {
+		params = {
+			...params,
+			theme_preview: currentlyPreviewingTheme(),
+		};
+	}
+
 	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
 
 	return {

package/src/components/routes/use-title.js

@@ -7,11 +7,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from './index';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useTitle( title ) {
 	const location = useLocation();

package/src/components/save-button/index.js

@@ -11,8 +11,14 @@ import { displayShortcut } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
+export default function SaveButton( {
+	className = 'edit-site-save-button__button',
+	variant = 'primary',
+	showTooltip = true,
+	icon,
+} ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
@@ -28,14 +34,28 @@ export default function SaveButton() {
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
-	const disabled = ! isDirty || isSaving;
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 
-	const label = __( 'Save' );
+	const getLabel = () => {
+		if ( disabled ) {
+			return __( 'Saved' );
+		}
+
+		if ( isPreviewingTheme() && isDirty ) {
+			return __( 'Activate & Save' );
+		} else if ( isPreviewingTheme() ) {
+			return __( 'Activate' );
+		}
+
+		return __( 'Save' );
+	};
+	const label = getLabel();
 
 	return (
 		<Button
-			variant="primary"
-			className="edit-site-save-button__button"
+			variant={ variant }
+			className={ className }
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
@@ -52,7 +72,8 @@ export default function SaveButton() {
 			 * of the button that we want to avoid. By setting `showTooltip`,
 			 & the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
-			showTooltip
+			showTooltip={ showTooltip }
+			icon={ icon }
 		>
 			{ label }
 		</Button>

package/src/components/save-hub/index.js

@@ -1,41 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
-import { sprintf, __, _n } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { sprintf, _n } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { displayShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import SaveButton from '../save-button';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-export default function SaveButton() {
-	const { countUnsavedChanges, isDirty, isSaving, isSaveViewOpen } =
-		useSelect( ( select ) => {
+export default function SaveHub() {
+	const { countUnsavedChanges, isDirty, isSaving } = useSelect(
+		( select ) => {
 			const {
 				__experimentalGetDirtyEntityRecords,
 				isSavingEntityRecord,
 			} = select( coreStore );
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const { isSaveViewOpened } = select( editSiteStore );
 			return {
 				isDirty: dirtyEntityRecords.length > 0,
 				isSaving: dirtyEntityRecords.some( ( record ) =>
 					isSavingEntityRecord( record.kind, record.name, record.key )
 				),
-				isSaveViewOpen: isSaveViewOpened(),
 				countUnsavedChanges: dirtyEntityRecords.length,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const disabled = ! isDirty || isSaving;
+		},
+		[]
+	);
 
-	const label = disabled ? __( 'Saved' ) : __( 'Save' );
+	const disabled = isSaving || ( ! isDirty && ! isPreviewingTheme() );
 
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
@@ -52,27 +49,12 @@ export default function SaveButton() {
 					) }
 				</span>
 			) }
-			<Button
+			<SaveButton
 				className="edit-site-save-hub__button"
-				variant={ disabled ? undefined : 'primary' }
-				aria-disabled={ disabled }
-				aria-expanded={ isSaveViewOpen }
-				isBusy={ isSaving }
-				onClick={
-					disabled ? undefined : () => setIsSaveViewOpened( true )
-				}
-				label={ label }
-				/*
-				 * We want the tooltip to show the keyboard shortcut only when the
-				 * button does something, i.e. when it's not disabled.
-				 */
-				shortcut={
-					disabled ? undefined : displayShortcut.primary( 's' )
-				}
-				icon={ disabled ? check : undefined }
-			>
-				{ label }
-			</Button>
+				variant={ disabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ disabled ? check : null }
+			/>
 		</HStack>
 	);
 }

package/src/components/save-panel/index.js

@@ -17,6 +17,7 @@ import { NavigableRegion } from '@wordpress/interface';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import { useActivateTheme } from '../../utils/use-activate-theme';
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -32,7 +33,18 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
+		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
+	) : (
+		<EntitiesSavedStates close={ onClose } />
+	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -44,7 +56,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				<EntitiesSavedStates close={ onClose } />
+				{ entitySavedStates }
 			</Modal>
 		) : null;
 	}
@@ -54,10 +66,10 @@ export default function SavePanel() {
 			className={ classnames( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
-			ariaLabel={ __( 'Save sidebar' ) }
+			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				<EntitiesSavedStates close={ onClose } />
+				entitySavedStates
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -32,13 +31,10 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
 	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
@@ -46,10 +42,10 @@ export default function ListViewSidebar() {
 				className="edit-site-editor__list-view-panel-header"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
+					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>

package/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-site-editor__inserter-panel,
 .edit-site-editor__list-view-panel {
 	height: 100%;
@@ -6,9 +11,11 @@
 }
 
 .edit-site-editor__list-view-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 }
 
 .edit-site-editor__inserter-panel-header {
@@ -42,6 +49,17 @@
 }
 
 .edit-site-editor__list-view-panel-content {
-	overflow-y: auto;
-	padding: $grid-unit-10;
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

package/src/components/sidebar/index.js

@@ -6,6 +6,7 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -21,7 +22,11 @@ import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-gl
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
-import { useLocation } from '../routes';
+import { unlock } from '../../private-apis';
+import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
+import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 function SidebarScreens() {
 	useSyncPathWithURL();
@@ -40,6 +45,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>
+			<NavigatorScreen path="/page">
+				<SidebarNavigationScreenPages />
+			</NavigatorScreen>
+			<NavigatorScreen path="/page/:postId">
+				<SidebarNavigationScreenPage />
+			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>

package/src/components/sidebar/style.scss

@@ -3,7 +3,8 @@
 	overflow-y: auto;
 
 	.components-navigator-screen {
-		@include custom-scrollbars-on-hover;
+		@include custom-scrollbars-on-hover(transparent, $gray-700);
+		scrollbar-gutter: stable;
 	}
 }
 

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -4,9 +4,9 @@
 import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-
-import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -15,26 +15,48 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
+import { unlock } from '../../private-apis';
 
 export default function GlobalStylesSidebar() {
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const editorMode = useSelect(
-		( select ) => select( editSiteStore ).getEditorMode(),
+	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _isVisualEditorMode =
+				'visual' === select( editSiteStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === getCanvasMode();
+
+			return {
+				isStyleBookOpened:
+					'style-book' === getEditorCanvasContainerView(),
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core/edit-site' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+			};
+		},
 		[]
 	);
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 
 	useEffect( () => {
-		if ( editorMode !== 'visual' ) {
-			setIsStyleBookOpened( false );
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
 		}
-	}, [ editorMode ] );
+	}, [ shouldClearCanvasContainerView ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
 			identifier="edit-site/global-styles"
 			title={ __( 'Styles' ) }
 			icon={ styles }
-			closeLabel={ __( 'Close Styles sidebar' ) }
+			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex className="edit-site-global-styles-sidebar__header">
@@ -46,10 +68,12 @@ export default function GlobalStylesSidebar() {
 							icon={ seen }
 							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
-							disabled={ editorMode !== 'visual' }
-							onClick={ () => {
-								setIsStyleBookOpened( ! isStyleBookOpened );
-							} }
+							disabled={ shouldClearCanvasContainerView }
+							onClick={ () =>
+								setEditorCanvasContainerView(
+									isStyleBookOpened ? undefined : 'style-book'
+								)
+							}
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -58,10 +82,7 @@ export default function GlobalStylesSidebar() {
 				</Flex>
 			}
 		>
-			<GlobalStylesUI
-				isStyleBookOpened={ isStyleBookOpened }
-				onCloseStyleBook={ () => setIsStyleBookOpened( false ) }
-			/>
+			<GlobalStylesUI />
 		</DefaultSidebar>
 	);
 }

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

@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody } from '@wordpress/components';
+import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect, Fragment } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -16,7 +16,9 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
+import LastRevision from './template-revisions';
 import TemplateCard from './template-card';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
 
@@ -69,14 +71,23 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings' ) }
+				closeLabel={ __( 'Close Settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<PanelBody>
-						<TemplateCard />
-					</PanelBody>
+					<>
+						<PanelBody>
+							<TemplateCard />
+							<PanelRow
+								header={ __( 'Editing history' ) }
+								className="edit-site-template-revisions"
+							>
+								<LastRevision />
+							</PanelRow>
+						</PanelBody>
+						<PluginTemplateSettingPanel.Slot />
+					</>
 				) }
 				{ sidebarName === SIDEBAR_BLOCK && (
 					<InspectorSlot bubblesVirtually />