@wordpress/edit-site 5.13.0 → 5.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.13.0",
+	"version": "5.15.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,43 +27,43 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.36.0",
-		"@wordpress/api-fetch": "^6.33.0",
-		"@wordpress/block-editor": "^12.4.0",
-		"@wordpress/block-library": "^8.13.0",
-		"@wordpress/blocks": "^12.13.0",
-		"@wordpress/commands": "^0.7.0",
-		"@wordpress/components": "^25.2.0",
-		"@wordpress/compose": "^6.13.0",
-		"@wordpress/core-commands": "^0.5.0",
-		"@wordpress/core-data": "^6.13.0",
-		"@wordpress/data": "^9.6.0",
-		"@wordpress/date": "^4.36.0",
-		"@wordpress/deprecated": "^3.36.0",
-		"@wordpress/dom": "^3.36.0",
-		"@wordpress/editor": "^13.13.0",
-		"@wordpress/element": "^5.13.0",
-		"@wordpress/escape-html": "^2.36.0",
-		"@wordpress/hooks": "^3.36.0",
-		"@wordpress/html-entities": "^3.36.0",
-		"@wordpress/i18n": "^4.36.0",
-		"@wordpress/icons": "^9.27.0",
-		"@wordpress/interface": "^5.13.0",
-		"@wordpress/keyboard-shortcuts": "^4.13.0",
-		"@wordpress/keycodes": "^3.36.0",
-		"@wordpress/media-utils": "^4.27.0",
-		"@wordpress/notices": "^4.4.0",
-		"@wordpress/plugins": "^6.4.0",
-		"@wordpress/preferences": "^3.13.0",
-		"@wordpress/primitives": "^3.34.0",
-		"@wordpress/private-apis": "^0.18.0",
-		"@wordpress/reusable-blocks": "^4.13.0",
-		"@wordpress/router": "^0.5.0",
-		"@wordpress/style-engine": "^1.19.0",
-		"@wordpress/url": "^3.37.0",
-		"@wordpress/viewport": "^5.13.0",
-		"@wordpress/widgets": "^3.13.0",
-		"@wordpress/wordcount": "^3.36.0",
+		"@wordpress/a11y": "^3.38.0",
+		"@wordpress/api-fetch": "^6.35.0",
+		"@wordpress/block-editor": "^12.6.0",
+		"@wordpress/block-library": "^8.15.0",
+		"@wordpress/blocks": "^12.15.0",
+		"@wordpress/commands": "^0.9.0",
+		"@wordpress/components": "^25.4.0",
+		"@wordpress/compose": "^6.15.0",
+		"@wordpress/core-commands": "^0.7.0",
+		"@wordpress/core-data": "^6.15.0",
+		"@wordpress/data": "^9.8.0",
+		"@wordpress/date": "^4.38.0",
+		"@wordpress/deprecated": "^3.38.0",
+		"@wordpress/dom": "^3.38.0",
+		"@wordpress/editor": "^13.15.0",
+		"@wordpress/element": "^5.15.0",
+		"@wordpress/escape-html": "^2.38.0",
+		"@wordpress/hooks": "^3.38.0",
+		"@wordpress/html-entities": "^3.38.0",
+		"@wordpress/i18n": "^4.38.0",
+		"@wordpress/icons": "^9.29.0",
+		"@wordpress/interface": "^5.15.0",
+		"@wordpress/keyboard-shortcuts": "^4.15.0",
+		"@wordpress/keycodes": "^3.38.0",
+		"@wordpress/media-utils": "^4.29.0",
+		"@wordpress/notices": "^4.6.0",
+		"@wordpress/plugins": "^6.6.0",
+		"@wordpress/preferences": "^3.15.0",
+		"@wordpress/primitives": "^3.36.0",
+		"@wordpress/private-apis": "^0.20.0",
+		"@wordpress/reusable-blocks": "^4.15.0",
+		"@wordpress/router": "^0.7.0",
+		"@wordpress/style-engine": "^1.21.0",
+		"@wordpress/url": "^3.39.0",
+		"@wordpress/viewport": "^5.15.0",
+		"@wordpress/widgets": "^3.15.0",
+		"@wordpress/wordcount": "^3.38.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -71,7 +71,6 @@
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"is-plain-object": "^5.0.0",
-		"lodash": "^4.17.21",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2",
@@ -84,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/src/components/add-new-page/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 				{
 					status: 'draft',
 					title,
-					slug: kebabCase( title || __( 'No title' ) ),
+					slug: title || __( 'No title' ),
 				},
 				{ throwOnError: true }
 			);
@@ -77,9 +72,6 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
-						/* eslint-disable jsx-a11y/no-autofocus */
-						autoFocus
-						/* eslint-enable jsx-a11y/no-autofocus */
 						label={ __( 'Page title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

package/src/components/add-new-pattern/index.js

@@ -4,7 +4,8 @@
 import { DropdownMenu } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { plus, header, file } from '@wordpress/icons';
+import { plus, symbol, symbolFilled } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -12,8 +13,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import CreatePatternModal from '../create-pattern-modal';
 import CreateTemplatePartModal from '../create-template-part-modal';
-import { unlock } from '../../lock-unlock';
 import SidebarButton from '../sidebar-button';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -22,6 +24,10 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -51,28 +57,31 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
+	const controls = [
+		{
+			icon: symbol,
+			onClick: () => setShowPatternModal( true ),
+			title: __( 'Create pattern' ),
+		},
+	];
+
+	if ( ! isTemplatePartsMode ) {
+		controls.push( {
+			icon: symbolFilled,
+			onClick: () => setShowTemplatePartModal( true ),
+			title: __( 'Create template part' ),
+		} );
+	}
+
 	return (
 		<>
 			<DropdownMenu
-				controls={ [
-					{
-						icon: header,
-						onClick: () => setShowTemplatePartModal( true ),
-						title: 'Create a template part',
-					},
-					{
-						icon: file,
-						onClick: () => setShowPatternModal( true ),
-						title: 'Create a pattern',
-					},
-				] }
-				icon={
-					<SidebarButton
-						icon={ plus }
-						label={ __( 'Create a pattern' ) }
-					/>
-				}
-				label="Create a pattern."
+				controls={ controls }
+				toggleProps={ {
+					as: SidebarButton,
+				} }
+				icon={ plus }
+				label={ __( 'Create pattern' ) }
 			/>
 			{ showPatternModal && (
 				<CreatePatternModal

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies

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

@@ -12,12 +12,32 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Flex,
+	Icon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { plus } from '@wordpress/icons';
+import {
+	archive,
+	blockMeta,
+	calendar,
+	category,
+	commentAuthorAvatar,
+	edit,
+	home,
+	layout,
+	list,
+	media,
+	notFound,
+	page,
+	plus,
+	pin,
+	verse,
+	search,
+	tag,
+} from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -56,27 +76,64 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'404',
 ];
 
-function TemplateListItem( { title, description, onClick } ) {
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	home: verse,
+	single: pin,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: commentAuthorAvatar,
+	taxonomy: blockMeta,
+	date: calendar,
+	tag,
+	attachment: media,
+};
+
+function TemplateListItem( {
+	title,
+	direction,
+	className,
+	description,
+	icon,
+	onClick,
+	children,
+} ) {
 	return (
-		<Button onClick={ onClick }>
-			<VStack
+		<Button
+			className={ className }
+			onClick={ onClick }
+			label={ description }
+			showTooltip={ !! description }
+		>
+			<Flex
 				as="span"
 				spacing={ 2 }
-				justify="flex-start"
+				align="center"
+				justify="center"
 				style={ { width: '100%' } }
+				direction={ direction }
 			>
-				<Text
-					weight={ 500 }
-					lineHeight={ 1.53846153846 } // 20px
+				<div className="edit-site-add-new-template__template-icon">
+					<Icon icon={ icon } />
+				</div>
+				<VStack
+					className="edit-site-add-new-template__template-name"
+					alignment="center"
+					spacing={ 0 }
 				>
-					{ title }
-				</Text>
-				<Text
-					lineHeight={ 1.53846153846 } // 20px
-				>
-					{ description }
-				</Text>
-			</VStack>
+					<Text
+						weight={ 500 }
+						lineHeight={ 1.53846153846 } // 20px
+					>
+						{ title }
+					</Text>
+					{ children }
+				</VStack>
+			</Flex>
 		</Button>
 	);
 }
@@ -104,6 +161,26 @@ export default function NewTemplate( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
+
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
+	const TEMPLATE_SHORT_DESCRIPTIONS = {
+		'front-page': homeUrl,
+		date: sprintf(
+			// translators: %s: The homepage url.
+			__( 'E.g. %s' ),
+			homeUrl + '/' + new Date().getFullYear()
+		),
+	};
+
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -220,14 +297,25 @@ export default function NewTemplate( {
 							justify="center"
 							className="edit-site-add-new-template__template-list__contents"
 						>
+							<Flex className="edit-site-add-new-template__template-list__prompt">
+								{ __(
+									'Select what the new template should apply to:'
+								) }
+							</Flex>
 							{ missingTemplates.map( ( template ) => {
-								const { title, description, slug, onClick } =
-									template;
+								const { title, slug, onClick } = template;
 								return (
 									<TemplateListItem
 										key={ slug }
 										title={ title }
-										description={ description }
+										direction="column"
+										className="edit-site-add-new-template__template-button"
+										description={
+											TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
+										}
+										icon={
+											TEMPLATE_ICONS[ slug ] || layout
+										}
 										onClick={ () =>
 											onClick
 												? onClick( template )
@@ -238,15 +326,23 @@ export default function NewTemplate( {
 							} ) }
 							<TemplateListItem
 								title={ __( 'Custom template' ) }
-								description={ __(
-									'A custom template can be manually applied to any post or page.'
-								) }
+								direction="row"
+								className="edit-site-add-new-template__custom-template-button"
+								icon={ edit }
 								onClick={ () =>
 									setModalContent(
 										modalContentMap.customGenericTemplate
 									)
 								}
-							/>
+							>
+								<Text
+									lineHeight={ 1.53846153846 } // 20px
+								>
+									{ __(
+										'A custom template can be manually applied to any post or page.'
+									) }
+								</Text>
+							</TemplateListItem>
 						</Grid>
 					) }
 					{ modalContent === modalContentMap.customTemplate && (

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

@@ -138,17 +138,39 @@
 	@include break-large() {
 		width: calc(100% - #{$grid-unit-80 * 2});
 	}
+
+	.edit-site-add-new-template__template-button,
+	.edit-site-add-new-template__custom-template-button {
+		svg {
+			fill: var(--wp-admin-theme-color);
+		}
+	}
+
+	.edit-site-add-new-template__custom-template-button {
+		.edit-site-add-new-template__template-name {
+			flex-grow: 1;
+			align-items: flex-start;
+		}
+	}
+
+	.edit-site-add-new-template__template-icon {
+		padding: $grid-unit-10;
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		border-radius: 100%;
+		max-height: $grid-unit-50;
+		max-width: $grid-unit-50;
+	}
 }
 
 .edit-site-custom-template-modal__contents,
 .edit-site-add-new-template__template-list__contents {
 	> .components-button {
-		padding: $grid-unit-30;
+		padding: $grid-unit-40;
 		border-radius: $radius-block-ui;
 		display: flex;
 		flex-direction: column;
 		border: $border-width solid $gray-300;
-		min-height: $grid-unit-80 * 3;
+		justify-content: center;
 
 		// Show the boundary of the button, in High Contrast Mode.
 		outline: 1px solid transparent;
@@ -183,6 +205,12 @@
 			}
 		}
 	}
+
+	.edit-site-add-new-template__custom-template-button,
+	.edit-site-add-new-template__template-list__prompt {
+		grid-column-start: 1;
+		grid-column-end: 4;
+	}
 }
 
 .edit-site-add-new-template__template-list__contents {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,14 @@ import { blockMeta, post, archive } from '@wordpress/icons';
  * @property {string}        name The entity's name.
  */
 
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.split( '.' ).forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 /**
  * Helper util to map records to add a `name` prop from a
  * provided path, in order to handle all entities in the same
@@ -32,7 +35,7 @@ import { blockMeta, post, archive } from '@wordpress/icons';
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {
 		...entity,
-		name: decodeEntities( get( entity, path ) ),
+		name: decodeEntities( getValueFromObjectPath( entity, path ) ),
 	} ) );
 };
 

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

@@ -1 +1,5 @@
-export const FOCUSABLE_ENTITIES = [ 'wp_template_part', 'wp_navigation' ];
+export const FOCUSABLE_ENTITIES = [
+	'wp_template_part',
+	'wp_navigation',
+	'wp_block',
+];

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

@@ -87,7 +87,9 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					// which isn't a requirement in auto resize mode.
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
-					canvasMode === 'view' ? 'cursor: pointer;' : ''
+					canvasMode === 'view'
+						? 'cursor: pointer; min-height: 100vh;'
+						: ''
 				}}}`
 			}</style>
 			{ children }

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

package/src/components/block-editor/inserter-media-categories.js

@@ -20,27 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 
 /** @typedef {import('@wordpress/block-editor').InserterMediaRequest} InserterMediaRequest */
 /** @typedef {import('@wordpress/block-editor').InserterMediaItem} InserterMediaItem */
-/**
- * Interface for inserter media category labels.
- *
- * @typedef {Object} InserterMediaCategoryLabels
- * @property {string} name                    General name of the media category. It's used in the inserter media items list.
- * @property {string} [search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
- */
-/**
- * Interface for inserter media category.
- *
- * @typedef {Object} InserterMediaCategory
- * @property {string}                                                 name                 The name of the media category, that should be unique among all media categories.
- * @property {InserterMediaCategoryLabels}                            labels               Labels for the media category.
- * @property {('image'|'audio'|'video')}                              mediaType            The media type of the media category.
- * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                The function to fetch media items for the category.
- * @property {(InserterMediaItem) => string}                          [getReportUrl]       If the media category supports reporting media items, this function should return
- *                                                                                         the report url for the media item. It accepts the `InserterMediaItem` as an argument.
- * @property {boolean}                                                [isExternalResource] If the media category is an external resource, this should be set to true.
- *                                                                                         This is used to avoid making a request to the external resource when the user
- *                                                                                         opens the inserter for the first time.
- */
+/** @typedef {import('@wordpress/block-editor').InserterMediaCategory} InserterMediaCategory */
 
 const getExternalLink = ( url, text ) =>
 	`<a ${ getExternalLinkAttributes( url ) }>${ text }</a>`;

package/src/components/block-editor/site-editor-canvas.js

@@ -96,6 +96,8 @@ export default function SiteEditorCanvas() {
 			? false
 			: undefined;
 
+	const forceFullHeight = isNavigationFocusMode;
+
 	return (
 		<>
 			<EditorCanvasContainer.Slot>
@@ -123,7 +125,11 @@ export default function SiteEditorCanvas() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height ?? '100%' }
+								height={
+									sizes.height && ! forceFullHeight
+										? sizes.height
+										: '100%'
+								}
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }