@wordpress/edit-site 5.10.0 → 5.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.10.0",
+	"version": "5.12.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,49 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/api-fetch": "^6.30.0",
-		"@wordpress/block-editor": "^12.1.0",
-		"@wordpress/block-library": "^8.10.0",
-		"@wordpress/blocks": "^12.10.0",
-		"@wordpress/commands": "^0.4.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/core-commands": "^0.2.0",
-		"@wordpress/core-data": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/date": "^4.33.0",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/editor": "^13.10.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/hooks": "^3.33.0",
-		"@wordpress/html-entities": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/interface": "^5.10.0",
-		"@wordpress/keyboard-shortcuts": "^4.10.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/media-utils": "^4.24.0",
-		"@wordpress/notices": "^4.1.0",
-		"@wordpress/plugins": "^6.1.0",
-		"@wordpress/preferences": "^3.10.0",
-		"@wordpress/private-apis": "^0.15.0",
-		"@wordpress/reusable-blocks": "^4.10.0",
-		"@wordpress/router": "^0.2.0",
-		"@wordpress/style-engine": "^1.16.0",
-		"@wordpress/url": "^3.34.0",
-		"@wordpress/viewport": "^5.10.0",
-		"@wordpress/widgets": "^3.10.0",
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/api-fetch": "^6.32.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/block-library": "^8.12.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/commands": "^0.6.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/core-commands": "^0.4.0",
+		"@wordpress/core-data": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/date": "^4.35.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/editor": "^13.12.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/escape-html": "^2.35.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/html-entities": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/interface": "^5.12.0",
+		"@wordpress/keyboard-shortcuts": "^4.12.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/media-utils": "^4.26.0",
+		"@wordpress/notices": "^4.3.0",
+		"@wordpress/plugins": "^6.3.0",
+		"@wordpress/preferences": "^3.12.0",
+		"@wordpress/primitives": "^3.33.0",
+		"@wordpress/private-apis": "^0.17.0",
+		"@wordpress/reusable-blocks": "^4.12.0",
+		"@wordpress/router": "^0.4.0",
+		"@wordpress/style-engine": "^1.18.0",
+		"@wordpress/url": "^3.36.0",
+		"@wordpress/viewport": "^5.12.0",
+		"@wordpress/widgets": "^3.12.0",
+		"@wordpress/wordcount": "^3.35.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2"
 	},
@@ -77,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

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

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function AddNewPageModal( { onSave, onClose } ) {
+	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+	const [ title, setTitle ] = useState( '' );
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	async function createPage( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			const newPage = await saveEntityRecord(
+				'postType',
+				'page',
+				{
+					status: 'draft',
+					title,
+					slug: kebabCase( title || __( 'No title' ) ),
+				},
+				{ throwOnError: true }
+			);
+
+			onSave( newPage );
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					newPage.title?.rendered || title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the page.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPage( false );
+		}
+	}
+
+	return (
+		<Modal title={ __( 'Draft a new page' ) } onRequestClose={ 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' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ __( 'Create draft' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
+	const [ title, setTitle ] = useState( '' );
+	const defaultTitle = __( 'Custom Template' );
+	const [ isBusy, setIsBusy ] = useState( false );
+	async function onCreateTemplate( event ) {
+		event.preventDefault();
+		if ( isBusy ) {
+			return;
+		}
+		setIsBusy( true );
+		try {
+			await createTemplate(
+				{
+					slug:
+						'wp-custom-template-' +
+						kebabCase( title || defaultTitle ),
+					title: title || defaultTitle,
+				},
+				false
+			);
+		} finally {
+			setIsBusy( false );
+		}
+	}
+	return (
+		<form onSubmit={ onCreateTemplate }>
+			<VStack spacing={ 6 }>
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ defaultTitle }
+					disabled={ isBusy }
+					help={ __(
+						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
+					) }
+				/>
+				<HStack
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="right"
+				>
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							onClose();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default AddCustomGenericTemplateModalContent;

package/src/components/add-new-template/{add-custom-template-modal.js → add-custom-template-modal-content.js}

@@ -2,12 +2,11 @@
  * WordPress dependencies
  */
 import { useState, useMemo, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	Flex,
 	FlexItem,
-	Modal,
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
@@ -23,7 +22,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -179,36 +177,25 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModal( {
-	onClose,
-	onSelect,
-	entityForSuggestions,
-	isCreatingTemplate,
-} ) {
+function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
-	const baseCssClass = 'edit-site-custom-template-modal';
 	return (
-		<Modal
-			title={ sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Add template: %s' ),
-				entityForSuggestions.labels.singular_name
-			) }
-			className={ baseCssClass }
-			onRequestClose={ onClose }
+		<VStack
+			spacing={ 4 }
+			className="edit-site-custom-template-modal__contents-wrapper"
+			alignment="left"
 		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
-				<VStack spacing={ 4 }>
+				<>
 					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
 						) }
 					</Text>
 					<Flex
-						className={ `${ baseCssClass }__contents` }
+						className="edit-site-custom-template-modal__contents"
 						gap="4"
 						align="initial"
 					>
@@ -272,10 +259,10 @@ function AddCustomTemplateModal( {
 							</Text>
 						</FlexItem>
 					</Flex>
-				</VStack>
+				</>
 			) }
 			{ showSearchEntities && (
-				<VStack spacing={ 4 }>
+				<>
 					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
@@ -285,10 +272,10 @@ function AddCustomTemplateModal( {
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
-				</VStack>
+				</>
 			) }
-		</Modal>
+		</VStack>
 	);
 }
 
-export default AddCustomTemplateModal;
+export default AddCustomTemplateModalContent;