@wordpress/edit-site 5.10.0 → 5.12.0

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

@@ -3,6 +3,31 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
+
+	.edit-site-site-hub__site-view-link {
+		flex-grow: 0;
+		@include break-mobile() {
+			opacity: 0;
+			transition: opacity 0.2s ease-in-out;
+		}
+		&:focus {
+			outline: none;
+			box-shadow: none;
+			opacity: 1;
+		}
+		svg {
+			fill: $white;
+		}
+	}
+	&:hover {
+		.edit-site-site-hub__site-view-link {
+			opacity: 1;
+		}
+	}
 }
 
 .edit-site-site-hub__post-type {
@@ -29,6 +54,7 @@
 
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
+	flex-grow: 1;
 }
 
 .edit-site-site-hub_toggle-command-center {

package/src/components/start-template-options/style.scss

@@ -1,28 +1,27 @@
-.edit-site-start-template-options__modal {
-	.components-modal__content {
-		padding-bottom: 0;
-	}
+$actions-height: 92px;
 
-	.components-modal__children-container {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-
-		.edit-site-start-template-options__modal__actions {
-			margin-top: auto;
-			position: sticky;
-			bottom: 0;
-			background-color: $white;
-			margin-left: - $grid-unit-40;
-			margin-right: - $grid-unit-40;
-			padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
-			border-top: 1px solid $gray-300;
-			z-index: z-index(".edit-site-start-template-options__modal__actions");
-		}
+.edit-site-start-template-options__modal {
+	.edit-site-start-template-options__modal__actions {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: $actions-height;
+		background-color: $white;
+		margin-left: - $grid-unit-40;
+		margin-right: - $grid-unit-40;
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+		border-top: 1px solid $gray-300;
+		z-index: z-index(".edit-site-start-template-options__modal__actions");
 	}
 
 	.block-editor-block-patterns-list {
-		padding-bottom: $grid-unit-40;
+		// Since the actions container is positioned absolutely,
+		// this padding bottom ensures that the content wrapper will properly
+		// detect overflowing content and start showing scrollbars at the right
+		// moment. Without this padding, the content would render under the actions
+		// bar without causing the wrapper to show a scrollbar.
+		padding-bottom: $actions-height;
 	}
 }
 

package/src/components/style-book/index.js

@@ -13,6 +13,7 @@ import {
 	Disabled,
 	TabPanel,
 } from '@wordpress/components';
+
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
@@ -29,7 +30,8 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, memo } from '@wordpress/element';
+import { useMemo, useState, memo } from '@wordpress/element';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -161,7 +163,14 @@ function getExamples() {
 	return [ headingsExample, ...otherExamples ];
 }
 
-function StyleBook( { isSelected, onSelect } ) {
+function StyleBook( {
+	enableResizing = true,
+	isSelected,
+	onClick,
+	onSelect,
+	showCloseButton = true,
+	showTabs = true,
+} ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
@@ -192,10 +201,16 @@ function StyleBook( { isSelected, onSelect } ) {
 	);
 
 	return (
-		<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>
+		<EditorCanvasContainer
+			enableResizing={ enableResizing }
+			closeButtonLabel={
+				showCloseButton ? __( 'Close Style Book' ) : null
+			}
+		>
 			<div
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
+					'is-button': !! onClick,
 				} ) }
 				style={ {
 					color: textColor,
@@ -203,53 +218,125 @@ function StyleBook( { isSelected, onSelect } ) {
 				} }
 			>
 				{ resizeObserver }
-				<TabPanel
-					className="edit-site-style-book__tab-panel"
-					tabs={ tabs }
-				>
-					{ ( tab ) => (
-						<Iframe
-							className="edit-site-style-book__iframe"
-							name="style-book-canvas"
-							tabIndex={ 0 }
-						>
-							<EditorStyles styles={ settings.styles } />
-							<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 !important; }` +
-										STYLE_BOOK_IFRAME_STYLES
-								}
-							</style>
-							<Examples
-								className={ classnames(
-									'edit-site-style-book__examples',
-									{
-										'is-wide': sizes.width > 600,
-									}
-								) }
-								examples={ examples }
+				{ showTabs ? (
+					<TabPanel
+						className="edit-site-style-book__tab-panel"
+						tabs={ tabs }
+					>
+						{ ( tab ) => (
+							<StyleBookBody
 								category={ tab.name }
-								label={ sprintf(
-									// translators: %s: Category of blocks, e.g. Text.
-									__(
-										'Examples of blocks in the %s category'
-									),
-									tab.title
-								) }
+								examples={ examples }
 								isSelected={ isSelected }
 								onSelect={ onSelect }
+								settings={ settings }
+								sizes={ sizes }
+								title={ tab.title }
 							/>
-						</Iframe>
-					) }
-				</TabPanel>
+						) }
+					</TabPanel>
+				) : (
+					<StyleBookBody
+						examples={ examples }
+						isSelected={ isSelected }
+						onClick={ onClick }
+						onSelect={ onSelect }
+						settings={ settings }
+						sizes={ sizes }
+					/>
+				) }
 			</div>
 		</EditorCanvasContainer>
 	);
 }
 
+const StyleBookBody = ( {
+	category,
+	examples,
+	isSelected,
+	onClick,
+	onSelect,
+	settings,
+	sizes,
+	title,
+} ) => {
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	// The presence of an `onClick` prop indicates that the Style Book is being used as a button.
+	// In this case, add additional props to the iframe to make it behave like a button.
+	const buttonModeProps = {
+		role: 'button',
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			const { keyCode } = event;
+			if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		onClick: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			if ( onClick ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		readonly: true,
+	};
+
+	const buttonModeStyles = onClick
+		? 'body { cursor: pointer; } body * { pointer-events: none; }'
+		: '';
+
+	return (
+		<Iframe
+			className={ classnames( 'edit-site-style-book__iframe', {
+				'is-focused': isFocused && !! onClick,
+				'is-button': !! onClick,
+			} ) }
+			name="style-book-canvas"
+			tabIndex={ 0 }
+			{ ...( onClick ? buttonModeProps : {} ) }
+		>
+			<EditorStyles styles={ settings.styles } />
+			<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 !important; }` +
+						STYLE_BOOK_IFRAME_STYLES +
+						buttonModeStyles
+				}
+			</style>
+			<Examples
+				className={ classnames( 'edit-site-style-book__examples', {
+					'is-wide': sizes.width > 600,
+				} ) }
+				examples={ examples }
+				category={ category }
+				label={
+					title
+						? sprintf(
+								// translators: %s: Category of blocks, e.g. Text.
+								__( 'Examples of blocks in the %s category' ),
+								title
+						  )
+						: __( 'Examples of blocks' )
+				}
+				isSelected={ isSelected }
+				onSelect={ onSelect }
+			/>
+		</Iframe>
+	);
+};
+
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
 		const composite = useCompositeState( { orientation: 'vertical' } );
@@ -260,7 +347,9 @@ const Examples = memo(
 				aria-label={ label }
 			>
 				{ examples
-					.filter( ( example ) => example.category === category )
+					.filter( ( example ) =>
+						category ? example.category === category : true
+					)
 					.map( ( example ) => (
 						<Example
 							key={ example.name }
@@ -270,7 +359,7 @@ const Examples = memo(
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
 							onClick={ () => {
-								onSelect( example.name );
+								onSelect?.( example.name );
 							} }
 						/>
 					) ) }

package/src/components/style-book/style.scss

@@ -1,3 +1,22 @@
+.edit-site-style-book {
+	// Ensure the style book fills the available vertical space.
+	// This is useful when the style book is used to fill a frame.
+	height: 100%;
+	&.is-button {
+		border-radius: $radius-block-ui * 4;
+	}
+}
+
+.edit-site-style-book__iframe {
+	&.is-button {
+		border-radius: $radius-block-ui * 4;
+	}
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+	}
+}
+
 .edit-site-style-book__tab-panel {
 	.components-tab-panel__tabs {
 		background: $white;

package/src/components/{list/actions → template-actions}/index.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -11,17 +11,27 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
-import isTemplateRemovable from '../../../utils/is-template-removable';
-import isTemplateRevertable from '../../../utils/is-template-revertable';
+import { store as editSiteStore } from '../../store';
+import isTemplateRemovable from '../../utils/is-template-removable';
+import isTemplateRevertable from '../../utils/is-template-revertable';
 import RenameMenuItem from './rename-menu-item';
 
-export default function Actions( { template } ) {
+export default function TemplateActions( {
+	postType,
+	postId,
+	className,
+	toggleProps,
+	onRemove,
+} ) {
+	const template = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'postType', postType, postId ),
+		[ postType, postId ]
+	);
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
-
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );
 
@@ -38,9 +48,17 @@ export default function Actions( { template } ) {
 				template.id
 			);
 
-			createSuccessNotice( __( 'Entity reverted.' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				sprintf(
+					/* translators: The template/part's name. */
+					__( '"%s" reverted.' ),
+					template.title.rendered
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-template-reverted',
+				}
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
@@ -55,7 +73,8 @@ export default function Actions( { template } ) {
 		<DropdownMenu
 			icon={ moreVertical }
 			label={ __( 'Actions' ) }
-			className="edit-site-list-table__actions"
+			className={ className }
+			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
@@ -70,6 +89,7 @@ export default function Actions( { template } ) {
 								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
+									onRemove?.();
 									onClose();
 								} }
 							>

package/src/components/use-edited-entity-record/index.js

@@ -12,11 +12,12 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../store';
 
 export default function useEditedEntityRecord( postType, postId ) {
-	const { record, title, description, isLoaded } = useSelect(
+	const { record, title, description, isLoaded, icon } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
 			const { __experimentalGetTemplateInfo: getTemplateInfo } =
 				select( editorStore );
 			const usedPostType = postType ?? getEditedPostType();
@@ -26,7 +27,13 @@ export default function useEditedEntityRecord( postType, postId ) {
 				usedPostType,
 				usedPostId
 			);
-			const _isLoaded = !! usedPostId;
+			const _isLoaded =
+				usedPostId &&
+				hasFinishedResolution( 'getEditedEntityRecord', [
+					'postType',
+					usedPostType,
+					usedPostId,
+				] );
 			const templateInfo = getTemplateInfo( _record );
 
 			return {
@@ -34,6 +41,7 @@ export default function useEditedEntityRecord( postType, postId ) {
 				title: templateInfo.title,
 				description: templateInfo.description,
 				isLoaded: _isLoaded,
+				icon: templateInfo.icon,
 			};
 		},
 		[ postType, postId ]
@@ -41,6 +49,7 @@ export default function useEditedEntityRecord( postType, postId ) {
 
 	return {
 		isLoaded,
+		icon,
 		record,
 		getTitle: () => ( title ? decodeEntities( title ) : null ),
 		getDescription: () =>

package/src/hooks/commands/use-edit-mode-commands.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { trash, backup } from '@wordpress/icons';
+import { useCommandLoader } from '@wordpress/commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import useEditedEntityRecord from '../../components/use-edited-entity-record';
+import isTemplateRemovable from '../../utils/is-template-removable';
+import isTemplateRevertable from '../../utils/is-template-revertable';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useEditModeCommandLoader() {
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const history = useHistory();
+	const { isLoaded, record: template } = useEditedEntityRecord();
+	const isRemovable =
+		isLoaded && !! template && isTemplateRemovable( template );
+	const isRevertable =
+		isLoaded && !! template && isTemplateRevertable( template );
+
+	const commands = [];
+	if ( isRemovable ) {
+		const label =
+			template.type === 'wp_template'
+				? __( 'Delete template' )
+				: __( 'Delete template part' );
+		commands.push( {
+			name: 'core/remove-template',
+			label,
+			icon: trash,
+			context: 'site-editor-edit',
+			callback: ( { close } ) => {
+				removeTemplate( template );
+				// Navigate to the template list
+				history.push( {
+					path: '/' + template.type,
+				} );
+				close();
+			},
+		} );
+	}
+	if ( isRevertable ) {
+		const label =
+			template.type === 'wp_template'
+				? __( 'Reset template' )
+				: __( 'Reset template part' );
+		commands.push( {
+			name: 'core/reset-template',
+			label,
+			icon: backup,
+			callback: ( { close } ) => {
+				revertTemplate( template );
+				close();
+			},
+		} );
+	}
+
+	return {
+		isLoading: ! isLoaded,
+		commands,
+	};
+}
+
+export function useEditModeCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/manipulate-document',
+		hook: useEditModeCommandLoader,
+		context: 'site-editor-edit',
+	} );
+}

package/src/hooks/push-changes-to-global-styles/index.js

@@ -29,7 +29,9 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, useBlockEditingMode } = unlock(
+	blockEditorPrivateApis
+);
 
 // TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
 // removed by moving PushChangesToGlobalStylesControl to
@@ -208,15 +210,19 @@ function PushChangesToGlobalStylesControl( {
 }
 
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) =>
-		(
+	( BlockEdit ) => ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		return (
 			<>
 				<BlockEdit { ...props } />
-				<InspectorAdvancedControls>
-					<PushChangesToGlobalStylesControl { ...props } />
-				</InspectorAdvancedControls>
+				{ blockEditingMode === 'default' && (
+					<InspectorAdvancedControls>
+						<PushChangesToGlobalStylesControl { ...props } />
+					</InspectorAdvancedControls>
+				) }
 			</>
-		)
+		);
+	}
 );
 
 addFilter(

package/src/store/actions.js

@@ -12,6 +12,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -144,9 +145,9 @@ export const removeTemplate =
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" deleted.' ),
-					template.title.rendered
+					decodeEntities( template.title.rendered )
 				),
-				{ type: 'snackbar' }
+				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);
 		} catch ( error ) {
 			const errorMessage =
@@ -365,6 +366,8 @@ export function setIsSaveViewOpened( isOpen ) {
 export const revertTemplate =
 	( template, { allowUndo = true } = {} ) =>
 	async ( { registry } ) => {
+		const noticeId = 'edit-site-template-reverted';
+		registry.dispatch( noticesStore ).removeNotice( noticeId );
 		if ( ! isTemplateRevertable( template ) ) {
 			registry
 				.dispatch( noticesStore )
@@ -466,6 +469,7 @@ export const revertTemplate =
 					.dispatch( noticesStore )
 					.createSuccessNotice( __( 'Template reverted.' ), {
 						type: 'snackbar',
+						id: noticeId,
 						actions: [
 							{
 								label: __( 'Undo' ),
@@ -473,10 +477,6 @@ export const revertTemplate =
 							},
 						],
 					} );
-			} else {
-				registry
-					.dispatch( noticesStore )
-					.createSuccessNotice( __( 'Template reverted.' ) );
 			}
 		} catch ( error ) {
 			const errorMessage =
@@ -530,3 +530,21 @@ export const switchEditorMode =
 			speak( __( 'Code editor selected' ), 'assertive' );
 		}
 	};
+
+/**
+ * Sets whether or not the editor is locked so that only page content can be
+ * edited.
+ *
+ * @param {boolean} hasPageContentLock True to enable lock, false to disable.
+ */
+export const setHasPageContentLock =
+	( hasPageContentLock ) =>
+	( { dispatch, registry } ) => {
+		if ( hasPageContentLock ) {
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+		}
+		dispatch( {
+			type: 'SET_HAS_PAGE_CONTENT_LOCK',
+			hasPageContentLock,
+		} );
+	};

package/src/store/reducer.js

@@ -157,6 +157,25 @@ function editorCanvasContainerView( state = undefined, action ) {
 	return state;
 }
 
+/**
+ * Reducer used to track whether the page content is locked.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function hasPageContentLock( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_EDITED_POST':
+			return !! action.context?.postId;
+		case 'SET_HAS_PAGE_CONTENT_LOCK':
+			return action.hasPageContentLock;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -166,4 +185,5 @@ export default combineReducers( {
 	saveViewPanel,
 	canvasMode,
 	editorCanvasContainerView,
+	hasPageContentLock,
 } );