@wordpress/edit-site 5.10.0 → 5.12.0

package/src/components/add-new-template/new-template.js

@@ -1,34 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Tooltip,
-	VisuallyHidden,
+	Button,
+	Modal,
+	__experimentalGrid as Grid,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	archive,
-	blockMeta,
-	category,
-	home,
-	list,
-	media,
-	notFound,
-	page,
-	plus,
-	post,
-	postAuthor,
-	postDate,
-	postList,
-	search,
-	tag,
-	layout as customGenericTemplateIcon,
-} from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -36,7 +25,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import AddCustomTemplateModal from './add-custom-template-modal';
+import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import {
 	useExistingTemplates,
 	useDefaultTemplateTypes,
@@ -45,7 +34,7 @@ import {
 	useAuthorMenuItem,
 	usePostTypeArchiveMenuItems,
 } from './utils';
-import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
+import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
@@ -68,21 +57,35 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'404',
 ];
 
-const TEMPLATE_ICONS = {
-	'front-page': home,
-	home: postList,
-	single: post,
-	page,
-	archive,
-	search,
-	404: notFound,
-	index: list,
-	category,
-	author: postAuthor,
-	taxonomy: blockMeta,
-	date: postDate,
-	tag,
-	attachment: media,
+function TemplateListItem( { title, description, onClick } ) {
+	return (
+		<Button onClick={ onClick }>
+			<VStack
+				as="span"
+				spacing={ 2 }
+				justify="flex-start"
+				style={ { width: '100%' } }
+			>
+				<Text
+					weight={ 500 }
+					lineHeight={ 1.53846153846 } // 20px
+				>
+					{ title }
+				</Text>
+				<Text
+					lineHeight={ 1.53846153846 } // 20px
+				>
+					{ description }
+				</Text>
+			</VStack>
+		</Button>
+	);
+}
+
+const modalContentMap = {
+	templatesList: 1,
+	customTemplate: 2,
+	customGenericTemplate: 3,
 };
 
 export default function NewTemplate( {
@@ -90,12 +93,10 @@ export default function NewTemplate( {
 	toggleProps,
 	showIcon = true,
 } ) {
-	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
-		useState( false );
-	const [
-		showCustomGenericTemplateModal,
-		setShowCustomGenericTemplateModal,
-	] = useState( false );
+	const [ showModal, setShowModal ] = useState( false );
+	const [ modalContent, setModalContent ] = useState(
+		modalContentMap.templatesList
+	);
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
 	const [ isCreatingTemplate, setIsCreatingTemplate ] = useState( false );
 
@@ -140,7 +141,7 @@ export default function NewTemplate( {
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					newTemplate.title?.rendered || title
+					decodeEntities( newTemplate.title?.rendered || title )
 				),
 				{
 					type: 'snackbar',
@@ -159,130 +160,116 @@ export default function NewTemplate( {
 			setIsCreatingTemplate( false );
 		}
 	}
+	const onModalClose = () => {
+		setShowModal( false );
+		setModalContent( modalContentMap.templatesList );
+	};
 
-	const missingTemplates = useMissingTemplates(
-		setEntityForSuggestions,
-		setShowCustomTemplateModal
+	const missingTemplates = useMissingTemplates( setEntityForSuggestions, () =>
+		setModalContent( modalContentMap.customTemplate )
 	);
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
-	const customTemplateDescription = __(
-		'A custom template can be manually applied to any post or page.'
-	);
-
+	let modalTitle = __( 'Add template' );
+	if ( modalContent === modalContentMap.customTemplate ) {
+		modalTitle = sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Add template: %s' ),
+			entityForSuggestions.labels.singular_name
+		);
+	} else if ( modalContent === modalContentMap.customGenericTemplate ) {
+		modalTitle = __( 'Create custom template' );
+	}
 	return (
 		<>
-			<DropdownMenu
-				className="edit-site-new-template-dropdown"
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
+			<Toggle
+				{ ...restToggleProps }
+				onClick={ () => setShowModal( true ) }
 				icon={ showIcon ? plus : null }
-				text={ showIcon ? null : postType.labels.add_new }
 				label={ postType.labels.add_new_item }
-				popoverProps={ {
-					noArrow: false,
-				} }
-				toggleProps={ toggleProps }
 			>
-				{ () => (
-					<>
-						{ isCreatingTemplate && (
-							<TemplateActionsLoadingScreen />
-						) }
-						<div className="edit-site-new-template-dropdown__menu-groups">
-							<MenuGroup label={ postType.labels.add_new_item }>
-								{ missingTemplates.map( ( template ) => {
-									const {
-										title,
-										description,
-										slug,
-										onClick,
-										icon,
-									} = template;
-									return (
-										<Tooltip
-											key={ slug }
-											position="top right"
-											text={ description }
-											className="edit-site-new-template-dropdown__menu-item-tooltip"
-										>
-											<MenuItem
-												icon={
-													icon ||
-													TEMPLATE_ICONS[ slug ] ||
-													post
-												}
-												iconPosition="left"
-												onClick={ () =>
-													onClick
-														? onClick( template )
-														: createTemplate(
-																template
-														  )
-												}
-											>
-												{ title }
-												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-												<VisuallyHidden>
-													{ description }
-												</VisuallyHidden>
-											</MenuItem>
-										</Tooltip>
-									);
-								} ) }
-							</MenuGroup>
-							<MenuGroup>
-								<Tooltip
-									position="top right"
-									text={ customTemplateDescription }
-									className="edit-site-new-template-dropdown__menu-item-tooltip"
-								>
-									<MenuItem
-										icon={ customGenericTemplateIcon }
-										iconPosition="left"
+				{ showIcon ? null : postType.labels.add_new_item }
+			</Toggle>
+			{ showModal && (
+				<Modal
+					title={ modalTitle }
+					className={ classnames(
+						'edit-site-add-new-template__modal',
+						{
+							'edit-site-add-new-template__modal_template_list':
+								modalContent === modalContentMap.templatesList,
+							'edit-site-custom-template-modal':
+								modalContent === modalContentMap.customTemplate,
+						}
+					) }
+					onRequestClose={ onModalClose }
+					overlayClassName={
+						modalContent === modalContentMap.customGenericTemplate
+							? 'edit-site-custom-generic-template__modal'
+							: undefined
+					}
+				>
+					{ modalContent === modalContentMap.templatesList && (
+						<Grid
+							columns={ 3 }
+							gap={ 4 }
+							align="flex-start"
+							justify="center"
+							className="edit-site-add-new-template__template-list__contents"
+						>
+							{ missingTemplates.map( ( template ) => {
+								const { title, description, slug, onClick } =
+									template;
+								return (
+									<TemplateListItem
+										key={ slug }
+										title={ title }
+										description={ description }
 										onClick={ () =>
-											setShowCustomGenericTemplateModal(
-												true
-											)
+											onClick
+												? onClick( template )
+												: createTemplate( template )
 										}
-									>
-										{ __( 'Custom template' ) }
-										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-										<VisuallyHidden>
-											{ customTemplateDescription }
-										</VisuallyHidden>
-									</MenuItem>
-								</Tooltip>
-							</MenuGroup>
-						</div>
-					</>
-				) }
-			</DropdownMenu>
-			{ showCustomTemplateModal && (
-				<AddCustomTemplateModal
-					onClose={ () => setShowCustomTemplateModal( false ) }
-					onSelect={ createTemplate }
-					entityForSuggestions={ entityForSuggestions }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
-			) }
-			{ showCustomGenericTemplateModal && (
-				<AddCustomGenericTemplateModal
-					onClose={ () => setShowCustomGenericTemplateModal( false ) }
-					createTemplate={ createTemplate }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
+									/>
+								);
+							} ) }
+							<TemplateListItem
+								title={ __( 'Custom template' ) }
+								description={ __(
+									'A custom template can be manually applied to any post or page.'
+								) }
+								onClick={ () =>
+									setModalContent(
+										modalContentMap.customGenericTemplate
+									)
+								}
+							/>
+						</Grid>
+					) }
+					{ modalContent === modalContentMap.customTemplate && (
+						<AddCustomTemplateModalContent
+							onSelect={ createTemplate }
+							entityForSuggestions={ entityForSuggestions }
+						/>
+					) }
+					{ modalContent ===
+						modalContentMap.customGenericTemplate && (
+						<AddCustomGenericTemplateModalContent
+							onClose={ onModalClose }
+							createTemplate={ createTemplate }
+						/>
+					) }
+				</Modal>
 			) }
 		</>
 	);
 }
 
-function useMissingTemplates(
-	setEntityForSuggestions,
-	setShowCustomTemplateModal
-) {
+function useMissingTemplates( setEntityForSuggestions, onClick ) {
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
@@ -294,7 +281,7 @@ function useMissingTemplates(
 			! existingTemplateSlugs.includes( template.slug )
 	);
 	const onClickMenuItem = ( _entityForSuggestions ) => {
-		setShowCustomTemplateModal( true );
+		onClick?.();
 		setEntityForSuggestions( _entityForSuggestions );
 	};
 	// We need to replace existing default template types with

package/src/components/add-new-template/style.scss

@@ -1,70 +1,23 @@
-.edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__menu-groups {
-		@include break-small() {
-			min-width: 300px;
-		}
-	}
+.edit-site-custom-template-modal {
+	&__contents-wrapper {
+		height: 100%;
+		justify-content: flex-start !important; // Required as topLeft alignment isn't working on VStack
 
-	// The specificity is needed to override the default tooltip styles.
-	&__menu-item-tooltip.components-tooltip .components-popover__content {
-		max-width: 320px;
-		padding: $grid-unit-10 $grid-unit-15;
-		border-radius: 2px;
-		white-space: pre-wrap;
-		min-width: 0;
-		width: auto;
-		text-align: left;
-	}
-}
+		> * {
+			width: 100%;
+		}
 
-.edit-site-custom-template-modal {
-	&__suggestions_list {
-		margin-left: - $grid-unit-15;
-		margin-right: - $grid-unit-15;
+		&__suggestions_list {
+			margin-left: - $grid-unit-15;
+			margin-right: - $grid-unit-15;
+			width: calc(100% + #{$grid-unit-15 * 2});
+		}
 	}
 
 	&__contents {
 		> .components-button {
-			padding: $grid-unit-30;
-			border-radius: $radius-block-ui;
 			height: auto;
-			display: flex;
-			flex-direction: column;
 			justify-content: center;
-			border: $border-width solid $gray-300;
-
-			// Show the boundary of the button, in High Contrast Mode.
-			outline: 1px solid transparent;
-
-			span:first-child {
-				color: $gray-900;
-			}
-
-			span {
-				color: $gray-700;
-			}
-
-			&:hover {
-				color: var(--wp-admin-theme-color-darker-10);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-				border-color: transparent;
-
-				span {
-					color: var(--wp-admin-theme-color);
-				}
-			}
-
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-color: transparent;
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 3px solid transparent;
-
-				span:first-child {
-					color: var(--wp-admin-theme-color);
-				}
-			}
 		}
 	}
 
@@ -86,7 +39,6 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			height: 232px;
 			overflow: scroll;
 		}
 
@@ -146,12 +98,6 @@
 }
 
 .edit-site-custom-generic-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-
 	.components-modal__header {
 		border-bottom: none;
 	}
@@ -177,5 +123,72 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.edit-site-add-new-template__modal {
+	max-width: $grid-unit-80 * 13;
+	width: calc(100% - #{$grid-unit-80});
+	margin-top: $grid-unit-80;
+	max-height: calc(100% - #{$grid-unit-80 * 2});
+
+	@include break-large() {
+		width: calc(100% - #{$grid-unit-80 * 2});
+	}
+}
+
+.edit-site-custom-template-modal__contents,
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
+		padding: $grid-unit-30;
+		border-radius: $radius-block-ui;
+		display: flex;
+		flex-direction: column;
+		border: $border-width solid $gray-300;
+		min-height: $grid-unit-80 * 3;
+
+		// Show the boundary of the button, in High Contrast Mode.
+		outline: 1px solid transparent;
+
+		span:first-child {
+			color: $gray-900;
+		}
+
+		span {
+			color: $gray-700;
+		}
+
+		&:hover {
+			color: var(--wp-admin-theme-color-darker-10);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			border-color: transparent;
+
+			span {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-color: transparent;
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 3px solid transparent;
+
+			span:first-child {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+}
+
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
+		height: 100%;
+		text-align: start;
+		align-items: flex-start;
 	}
 }

package/src/components/block-editor/index.js

@@ -38,6 +38,10 @@ import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import { unlock } from '../../private-apis';
 import EditorCanvasContainer from '../editor-canvas-container';
+import {
+	PageContentLock,
+	usePageContentLockNotifications,
+} from '../page-content-lock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -49,20 +53,25 @@ const LAYOUT = {
 
 export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode } = useSelect(
-		( select ) => {
-			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-
-			return {
-				storedSettings: getSettings( setIsInserterOpened ),
-				templateType: getEditedPostType(),
-				canvasMode: getCanvasMode(),
-			};
-		},
-		[ setIsInserterOpened ]
-	);
+	const { storedSettings, templateType, canvasMode, hasPageContentLock } =
+		useSelect(
+			( select ) => {
+				const {
+					getSettings,
+					getEditedPostType,
+					getCanvasMode,
+					hasPageContentLock: _hasPageContentLock,
+				} = unlock( select( editSiteStore ) );
+
+				return {
+					storedSettings: getSettings( setIsInserterOpened ),
+					templateType: getEditedPostType(),
+					canvasMode: getCanvasMode(),
+					hasPageContentLock: _hasPageContentLock(),
+				};
+			},
+			[ setIsInserterOpened ]
+		);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -137,12 +146,14 @@ export default function BlockEditor() {
 		contentRef,
 		useClipboardHandler(),
 		useTypingObserver(),
+		usePageContentLockNotifications(),
 	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
+
 	const hasBlocks = blocks.length !== 0;
 	const enableResizing =
 		isTemplatePart &&
@@ -161,6 +172,7 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			{ hasPageContentLock && <PageContentLock /> }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />
@@ -169,9 +181,7 @@ export default function BlockEditor() {
 				{ ( [ editorCanvasView ] ) =>
 					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
-							<ResizableEditor enableResizing>
-								{ editorCanvasView }
-							</ResizableEditor>
+							{ editorCanvasView }
 						</div>
 					) : (
 						<BlockTools

package/src/components/create-template-part-modal/index.js

@@ -13,6 +13,7 @@ import {
 	Modal,
 	__experimentalRadioGroup as RadioGroup,
 	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -106,31 +107,24 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 							) }
 						</RadioGroup>
 					</BaseControl>
-					<Flex
-						className="edit-site-create-template-part-modal__modal-actions"
-						justify="flex-end"
-					>
-						<FlexItem>
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									closeModal();
-								} }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="primary"
-								type="submit"
-								disabled={ ! title }
-								isBusy={ isSubmitting }
-							>
-								{ __( 'Create' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! title }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
 				</VStack>
 			</form>
 		</Modal>