@wordpress/edit-site 5.11.0 → 5.12.0

package/src/components/layout/index.js

@@ -215,7 +215,7 @@ export default function Layout() {
 									whileHover={
 										isEditorPage && canvasMode === 'view'
 											? {
-													scale: 1.006,
+													scale: 1.005,
 													transition: {
 														duration:
 															disableMotion ||
@@ -227,14 +227,8 @@ export default function Layout() {
 											  }
 											: {}
 									}
-									// Setting a transform property (in this case scale) on an element makes it act as a containing block for its descendants.
-									// This means that the snackbar notices inside this component are repositioned to be relative to this element.
-									// To avoid the snackbars jumping about we need to ensure that a transform property is always set.
-									// Setting a scale of 1 is interpred by framer as no change, so once the animation completes
-									// the transform property of this element is set to none, thus removing its role as a container block.
-									// Instead we set the initial scale of this element to 1.0001 so that there is always a transform property set.
-									// If we set the initial scale to less than 1.001 then JavaScript rounds it to 1 and the problem reoccurs.
-									initial={ { scale: 1.001 } }
+									initial={ false }
+									layout="position"
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',

package/src/components/list/table.js

@@ -13,8 +13,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import TemplateActions from '../template-actions';
 import Link from '../routes/link';
-import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
@@ -126,7 +126,11 @@ export default function Table( { templateType } ) {
 							) : null }
 						</td>
 						<td className="edit-site-list-table-column" role="cell">
-							<Actions template={ template } />
+							<TemplateActions
+								postType={ template.type }
+								postId={ template.id }
+								className="edit-site-list-table__actions"
+							/>
 						</td>
 					</tr>
 				) ) }

package/src/components/page-actions/delete-page-menu-item.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function DeletePageMenuItem( { postId, onRemove } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const page = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
+		[ postId ]
+	);
+	async function removePage() {
+		try {
+			await deleteEntityRecord(
+				'postType',
+				'page',
+				postId,
+				{},
+				{ throwOnError: true }
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: The page's title. */
+					__( '"%s" deleted.' ),
+					decodeEntities( page.title.rendered )
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-page-removed',
+				}
+			);
+			onRemove?.();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the page.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			setIsModalOpen( false );
+		}
+	}
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ removePage }
+				onCancel={ () => setIsModalOpen( false ) }
+			>
+				{ __( 'Are you sure you want to delete this page?' ) }
+			</ConfirmDialog>
+		</>
+	);
+}

package/src/components/page-actions/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DeletePageMenuItem from './delete-page-menu-item';
+
+export default function PageActions( {
+	postId,
+	className,
+	toggleProps,
+	onRemove,
+} ) {
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ () => (
+				<MenuGroup>
+					<DeletePageMenuItem
+						postId={ postId }
+						onRemove={ onRemove }
+					/>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/page-content-lock/constants.js

@@ -0,0 +1,5 @@
+export const CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];

package/src/components/page-content-lock/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import { useDisableNonContentBlocks } from './use-disable-non-content-blocks';
+
+/**
+ * Component that when rendered, locks the site editor so that only page content
+ * can be edited.
+ */
+export function PageContentLock() {
+	useDisableNonContentBlocks();
+}
+
+export { usePageContentLockNotifications } from './use-page-content-lock-notifications';

package/src/components/page-content-lock/use-disable-non-content-blocks.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { CONTENT_BLOCK_TYPES } from './constants';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+
+/**
+ * Disables non-content blocks using the `useBlockEditingMode` hook.
+ */
+export function useDisableNonContentBlocks() {
+	useBlockEditingMode( 'disabled' );
+	useEffect( () => {
+		addFilter(
+			'editor.BlockEdit',
+			'core/edit-site/disable-non-content-blocks',
+			withDisableNonContentBlocks
+		);
+		return () =>
+			removeFilter(
+				'editor.BlockEdit',
+				'core/edit-site/disable-non-content-blocks'
+			);
+	}, [] );
+}
+
+const withDisableNonContentBlocks = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const isContent = CONTENT_BLOCK_TYPES.includes( props.name );
+		const mode = isContent ? 'contentOnly' : undefined;
+		useBlockEditingMode( mode );
+		return <BlockEdit { ...props } />;
+	},
+	'withBlockEditingMode'
+);

package/src/components/page-content-lock/use-page-content-lock-notifications.js

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Hook that displays notifications that guide the user towards using the
+ * content vs. template editing modes.
+ *
+ * @return {import('react').RefObject<HTMLElement>} Ref which should be passed
+ *                                                  (using useMergeRefs()) to
+ *                                                  the editor iframe canvas.
+ */
+export function usePageContentLockNotifications() {
+	const ref = useEditTemplateNotification();
+	useBackToPageNotification();
+	return ref;
+}
+
+/**
+ * Hook that displays a 'Edit your template to edit this block' notification
+ * when the user is focusing on editing page content and clicks on a locked
+ * template block.
+ *
+ * @return {import('react').RefObject<HTMLElement>} Ref which should be passed
+ *                                                  (using useMergeRefs()) to
+ *                                                  the editor iframe canvas.
+ */
+function useEditTemplateNotification() {
+	const hasPageContentLock = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentLock(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+	return useRefEffect(
+		( node ) => {
+			const handleClick = ( event ) => {
+				if (
+					! alreadySeen.current &&
+					hasPageContentLock &&
+					event.target.classList.contains( 'is-root-container' )
+				) {
+					createInfoNotice(
+						__( 'Edit your template to edit this block' ),
+						{
+							isDismissible: true,
+							type: 'snackbar',
+							actions: [
+								{
+									label: __( 'Edit template' ),
+									onClick: () =>
+										setHasPageContentLock( false ),
+								},
+							],
+						}
+					);
+					alreadySeen.current = true;
+				}
+			};
+			node.addEventListener( 'click', handleClick );
+			return () => node.removeEventListener( 'click', handleClick );
+		},
+		[
+			hasPageContentLock,
+			alreadySeen,
+			createInfoNotice,
+			setHasPageContentLock,
+		]
+	);
+}
+
+/**
+ * Hook that displays a 'You are editing a template' notification when the user
+ * switches from focusing on editing page content to editing a template.
+ */
+function useBackToPageNotification() {
+	const hasPageContentLock = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentLock(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+	const prevHasPageContentLock = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if (
+			! alreadySeen.current &&
+			prevHasPageContentLock.current &&
+			! hasPageContentLock
+		) {
+			createInfoNotice( __( 'You are editing a template' ), {
+				isDismissible: true,
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Back to page' ),
+						onClick: () => setHasPageContentLock( true ),
+					},
+				],
+			} );
+			alreadySeen.current = true;
+		}
+		prevHasPageContentLock.current = hasPageContentLock;
+	}, [
+		alreadySeen,
+		prevHasPageContentLock,
+		hasPageContentLock,
+		createInfoNotice,
+		setHasPageContentLock,
+	] );
+}

package/src/components/resizable-frame/index.js

@@ -171,6 +171,18 @@ function ResizableFrame( {
 		},
 	};
 
+	const resizeHandleVariants = {
+		default: {
+			opacity: 1,
+			left: -16,
+		},
+		resizing: {
+			opacity: 1,
+			left: -16,
+			scaleY: 1.3,
+		},
+	};
+
 	return (
 		<ResizableBox
 			as={ motion.div }
@@ -212,20 +224,18 @@ function ResizableFrame( {
 						<motion.div
 							key="handle"
 							className="edit-site-resizable-frame__handle"
+							variants={ resizeHandleVariants }
+							animate={ isResizing ? 'resizing' : 'default' }
 							title="Drag to resize"
 							initial={ {
 								opacity: 0,
 								left: 0,
 							} }
-							animate={ {
-								opacity: 1,
-								left: -15,
-							} }
 							exit={ {
 								opacity: 0,
 								left: 0,
 							} }
-							whileHover={ { scale: 1.1 } }
+							whileHover={ { scaleY: 1.3 } }
 						/>
 					) : null,
 			} }

package/src/components/resizable-frame/style.scss

@@ -28,42 +28,44 @@
 }
 
 .edit-site-resizable-frame__handle {
-	position: absolute;
-	width: 5px;
-	height: 50px;
-	background-color: rgba(255, 255, 255, 0.3);
-	z-index: 100;
-	border-radius: 5px;
+	align-items: center;
+	background-color: rgba($gray-700, 0.4);
+	border-radius: $grid-unit-05;
 	cursor: col-resize;
 	display: flex;
-	align-items: center;
+	height: $grid-unit-80;
 	justify-content: flex-end;
-	top: 50%;
+	position: absolute;
+	top: calc(50% - #{$grid-unit-40});
+	width: $grid-unit-05;
+	z-index: 100;
+
 	&::before {
-		position: absolute;
-		left: 100%;
-		height: 100%;
-		width: $grid-unit-30;
 		content: "";
+		height: 100%;
+		left: 100%;
+		position: absolute;
+		width: $grid-unit-40;
 	}
 
 	&::after {
+		content: "";
+		height: 100%;
 		position: absolute;
 		right: 100%;
-		height: 100%;
-		width: $grid-unit-30;
-		content: "";
+		width: $grid-unit-40;
 	}
 
-	&:hover {
+	&:hover,
+	.is-resizing & {
 		background-color: var(--wp-admin-theme-color);
 	}
 
 	.edit-site-resizable-frame__handle-label {
-		border-radius: 2px;
 		background: var(--wp-admin-theme-color);
-		padding: 4px 8px;
+		border-radius: 2px;
 		color: #fff;
 		margin-right: $grid-unit-10;
+		padding: 4px 8px;
 	}
 }

package/src/components/revisions/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,6 +25,10 @@ import EditorCanvasContainer from '../editor-canvas-container';
 const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
 	unlock( blockEditorPrivateApis );
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 function Revisions( { onClose, userConfig, blocks } ) {
 	const { baseConfig } = useSelect(
 		( select ) => ( {
@@ -42,7 +41,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	);
 
 	const mergedConfig = useMemo( () => {
-		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
 			return mergeBaseAndUserConfigs( baseConfig, userConfig );
 		}
 		return {};
@@ -65,7 +64,7 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
 
 	const editorStyles =
-		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
 			? globalStyles
 			: settings.styles;
 

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

@@ -17,6 +17,7 @@ export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
+	defaultLabel,
 	icon,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
@@ -38,10 +39,15 @@ export default function SaveButton( {
 	const disabled = isSaving || ! activateSaveEnabled;
 
 	const getLabel = () => {
+		if ( isSaving ) {
+			return __( 'Saving' );
+		}
 		if ( disabled ) {
 			return __( 'Saved' );
 		}
 
+		if ( defaultLabel ) return defaultLabel;
+
 		if ( isPreviewingTheme() && isDirty ) {
 			return __( 'Activate & Save' );
 		} else if ( isPreviewingTheme() ) {