@wordpress/edit-site 5.10.0 → 5.11.0

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -11,6 +11,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
+import { getTemplatePartIcon } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -36,14 +37,31 @@ const config = {
 	},
 	wp_template_part: {
 		labels: {
-			title: __( 'Template parts' ),
-			loading: __( 'Loading template parts' ),
-			notFound: __( 'No template parts found' ),
+			title: __( 'Library' ),
+			loading: __( 'Loading library' ),
+			notFound: __( 'No patterns found' ),
 			manage: __( 'Manage all template parts' ),
+			reusableBlocks: __( 'Manage reusable blocks' ),
 			description: __(
-				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
+				'Manage what patterns are available when editing your site.'
 			),
 		},
+		sortCallback: ( items ) => {
+			const groupedByArea = items.reduce(
+				( accumulator, item ) => {
+					const key = accumulator[ item.area ] ? item.area : 'rest';
+					accumulator[ key ].push( item );
+					return accumulator;
+				},
+				{ header: [], footer: [], sidebar: [], rest: [] }
+			);
+			return [
+				...groupedByArea.header,
+				...groupedByArea.footer,
+				...groupedByArea.sidebar,
+				...groupedByArea.rest,
+			];
+		},
 	},
 };
 
@@ -73,17 +91,20 @@ export default function SidebarNavigationScreenTemplates() {
 			per_page: -1,
 		}
 	);
-	const sortedTemplates = templates ? [ ...templates ] : [];
+	let sortedTemplates = templates ? [ ...templates ] : [];
 	sortedTemplates.sort( ( a, b ) =>
 		a.title.rendered.localeCompare( b.title.rendered )
 	);
+	if ( config[ postType ].sortCallback ) {
+		sortedTemplates = config[ postType ].sortCallback( sortedTemplates );
+	}
 
 	const browseAllLink = useLink( {
 		path: '/' + postType + '/all',
 	} );
 
 	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
-
+	const isTemplateList = postType === 'wp_template';
 	return (
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
@@ -115,6 +136,10 @@ export default function SidebarNavigationScreenTemplates() {
 									postId={ template.id }
 									key={ template.id }
 									withChevron
+									icon={
+										! isTemplateList &&
+										getTemplatePartIcon( template.area )
+									}
 								>
 									{ decodeEntities(
 										template.title?.rendered ||
@@ -123,14 +148,28 @@ export default function SidebarNavigationScreenTemplates() {
 								</TemplateItem>
 							) ) }
 							{ ! isMobileViewport && (
-								<SidebarNavigationItem
-									className="edit-site-sidebar-navigation-screen-templates__see-all"
-									{ ...browseAllLink }
-									children={
-										config[ postType ].labels.manage
-									}
-									withChevron
-								/>
+								<>
+									<SidebarNavigationItem
+										className="edit-site-sidebar-navigation-screen-templates__see-all"
+										withChevron
+										{ ...browseAllLink }
+									>
+										{ config[ postType ].labels.manage }
+									</SidebarNavigationItem>
+									{ !! config[ postType ].labels
+										.reusableBlocks && (
+										<SidebarNavigationItem
+											as="a"
+											href="edit.php?post_type=wp_block"
+											withChevron
+										>
+											{
+												config[ postType ].labels
+													.reusableBlocks
+											}
+										</SidebarNavigationItem>
+									) }
+								</>
 							) }
 						</ItemGroup>
 					) }

package/src/components/site-hub/index.js

@@ -150,15 +150,14 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						</motion.div>
 					</AnimatePresence>
 				</HStack>
-				{ window?.__experimentalEnableCommandCenter &&
-					canvasMode === 'view' && (
-						<Button
-							className="edit-site-site-hub_toggle-command-center"
-							icon={ search }
-							onClick={ () => openCommandCenter() }
-							label={ __( 'Open command center' ) }
-						/>
-					) }
+				{ canvasMode === 'view' && (
+					<Button
+						className="edit-site-site-hub_toggle-command-center"
+						icon={ search }
+						onClick={ () => openCommandCenter() }
+						label={ __( 'Open command center' ) }
+					/>
+				) }
 			</HStack>
 		</motion.div>
 	);

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/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/store/actions.js

@@ -146,7 +146,7 @@ export const removeTemplate =
 					__( '"%s" deleted.' ),
 					template.title.rendered
 				),
-				{ type: 'snackbar' }
+				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);
 		} catch ( error ) {
 			const errorMessage =
@@ -365,6 +365,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 +468,7 @@ export const revertTemplate =
 					.dispatch( noticesStore )
 					.createSuccessNotice( __( 'Template reverted.' ), {
 						type: 'snackbar',
+						id: noticeId,
 						actions: [
 							{
 								label: __( 'Undo' ),
@@ -473,10 +476,6 @@ export const revertTemplate =
 							},
 						],
 					} );
-			} else {
-				registry
-					.dispatch( noticesStore )
-					.createSuccessNotice( __( 'Template reverted.' ) );
 			}
 		} catch ( error ) {
 			const errorMessage =

package/src/store/test/utils.js

@@ -145,9 +145,14 @@ describe( 'utils', () => {
 			).toEqual( FLATTENED_BLOCKS );
 
 			// The function has been called twice with the same params, so the cache size should be 1.
-			const [ , , originalSize ] =
-				getFilteredTemplatePartBlocks.getCache();
-			expect( originalSize ).toBe( 1 );
+			/**
+			 * TODO what should be done about this?
+			 * Can it be tested another way?
+			 * Is it necessary?
+			 */
+			// const [ , , originalSize ] =
+			// 	getFilteredTemplatePartBlocks.getCache();
+			// expect( originalSize ).toBe( 1 );
 
 			// Call the function again, with different params.
 			expect(
@@ -174,8 +179,13 @@ describe( 'utils', () => {
 			] );
 
 			// The function has been called with different params, so the cache size should now be 2.
-			const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
-			expect( finalSize ).toBe( 2 );
+			/**
+			 * TODO what should be done about this?
+			 * Can it be tested another way?
+			 * Is it necessary?
+			 */
+			// const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
+			// expect( finalSize ).toBe( 2 );
 		} );
 	} );
 } );

package/src/style.scss

@@ -13,7 +13,6 @@
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
 @import "./components/sidebar-edit-mode/template-card/style.scss";
 @import "./components/editor/style.scss";
-@import "./components/template-details/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
@@ -35,6 +34,7 @@
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
+@import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {

package/build/components/add-new-template/add-custom-generic-template-modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js"],"names":["AddCustomGenericTemplateModal","onClose","createTemplate","isCreatingTemplate","title","setTitle","defaultTitle","isBusy","setIsBusy","onCreateTemplate","event","preventDefault","slug"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AACA;;AAWA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAWA;AACA;AACA;AAGA,SAASA,6BAAT,OAII;AAAA,MAJoC;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,cAFuC;AAGvCC,IAAAA;AAHuC,GAIpC;AACH,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,EAAV,CAA5B;AACA,QAAMC,YAAY,GAAG,cAAI,iBAAJ,CAArB;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;;AACA,iBAAeC,gBAAf,CAAiCC,KAAjC,EAAyC;AACxCA,IAAAA,KAAK,CAACC,cAAN;;AACA,QAAKJ,MAAL,EAAc;AACb;AACA;;AACDC,IAAAA,SAAS,CAAE,IAAF,CAAT;;AACA,QAAI;AACH,YAAMN,cAAc,CACnB;AACCU,QAAAA,IAAI,EACH,wBACA,uBAAWR,KAAK,IAAIE,YAApB,CAHF;AAICF,QAAAA,KAAK,EAAEA,KAAK,IAAIE;AAJjB,OADmB,EAOnB,KAPmB,CAApB;AASA,KAVD,SAUU;AACTE,MAAAA,SAAS,CAAE,KAAF,CAAT;AACA;AACD;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,cAAI,wBAAJ,CADT;AAEC,IAAA,cAAc,EAAG,MAAM;AACtBP,MAAAA,OAAO;AACP,KAJF;AAKC,IAAA,gBAAgB,EAAC;AALlB,KAOGE,kBAAkB,IAAI,4BAAC,qCAAD,OAPzB,EAQC;AAAM,IAAA,QAAQ,EAAGM;AAAjB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,uBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,IAAA,KAAK,EAAGL,KAHT;AAIC,IAAA,QAAQ,EAAGC,QAJZ;AAKC,IAAA,WAAW,EAAGC,YALf;AAMC,IAAA,QAAQ,EAAGC,MANZ;AAOC,IAAA,IAAI,EAAG,cACN,kDADM;AAPR,IADD,EAYC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,kDADX;AAEC,IAAA,OAAO,EAAC;AAFT,KAIC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAM;AACfN,MAAAA,OAAO;AACP;AAJF,KAMG,cAAI,QAAJ,CANH,CAJD,EAYC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,SADT;AAEC,IAAA,IAAI,EAAC,QAFN;AAGC,IAAA,MAAM,EAAGM,MAHV;AAIC,qBAAgBA;AAJjB,KAMG,cAAI,QAAJ,CANH,CAZD,CAZD,CADD,CARD,CADD;AA+CA;;eAEcP,6B","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tModal,\n\tTextControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TemplateActionsLoadingScreen from './template-actions-loading-screen';\n\nfunction AddCustomGenericTemplateModal( {\n\tonClose,\n\tcreateTemplate,\n\tisCreatingTemplate,\n} ) {\n\tconst [ title, setTitle ] = useState( '' );\n\tconst defaultTitle = __( 'Custom Template' );\n\tconst [ isBusy, setIsBusy ] = useState( false );\n\tasync function onCreateTemplate( event ) {\n\t\tevent.preventDefault();\n\t\tif ( isBusy ) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsBusy( true );\n\t\ttry {\n\t\t\tawait createTemplate(\n\t\t\t\t{\n\t\t\t\t\tslug:\n\t\t\t\t\t\t'wp-custom-template-' +\n\t\t\t\t\t\tkebabCase( title || defaultTitle ),\n\t\t\t\t\ttitle: title || defaultTitle,\n\t\t\t\t},\n\t\t\t\tfalse\n\t\t\t);\n\t\t} finally {\n\t\t\tsetIsBusy( false );\n\t\t}\n\t}\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Create custom template' ) }\n\t\t\tonRequestClose={ () => {\n\t\t\t\tonClose();\n\t\t\t} }\n\t\t\toverlayClassName=\"edit-site-custom-generic-template__modal\"\n\t\t>\n\t\t\t{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }\n\t\t\t<form onSubmit={ onCreateTemplate }>\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\t\tplaceholder={ defaultTitle }\n\t\t\t\t\t\tdisabled={ isBusy }\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Describe the template, e.g. \"Post with sidebar\".'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"edit-site-custom-generic-template__modal-actions\"\n\t\t\t\t\t\tjustify=\"right\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tisBusy={ isBusy }\n\t\t\t\t\t\t\taria-disabled={ isBusy }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n\nexport default AddCustomGenericTemplateModal;\n"]}