@wordpress/edit-post 7.11.0 → 7.12.0

package/src/components/header/index.js

@@ -18,7 +18,7 @@ import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import TemplateTitle from './template-title';
+import DocumentTitle from './document-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -70,7 +70,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<TemplateTitle />
+				<div className="edit-post-header__document-title">
+					<DocumentTitle />
+				</div>
 			</motion.div>
 			<motion.div
 				variants={ slideY }

package/src/components/header/style.scss

@@ -44,6 +44,12 @@
 	}
 }
 
+.edit-post-header__document-title {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+}
+
 /**
  * Buttons on the right side
  */

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, TabPanel } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
@@ -30,7 +25,9 @@ import ListViewOutline from './list-view-outline';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 
+	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
 
@@ -41,17 +38,27 @@ export default function ListViewSidebar() {
 		}
 	}
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	// Tracks our current tab.
 	const [ tab, setTab ] = useState( 'list-view' );
 
 	// This ref refers to the sidebar as a whole.
 	const sidebarRef = useRef();
-	// This ref refers to the list view tab button.
-	const listViewTabRef = useRef();
-	// This ref refers to the outline tab button.
-	const outlineTabRef = useRef();
+	// This ref refers to the tab panel.
+	const tabPanelRef = useRef();
 	// This ref refers to the list view application area.
 	const listViewRef = useRef();
 
+	// Must merge the refs together so focus can be handled properly in the next function.
+	const listViewContainerRef = useMergeRefs( [
+		contentFocusReturnRef,
+		focusOnMountRef,
+		listViewRef,
+		setDropZoneElement,
+	] );
+
 	/*
 	 * Callback function to handle list view or outline focus.
 	 *
@@ -60,9 +67,11 @@ export default function ListViewSidebar() {
 	 * @return void
 	 */
 	function handleSidebarFocus( currentTab ) {
+		// Tab panel focus.
+		const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
 		// List view tab is selected.
 		if ( currentTab === 'list-view' ) {
-			// Either focus the list view or the list view tab button. Must have a fallback because the list view does not render when there are no blocks.
+			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
 			const listViewApplicationFocus = focus.tabbable.find(
 				listViewRef.current
 			)[ 0 ];
@@ -70,11 +79,11 @@ export default function ListViewSidebar() {
 				listViewApplicationFocus
 			)
 				? listViewApplicationFocus
-				: listViewTabRef.current;
+				: tabPanelFocus;
 			listViewFocusArea.focus();
 			// Outline tab is selected.
 		} else {
-			outlineTabRef.current.focus();
+			tabPanelFocus.focus();
 		}
 	}
 
@@ -93,6 +102,22 @@ export default function ListViewSidebar() {
 		}
 	} );
 
+	/**
+	 * Render tab content for a given tab name.
+	 *
+	 * @param {string} tabName The name of the tab to render.
+	 */
+	function renderTabContent( tabName ) {
+		if ( tabName === 'list-view' ) {
+			return (
+				<div className="edit-post-editor__list-view-panel-content">
+					<ListView dropZoneElement={ dropZoneElement } />
+				</div>
+			);
+		}
+		return <ListViewOutline />;
+	}
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -100,63 +125,40 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<div
-				className="edit-post-editor__document-overview-panel-header components-panel__header edit-post-sidebar__panel-tabs"
+			<Button
+				className="edit-post-editor__document-overview-panel__close-button"
 				ref={ headerFocusReturnRef }
+				icon={ closeSmall }
+				label={ __( 'Close' ) }
+				onClick={ () => setIsListViewOpened( false ) }
+			/>
+			<TabPanel
+				className="edit-post-editor__document-overview-panel__tab-panel"
+				ref={ tabPanelRef }
+				onSelect={ ( tabName ) => setTab( tabName ) }
+				selectOnMove={ false }
+				tabs={ [
+					{
+						name: 'list-view',
+						title: 'List View',
+						className: 'edit-post-sidebar__panel-tab',
+					},
+					{
+						name: 'outline',
+						title: 'Outline',
+						className: 'edit-post-sidebar__panel-tab',
+					},
+				] }
 			>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ () => setIsListViewOpened( false ) }
-				/>
-				<ul>
-					<li>
-						<Button
-							ref={ listViewTabRef }
-							onClick={ () => {
-								setTab( 'list-view' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'list-view' }
-							) }
-							aria-current={ tab === 'list-view' }
-						>
-							{ __( 'List View' ) }
-						</Button>
-					</li>
-					<li>
-						<Button
-							ref={ outlineTabRef }
-							onClick={ () => {
-								setTab( 'outline' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'outline' }
-							) }
-							aria-current={ tab === 'outline' }
-						>
-							{ __( 'Outline' ) }
-						</Button>
-					</li>
-				</ul>
-			</div>
-			<div
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-					listViewRef,
-				] ) }
-				className="edit-post-editor__list-view-container"
-			>
-				{ tab === 'list-view' && (
-					<div className="edit-post-editor__list-view-panel-content">
-						<ListView />
+				{ ( currentTab ) => (
+					<div
+						className="edit-post-editor__list-view-container"
+						ref={ listViewContainerRef }
+					>
+						{ renderTabContent( currentTab.name ) }
 					</div>
 				) }
-				{ tab === 'outline' && <ListViewOutline /> }
-			</div>
+			</TabPanel>
 		</div>
 	);
 }

package/src/components/secondary-sidebar/style.scss

@@ -17,8 +17,29 @@
 		width: 350px;
 	}
 
-	.edit-post-sidebar__panel-tabs {
-		flex-direction: row-reverse;
+	.edit-post-editor__document-overview-panel__close-button {
+		position: absolute;
+		right: $grid-unit-10;
+		top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+		z-index: 1;
+		background: $white;
+	}
+
+	// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
+	.components-tab-panel__tabs {
+		border-bottom: $border-width solid $gray-300;
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		padding-right: $grid-unit-70;
+
+		.edit-post-sidebar__panel-tab {
+			width: 50%;
+		}
+	}
+
+	.components-tab-panel__tab-content {
+		height: calc(100% - #{$grid-unit-60});
 	}
 }
 
@@ -37,34 +58,6 @@
 	}
 }
 
-.edit-post-editor__document-overview-panel-header {
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-	ul {
-		width: calc(100% - #{ $grid-unit-50 });
-	}
-	li {
-		width: 50%;
-		button {
-			width: 100%;
-			text-align: initial;
-		}
-	}
-	li:only-child {
-		width: 100%;
-	}
-
-	&.components-panel__header.edit-post-sidebar__panel-tabs {
-		.components-button.has-icon {
-			display: flex;
-		}
-	}
-}
-
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
@@ -118,5 +111,9 @@
 .edit-post-editor__list-view-container {
 	display: flex;
 	flex-direction: column;
-	height: calc(100% - #{$grid-unit-60});
+	height: 100%;
+}
+
+.edit-post-editor__document-overview-panel__tab-panel {
+	height: 100%;
 }

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

@@ -31,12 +31,10 @@ import {
 	__experimentaluseLayoutStyles as useLayoutStyles,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
-import { arrowLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { parse } from '@wordpress/blocks';
+import { parse, store as blocksStore } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -114,6 +112,7 @@ export default function VisualEditor( { styles } ) {
 		wrapperBlockName,
 		wrapperUniqueId,
 		isBlockBasedTheme,
+		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -123,6 +122,7 @@ export default function VisualEditor( { styles } ) {
 		} = select( editPostStore );
 		const { getCurrentPostId, getCurrentPostType, getEditorSettings } =
 			select( editorStore );
+		const { getBlockTypes } = select( blocksStore );
 		const _isTemplateMode = isEditingTemplate();
 		let _wrapperBlockName;
 
@@ -153,6 +153,9 @@ export default function VisualEditor( { styles } ) {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+				return type.apiVersion >= 3;
+			} ),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -175,8 +178,6 @@ export default function VisualEditor( { styles } ) {
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
 		};
 	}, [] );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
 		height: '100%',
 		width: '100%',
@@ -349,18 +350,6 @@ export default function VisualEditor( { styles } ) {
 				} }
 				ref={ blockSelectionClearerRef }
 			>
-				{ isTemplateMode && (
-					<Button
-						className="edit-post-visual-editor__exit-template-mode"
-						icon={ arrowLeft }
-						onClick={ () => {
-							clearSelectedBlock();
-							setIsEditingTemplate( false );
-						} }
-					>
-						{ __( 'Back' ) }
-					</Button>
-				) }
 				<motion.div
 					animate={ animatedStyles }
 					initial={ desktopCanvasStyles }
@@ -368,8 +357,8 @@ export default function VisualEditor( { styles } ) {
 				>
 					<MaybeIframe
 						shouldIframe={
-							( isGutenbergPlugin &&
-								isBlockBasedTheme &&
+							( ( hasV3BlocksOnly ||
+								( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 								! hasMetaBoxes ) ||
 							isTemplateMode ||
 							deviceType === 'Tablet' ||

package/src/components/visual-editor/style.scss

@@ -50,19 +50,6 @@
 	margin-bottom: var(--wp--style--block-gap);
 }
 
-.edit-post-visual-editor__exit-template-mode {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
 .edit-post-visual-editor__content-area {
 	width: 100%;
 	height: 100%;

package/src/style.scss

@@ -2,7 +2,7 @@
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
-@import "./components/header/template-title/style.scss";
+@import "./components/header/document-title/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/block-manager/style.scss";

package/build/components/header/template-title/delete-template.js

@@ -1,117 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DeleteTemplate;
-
-var _element = require("@wordpress/element");
-
-var _i18n = require("@wordpress/i18n");
-
-var _components = require("@wordpress/components");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _data = require("@wordpress/data");
-
-var _editor = require("@wordpress/editor");
-
-var _coreData = require("@wordpress/core-data");
-
-var _store = require("../../../store");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function DeleteTemplate() {
-  const {
-    clearSelectedBlock
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const {
-    setIsEditingTemplate
-  } = (0, _data.useDispatch)(_store.store);
-  const {
-    getEditorSettings
-  } = (0, _data.useSelect)(_editor.store);
-  const {
-    updateEditorSettings,
-    editPost
-  } = (0, _data.useDispatch)(_editor.store);
-  const {
-    deleteEntityRecord
-  } = (0, _data.useDispatch)(_coreData.store);
-  const {
-    template
-  } = (0, _data.useSelect)(select => {
-    const {
-      isEditingTemplate,
-      getEditedPostTemplate
-    } = select(_store.store);
-
-    const _isEditing = isEditingTemplate();
-
-    return {
-      template: _isEditing ? getEditedPostTemplate() : null
-    };
-  }, []);
-  const [showConfirmDialog, setShowConfirmDialog] = (0, _element.useState)(false);
-
-  if (!template || !template.wp_id) {
-    return null;
-  }
-
-  let templateTitle = template.slug;
-
-  if (template !== null && template !== void 0 && template.title) {
-    templateTitle = template.title;
-  }
-
-  const isRevertable = template === null || template === void 0 ? void 0 : template.has_theme_file;
-
-  const onDelete = () => {
-    var _settings$availableTe;
-
-    clearSelectedBlock();
-    setIsEditingTemplate(false);
-    setShowConfirmDialog(false);
-    editPost({
-      template: ''
-    });
-    const settings = getEditorSettings();
-    const newAvailableTemplates = Object.fromEntries(Object.entries((_settings$availableTe = settings.availableTemplates) !== null && _settings$availableTe !== void 0 ? _settings$availableTe : {}).filter(_ref => {
-      let [id] = _ref;
-      return id !== template.slug;
-    }));
-    updateEditorSettings({
-      availableTemplates: newAvailableTemplates
-    });
-    deleteEntityRecord('postType', 'wp_template', template.id, {
-      throwOnError: true
-    });
-  };
-
-  return (0, _element.createElement)(_components.MenuGroup, {
-    className: "edit-post-template-top-area__second-menu-group"
-  }, (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuItem, {
-    className: "edit-post-template-top-area__delete-template-button",
-    isDestructive: !isRevertable,
-    onClick: () => {
-      setShowConfirmDialog(true);
-    },
-    info: isRevertable ? (0, _i18n.__)('Use the template as supplied by the theme.') : undefined
-  }, isRevertable ? (0, _i18n.__)('Clear customizations') : (0, _i18n.__)('Delete template')), (0, _element.createElement)(_components.__experimentalConfirmDialog, {
-    isOpen: showConfirmDialog,
-    onConfirm: onDelete,
-    onCancel: () => {
-      setShowConfirmDialog(false);
-    }
-  }, (0, _i18n.sprintf)(
-  /* translators: %s: template name */
-  (0, _i18n.__)('Are you sure you want to delete the %s template? It may be used by other pages or posts.'), templateTitle))));
-}
-//# sourceMappingURL=delete-template.js.map

package/build/components/header/template-title/delete-template.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/components/header/template-title/delete-template.js"],"names":["DeleteTemplate","clearSelectedBlock","blockEditorStore","setIsEditingTemplate","editPostStore","getEditorSettings","editorStore","updateEditorSettings","editPost","deleteEntityRecord","coreStore","template","select","isEditingTemplate","getEditedPostTemplate","_isEditing","showConfirmDialog","setShowConfirmDialog","wp_id","templateTitle","slug","title","isRevertable","has_theme_file","onDelete","settings","newAvailableTemplates","Object","fromEntries","entries","availableTemplates","filter","id","throwOnError","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalConfirmDialog as ConfirmDialog,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../../store';\n\nexport default function DeleteTemplate() {\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst { setIsEditingTemplate } = useDispatch( editPostStore );\n\tconst { getEditorSettings } = useSelect( editorStore );\n\tconst { updateEditorSettings, editPost } = useDispatch( editorStore );\n\tconst { deleteEntityRecord } = useDispatch( coreStore );\n\tconst { template } = useSelect( ( select ) => {\n\t\tconst { isEditingTemplate, getEditedPostTemplate } =\n\t\t\tselect( editPostStore );\n\t\tconst _isEditing = isEditingTemplate();\n\t\treturn {\n\t\t\ttemplate: _isEditing ? getEditedPostTemplate() : null,\n\t\t};\n\t}, [] );\n\tconst [ showConfirmDialog, setShowConfirmDialog ] = useState( false );\n\n\tif ( ! template || ! template.wp_id ) {\n\t\treturn null;\n\t}\n\tlet templateTitle = template.slug;\n\tif ( template?.title ) {\n\t\ttemplateTitle = template.title;\n\t}\n\n\tconst isRevertable = template?.has_theme_file;\n\n\tconst onDelete = () => {\n\t\tclearSelectedBlock();\n\t\tsetIsEditingTemplate( false );\n\t\tsetShowConfirmDialog( false );\n\n\t\teditPost( {\n\t\t\ttemplate: '',\n\t\t} );\n\t\tconst settings = getEditorSettings();\n\t\tconst newAvailableTemplates = Object.fromEntries(\n\t\t\tObject.entries( settings.availableTemplates ?? {} ).filter(\n\t\t\t\t( [ id ] ) => id !== template.slug\n\t\t\t)\n\t\t);\n\t\tupdateEditorSettings( {\n\t\t\tavailableTemplates: newAvailableTemplates,\n\t\t} );\n\t\tdeleteEntityRecord( 'postType', 'wp_template', template.id, {\n\t\t\tthrowOnError: true,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<MenuGroup className=\"edit-post-template-top-area__second-menu-group\">\n\t\t\t<>\n\t\t\t\t<MenuItem\n\t\t\t\t\tclassName=\"edit-post-template-top-area__delete-template-button\"\n\t\t\t\t\tisDestructive={ ! isRevertable }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowConfirmDialog( true );\n\t\t\t\t\t} }\n\t\t\t\t\tinfo={\n\t\t\t\t\t\tisRevertable\n\t\t\t\t\t\t\t? __( 'Use the template as supplied by the theme.' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ isRevertable\n\t\t\t\t\t\t? __( 'Clear customizations' )\n\t\t\t\t\t\t: __( 'Delete template' ) }\n\t\t\t\t</MenuItem>\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ showConfirmDialog }\n\t\t\t\t\tonConfirm={ onDelete }\n\t\t\t\t\tonCancel={ () => {\n\t\t\t\t\t\tsetShowConfirmDialog( false );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: template name */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Are you sure you want to delete the %s template? It may be used by other pages or posts.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\ttemplateTitle\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t</>\n\t\t</MenuGroup>\n\t);\n}\n"]}

package/build/components/header/template-title/edit-template-title.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = EditTemplateTitle;
-
-var _element = require("@wordpress/element");
-
-var _i18n = require("@wordpress/i18n");
-
-var _components = require("@wordpress/components");
-
-var _data = require("@wordpress/data");
-
-var _editor = require("@wordpress/editor");
-
-var _coreData = require("@wordpress/core-data");
-
-var _store = require("../../../store");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function EditTemplateTitle() {
-  const [forceEmpty, setForceEmpty] = (0, _element.useState)(false);
-  const {
-    template
-  } = (0, _data.useSelect)(select => {
-    const {
-      getEditedPostTemplate
-    } = select(_store.store);
-    return {
-      template: getEditedPostTemplate()
-    };
-  }, []);
-  const {
-    editEntityRecord
-  } = (0, _data.useDispatch)(_coreData.store);
-  const {
-    getEditorSettings
-  } = (0, _data.useSelect)(_editor.store);
-  const {
-    updateEditorSettings
-  } = (0, _data.useDispatch)(_editor.store); // Only user-created and non-default templates can change the name.
-
-  if (!template.is_custom || template.has_theme_file) {
-    return null;
-  }
-
-  let templateTitle = (0, _i18n.__)('Default');
-
-  if (template !== null && template !== void 0 && template.title) {
-    templateTitle = template.title;
-  } else if (!!template) {
-    templateTitle = template.slug;
-  }
-
-  return (0, _element.createElement)("div", {
-    className: "edit-site-template-details__group"
-  }, (0, _element.createElement)(_components.TextControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Title'),
-    value: forceEmpty ? '' : templateTitle,
-    help: (0, _i18n.__)('Give the template a title that indicates its purpose, e.g. "Full Width".'),
-    onChange: newTitle => {
-      var _settings$availableTe;
-
-      // Allow having the field temporarily empty while typing.
-      if (!newTitle && !forceEmpty) {
-        setForceEmpty(true);
-        return;
-      }
-
-      setForceEmpty(false);
-      const settings = getEditorSettings();
-      const newAvailableTemplates = Object.fromEntries(Object.entries((_settings$availableTe = settings.availableTemplates) !== null && _settings$availableTe !== void 0 ? _settings$availableTe : {}).map(_ref => {
-        let [id, existingTitle] = _ref;
-        return [id, id !== template.slug ? existingTitle : newTitle];
-      }));
-      updateEditorSettings({
-        availableTemplates: newAvailableTemplates
-      });
-      editEntityRecord('postType', 'wp_template', template.id, {
-        title: newTitle
-      });
-    },
-    onBlur: () => setForceEmpty(false)
-  }));
-}
-//# sourceMappingURL=edit-template-title.js.map

package/build/components/header/template-title/edit-template-title.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/components/header/template-title/edit-template-title.js"],"names":["EditTemplateTitle","forceEmpty","setForceEmpty","template","select","getEditedPostTemplate","editPostStore","editEntityRecord","coreStore","getEditorSettings","editorStore","updateEditorSettings","is_custom","has_theme_file","templateTitle","title","slug","newTitle","settings","newAvailableTemplates","Object","fromEntries","entries","availableTemplates","map","id","existingTitle"],"mappings":";;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AACA;;AAKA;;AAbA;AACA;AACA;;AAQA;AACA;AACA;AAGe,SAASA,iBAAT,GAA6B;AAC3C,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAe,qBAAaC,MAAF,IAAc;AAC7C,UAAM;AAAEC,MAAAA;AAAF,QAA4BD,MAAM,CAAEE,YAAF,CAAxC;AACA,WAAO;AACNH,MAAAA,QAAQ,EAAEE,qBAAqB;AADzB,KAAP;AAGA,GALoB,EAKlB,EALkB,CAArB;AAOA,QAAM;AAAEE,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAwB,qBAAWC,aAAX,CAA9B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAA2B,uBAAaD,aAAb,CAAjC,CAX2C,CAa3C;;AACA,MAAK,CAAEP,QAAQ,CAACS,SAAX,IAAwBT,QAAQ,CAACU,cAAtC,EAAuD;AACtD,WAAO,IAAP;AACA;;AAED,MAAIC,aAAa,GAAG,cAAI,SAAJ,CAApB;;AACA,MAAKX,QAAL,aAAKA,QAAL,eAAKA,QAAQ,CAAEY,KAAf,EAAuB;AACtBD,IAAAA,aAAa,GAAGX,QAAQ,CAACY,KAAzB;AACA,GAFD,MAEO,IAAK,CAAC,CAAEZ,QAAR,EAAmB;AACzBW,IAAAA,aAAa,GAAGX,QAAQ,CAACa,IAAzB;AACA;;AAED,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,uBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,KAAK,EAAGf,UAAU,GAAG,EAAH,GAAQa,aAH3B;AAIC,IAAA,IAAI,EAAG,cACN,0EADM,CAJR;AAOC,IAAA,QAAQ,EAAKG,QAAF,IAAgB;AAAA;;AAC1B;AACA,UAAK,CAAEA,QAAF,IAAc,CAAEhB,UAArB,EAAkC;AACjCC,QAAAA,aAAa,CAAE,IAAF,CAAb;AACA;AACA;;AACDA,MAAAA,aAAa,CAAE,KAAF,CAAb;AAEA,YAAMgB,QAAQ,GAAGT,iBAAiB,EAAlC;AACA,YAAMU,qBAAqB,GAAGC,MAAM,CAACC,WAAP,CAC7BD,MAAM,CAACE,OAAP,0BAAgBJ,QAAQ,CAACK,kBAAzB,yEAA+C,EAA/C,EAAoDC,GAApD,CACC;AAAA,YAAE,CAAEC,EAAF,EAAMC,aAAN,CAAF;AAAA,eAA6B,CAC5BD,EAD4B,EAE5BA,EAAE,KAAKtB,QAAQ,CAACa,IAAhB,GAAuBU,aAAvB,GAAuCT,QAFX,CAA7B;AAAA,OADD,CAD6B,CAA9B;AAQAN,MAAAA,oBAAoB,CAAE;AACrBY,QAAAA,kBAAkB,EAAEJ;AADC,OAAF,CAApB;AAGAZ,MAAAA,gBAAgB,CAAE,UAAF,EAAc,aAAd,EAA6BJ,QAAQ,CAACsB,EAAtC,EAA0C;AACzDV,QAAAA,KAAK,EAAEE;AADkD,OAA1C,CAAhB;AAGA,KA9BF;AA+BC,IAAA,MAAM,EAAG,MAAMf,aAAa,CAAE,KAAF;AA/B7B,IADD,CADD;AAqCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextControl } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../../store';\n\nexport default function EditTemplateTitle() {\n\tconst [ forceEmpty, setForceEmpty ] = useState( false );\n\tconst { template } = useSelect( ( select ) => {\n\t\tconst { getEditedPostTemplate } = select( editPostStore );\n\t\treturn {\n\t\t\ttemplate: getEditedPostTemplate(),\n\t\t};\n\t}, [] );\n\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst { getEditorSettings } = useSelect( editorStore );\n\tconst { updateEditorSettings } = useDispatch( editorStore );\n\n\t// Only user-created and non-default templates can change the name.\n\tif ( ! template.is_custom || template.has_theme_file ) {\n\t\treturn null;\n\t}\n\n\tlet templateTitle = __( 'Default' );\n\tif ( template?.title ) {\n\t\ttemplateTitle = template.title;\n\t} else if ( !! template ) {\n\t\ttemplateTitle = template.slug;\n\t}\n\n\treturn (\n\t\t<div className=\"edit-site-template-details__group\">\n\t\t\t<TextControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Title' ) }\n\t\t\t\tvalue={ forceEmpty ? '' : templateTitle }\n\t\t\t\thelp={ __(\n\t\t\t\t\t'Give the template a title that indicates its purpose, e.g. \"Full Width\".'\n\t\t\t\t) }\n\t\t\t\tonChange={ ( newTitle ) => {\n\t\t\t\t\t// Allow having the field temporarily empty while typing.\n\t\t\t\t\tif ( ! newTitle && ! forceEmpty ) {\n\t\t\t\t\t\tsetForceEmpty( true );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tsetForceEmpty( false );\n\n\t\t\t\t\tconst settings = getEditorSettings();\n\t\t\t\t\tconst newAvailableTemplates = Object.fromEntries(\n\t\t\t\t\t\tObject.entries( settings.availableTemplates ?? {} ).map(\n\t\t\t\t\t\t\t( [ id, existingTitle ] ) => [\n\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\tid !== template.slug ? existingTitle : newTitle,\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t\tupdateEditorSettings( {\n\t\t\t\t\t\tavailableTemplates: newAvailableTemplates,\n\t\t\t\t\t} );\n\t\t\t\t\teditEntityRecord( 'postType', 'wp_template', template.id, {\n\t\t\t\t\t\ttitle: newTitle,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tonBlur={ () => setForceEmpty( false ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"]}