@wordpress/edit-site 5.3.0 → 5.3.2

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

@@ -14,6 +14,7 @@ import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,6 +38,7 @@ import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../experiments';
+import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -44,6 +46,20 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 
 function GlobalStylesActionMenu() {
 	const { toggle } = useDispatch( preferencesStore );
+	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 { useGlobalStylesReset } = unlock( blockEditorExperiments );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
@@ -64,10 +80,14 @@ function GlobalStylesActionMenu() {
 						onClick: () =>
 							toggle( 'core/edit-site', 'welcomeGuideStyles' ),
 					},
-					{
-						title: __( 'Additional CSS' ),
-						onClick: loadCustomCSS,
-					},
+					...( canEditCSS
+						? [
+								{
+									title: __( 'Additional CSS' ),
+									onClick: loadCustomCSS,
+								},
+						  ]
+						: [] ),
 				] }
 			/>
 		</GlobalStylesMenuFill>
@@ -209,6 +229,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<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>

package/src/components/layout/index.js

@@ -38,6 +38,8 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
+import { unlock } from '../../experiments';
+import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -66,9 +68,9 @@ export default function Layout() {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
-			const { __unstableGetCanvasMode } = select( editSiteStore );
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
 			return {
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 				previousShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/previous-region'
 				),
@@ -266,6 +268,8 @@ export default function Layout() {
 						) }
 					</AnimatePresence>
 
+					<SavePanel />
+
 					{ showCanvas && (
 						<div
 							className={ classnames(

package/src/components/layout/style.scss

@@ -85,9 +85,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	}
 
 	> div {
-		overflow-y: auto;
-		min-height: 100%;
-		@include custom-scrollbars-on-hover;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 
 	.resizable-editor__drag-handle {
@@ -205,3 +205,25 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		border-radius: $radius-block-ui;
 	}
 }
+
+.edit-site-layout__actions {
+	z-index: z-index(".edit-site-layout__actions");
+	position: fixed !important; // Need to override the default relative positioning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	width: $sidebar-width;
+	color: $gray-900;
+	background: $white;
+
+	&:focus,
+	&:focus-within {
+		top: 0;
+		bottom: 0;
+	}
+
+	@include break-medium {
+		border-left: $border-width solid $gray-300;
+	}
+}

package/src/components/navigation-inspector/index.js

@@ -20,7 +20,7 @@ import NavigationMenu from './navigation-menu';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-export default function NavigationInspector() {
+export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
 		clientIdToRef,
@@ -206,7 +206,10 @@ export default function NavigationInspector() {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
+					<NavigationMenu
+						innerBlocks={ publishedInnerBlocks }
+						onSelect={ onSelect }
+					/>
 				</BlockEditorProvider>
 			) }
 

package/src/components/navigation-inspector/navigation-menu.js

@@ -36,7 +36,7 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks } ) {
+export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	const { OffCanvasEditor } = unlock( blockEditorExperiments );
@@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } />;
+	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
 }

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

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { EntitiesSavedStates } from '@wordpress/editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
+
+export default function SavePanel() {
+	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
+		const { isSaveViewOpened, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			canvasMode: getCanvasMode(),
+		};
+	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const onClose = () => setIsSaveViewOpened( false );
+
+	if ( canvasMode === 'view' ) {
+		return isSaveViewOpen ? (
+			<Modal
+				className="edit-site-save-panel__modal"
+				onRequestClose={ onClose }
+				__experimentalHideHeader
+			>
+				<EntitiesSavedStates close={ onClose } />
+			</Modal>
+		) : null;
+	}
+
+	return (
+		<NavigableRegion
+			className="edit-site-layout__actions"
+			ariaLabel={ __( 'Save sidebar' ) }
+		>
+			{ isSaveViewOpen ? (
+				<EntitiesSavedStates close={ onClose } />
+			) : (
+				<div className="edit-site-editor__toggle-save-panel">
+					<Button
+						variant="secondary"
+						className="edit-site-editor__toggle-save-panel-button"
+						onClick={ () => setIsSaveViewOpened( true ) }
+						aria-expanded={ false }
+					>
+						{ __( 'Open save panel' ) }
+					</Button>
+				</div>
+			) }
+		</NavigableRegion>
+	);
+}

package/src/components/save-panel/style.scss

@@ -0,0 +1,5 @@
+.edit-site-save-panel__modal {
+	@include break-small() {
+		width: 600px;
+	}
+}

package/src/components/sidebar/index.js

@@ -2,7 +2,9 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -11,6 +13,7 @@ import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SaveButton from '../save-button';
 
 function SidebarScreens() {
 	useSyncSidebarPathWithURL();
@@ -26,13 +29,30 @@ function SidebarScreens() {
 }
 
 function Sidebar() {
+	const { isDirty } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isDirty: dirtyEntityRecords.length > 0,
+		};
+	}, [] );
+
 	return (
-		<NavigatorProvider
-			className="edit-site-sidebar__content"
-			initialPath="/"
-		>
-			<SidebarScreens />
-		</NavigatorProvider>
+		<>
+			<NavigatorProvider
+				className="edit-site-sidebar__content"
+				initialPath="/"
+			>
+				<SidebarScreens />
+			</NavigatorProvider>
+			{ isDirty && (
+				<div className="edit-site-sidebar__footer">
+					<SaveButton />
+				</div>
+			) }
+		</>
 	);
 }
 

package/src/components/sidebar/style.scss

@@ -1,3 +1,18 @@
+.edit-site-sidebar__content {
+	flex-grow: 1;
+	overflow-y: auto;
+	@include custom-scrollbars-on-hover;
+}
+
+.edit-site-sidebar__footer {
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0 $canvas-padding;
+	padding: $canvas-padding 0;
+	display: flex;
+	justify-content: flex-end;
+}
+
 .edit-site-sidebar__content.edit-site-sidebar__content {
 	overflow-x: unset;
 }

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -2,14 +2,34 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import NavigationInspector from '../navigation-inspector';
+import { useHistory } from '../routes';
 
 export default function SidebarNavigationScreenNavigationMenus() {
+	const history = useHistory();
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+				} );
+			}
+		},
+		[ history ]
+	);
 	return (
 		<SidebarNavigationScreen
 			path="/navigation"
@@ -17,7 +37,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
-					<NavigationInspector />
+					<NavigationInspector onSelect={ onSelect } />
 				</div>
 			}
 		/>

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

@@ -27,6 +27,7 @@ import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import SiteIcon from '../site-icon';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../experiments';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
@@ -38,13 +39,10 @@ const SiteHub = forwardRef(
 		const { canvasMode, dashboardLink, entityConfig } = useSelect(
 			( select ) => {
 				select( editSiteStore ).getEditedPostType();
-				const {
-					__unstableGetCanvasMode,
-					getSettings,
-					getEditedPostType,
-				} = select( editSiteStore );
+				const { getCanvasMode, getSettings, getEditedPostType } =
+					unlock( select( editSiteStore ) );
 				return {
-					canvasMode: __unstableGetCanvasMode(),
+					canvasMode: getCanvasMode(),
 					dashboardLink: getSettings().__experimentalDashboardLink,
 					entityConfig: select( coreStore ).getEntityConfig(
 						'postType',
@@ -56,7 +54,7 @@ const SiteHub = forwardRef(
 		);
 		const disableMotion = useReducedMotion();
 		const isMobileViewport = useViewportMatch( 'medium', '<' );
-		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+		const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 		const { clearSelectedBlock } = useDispatch( blockEditorStore );
 		const showEditButton =
 			( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
@@ -77,7 +75,7 @@ const SiteHub = forwardRef(
 					onClick: () => {
 						clearSelectedBlock();
 						setIsMobileCanvasVisible( false );
-						__unstableSetCanvasMode( 'view' );
+						setCanvasMode( 'view' );
 					},
 			  };
 		const { getTitle } = useEditedEntityRecord();
@@ -137,7 +135,7 @@ const SiteHub = forwardRef(
 					<Button
 						className="edit-site-site-hub__edit-button"
 						onClick={ () => {
-							__unstableSetCanvasMode( 'edit' );
+							setCanvasMode( 'edit' );
 						} }
 						variant="primary"
 					>

package/src/components/site-hub/style.scss

@@ -7,6 +7,7 @@
 
 .edit-site-site-hub__edit-button {
 	height: $grid-unit-40;
+	color: $white;
 }
 
 .edit-site-site-hub__post-type {

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -9,15 +9,16 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../experiments';
 
 export default function useSyncCanvasModeWithURL() {
 	const history = useHistory();
 	const { params } = useLocation();
 	const canvasMode = useSelect(
-		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
 		[]
 	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const currentCanvasMode = useRef( canvasMode );
 	const { canvas: canvasInUrl = 'view' } = params;
 	const currentCanvasInUrl = useRef( canvasInUrl );
@@ -34,7 +35,7 @@ export default function useSyncCanvasModeWithURL() {
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
 		if ( canvasInUrl !== currentCanvasMode.current ) {
-			__unstableSetCanvasMode( canvasInUrl );
+			setCanvasMode( canvasInUrl );
 		}
 	}, [ canvasInUrl ] );
 }

package/src/store/actions.js

@@ -530,27 +530,3 @@ export const switchEditorMode =
 			speak( __( 'Mosaic view selected' ), 'assertive' );
 		}
 	};
-
-/**
- * Action that switches the canvas mode.
- *
- * @param {?string} mode Canvas mode.
- */
-export const __unstableSetCanvasMode =
-	( mode ) =>
-	( { registry, dispatch } ) => {
-		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
-		dispatch( {
-			type: 'SET_CANVAS_MODE',
-			mode,
-		} );
-		// Check if the block list view should be open by default.
-		if (
-			mode === 'edit' &&
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-site', 'showListViewByDefault' )
-		) {
-			dispatch.setIsListViewOpened( true );
-		}
-	};

package/src/store/index.js

@@ -8,8 +8,11 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../experiments';
 
 export const storeConfig = {
 	reducer,
@@ -19,3 +22,5 @@ export const storeConfig = {
 
 export const store = createReduxStore( STORE_NAME, storeConfig );
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );

package/src/store/private-actions.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Action that switches the canvas mode.
+ *
+ * @param {?string} mode Canvas mode.
+ */
+export const setCanvasMode =
+	( mode ) =>
+	( { registry, dispatch } ) => {
+		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
+		dispatch( {
+			type: 'SET_CANVAS_MODE',
+			mode,
+		} );
+		// Check if the block list view should be open by default.
+		if (
+			mode === 'edit' &&
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'showListViewByDefault' )
+		) {
+			dispatch.setIsListViewOpened( true );
+		}
+	};

package/src/store/private-selectors.js

@@ -0,0 +1,10 @@
+/**
+ * Returns the current canvas mode.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Canvas mode.
+ */
+export function getCanvasMode( state ) {
+	return state.canvasMode;
+}

package/src/store/selectors.js

@@ -288,17 +288,6 @@ export function getEditorMode( state ) {
 	return __unstableGetPreference( state, 'editorMode' );
 }
 
-/**
- * Returns the current canvas mode.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} Canvas mode.
- */
-export function __unstableGetCanvasMode( state ) {
-	return state.canvasMode;
-}
-
 /**
  * @deprecated
  */

package/src/style.scss

@@ -19,6 +19,7 @@
 @import "./components/welcome-guide/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/save-panel/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";