@wordpress/edit-post 6.9.0 → 6.10.0

package/src/components/sidebar/post-schedule/index.js

@@ -1,21 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
-	PostScheduleLabel,
 	PostScheduleCheck,
 	usePostScheduleLabel,
 } from '@wordpress/editor';
 
 export default function PostSchedule() {
 	const anchorRef = useRef();
-
-	const fullLabel = usePostScheduleLabel( { full: true } );
-
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -24,18 +20,12 @@ export default function PostSchedule() {
 					popoverProps={ { anchorRef } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
-					renderToggle={ ( { onToggle, isOpen } ) => (
-						<>
-							<Button
-								className="edit-post-post-schedule__toggle"
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								variant="tertiary"
-								label={ fullLabel }
-							>
-								<PostScheduleLabel />
-							</Button>
-						</>
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostScheduleToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
 					) }
 					renderContent={ ( { onClose } ) => (
 						<PostScheduleForm onClose={ onClose } />
@@ -45,3 +35,22 @@ export default function PostSchedule() {
 		</PostScheduleCheck>
 	);
 }
+
+function PostScheduleToggle( { isOpen, onClick } ) {
+	const label = usePostScheduleLabel();
+	const fullLabel = usePostScheduleLabel( { full: true } );
+	return (
+		<Button
+			className="edit-post-post-schedule__toggle"
+			variant="tertiary"
+			label={ fullLabel }
+			showTooltip
+			aria-expanded={ isOpen }
+			// translators: %s: Current post date.
+			aria-label={ sprintf( __( 'Change date: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

package/src/components/sidebar/post-schedule/style.scss

@@ -2,13 +2,11 @@
 	width: 100%;
 	position: relative;
 	justify-content: flex-start;
-	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
-		padding: 6px 0;
 	}
 }
 

package/src/components/sidebar/post-slug/index.js

@@ -7,7 +7,7 @@ import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-slug">
 				<PostSlugForm />
 			</PanelRow>
 		</PostSlugCheck>

package/src/components/sidebar/post-slug/style.scss

@@ -1,4 +1,5 @@
-.editor-post-slug__input {
-	margin: -5px 0;
-	padding: 2px;
+.edit-post-post-slug {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }

package/src/components/sidebar/post-status/index.js

@@ -20,6 +20,7 @@ import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
 import PostTemplate from '../post-template';
+import PostURL from '../post-url';
 
 /**
  * Module Constants
@@ -39,10 +40,11 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
+						<PostURL />
 						<PostTemplate />
-						<PostFormat />
 						<PostSticky />
 						<PostPendingStatus />
+						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
 						{ fills }

package/src/components/sidebar/post-template/create-modal.js

@@ -117,7 +117,7 @@ export default function PostTemplateCreateModal( { onClose } ) {
 							placeholder={ DEFAULT_TITLE }
 							disabled={ isBusy }
 							help={ __(
-								'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.'
+								'Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.'
 							) }
 						/>
 					</FlexItem>

package/src/components/sidebar/post-template/form.js

@@ -50,7 +50,10 @@ export default function PostTemplateForm( { onClose } ) {
 			),
 			selectedTemplateSlug:
 				select( editorStore ).getEditedPostAttribute( 'template' ),
-			canCreate: canCreateTemplates && ! _isPostsPage,
+			canCreate:
+				canCreateTemplates &&
+				! _isPostsPage &&
+				editorSettings.supportsTemplateMode,
 			canEdit:
 				canCreateTemplates &&
 				editorSettings.supportsTemplateMode &&

package/src/components/sidebar/post-template/index.js

@@ -27,8 +27,8 @@ export default function PostTemplate() {
 		const hasTemplates =
 			!! settings.availableTemplates &&
 			Object.keys( settings.availableTemplates ).length > 0;
-		if ( hasTemplates ) {
-			return true;
+		if ( ! hasTemplates && ! settings.supportsTemplateMode ) {
+			return false;
 		}
 
 		const canCreateTemplates =
@@ -48,6 +48,7 @@ export default function PostTemplate() {
 				position="bottom left"
 				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
+				focusOnMount
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<PostTemplateToggle
 						isOpen={ isOpen }
@@ -95,7 +96,7 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 			}
 			onClick={ onClick }
 		>
-			{ templateTitle ?? __( '(none)' ) }
+			{ templateTitle ?? __( 'Default template' ) }
 		</Button>
 	);
 }

package/src/components/sidebar/post-template/style.scss

@@ -29,16 +29,6 @@
 	margin: $grid-unit-10;
 }
 
-.edit-post-post-template__create-modal {
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
-}
-
 .edit-post-post-template__create-form {
 	@include break-medium() {
 		width: $grid-unit * 40;

package/src/components/sidebar/post-url/index.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	PostURLCheck,
+	PostURL as PostURLForm,
+	usePostURLLabel,
+} from '@wordpress/editor';
+
+export default function PostURL() {
+	const anchorRef = useRef();
+	return (
+		<PostURLCheck>
+			<PanelRow className="edit-post-post-url" ref={ anchorRef }>
+				<span>{ __( 'URL' ) }</span>
+				<Dropdown
+					popoverProps={ { anchorRef } }
+					position="bottom left"
+					className="edit-post-post-url__dropdown"
+					contentClassName="edit-post-post-url__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
+					) }
+					renderContent={ ( { onClose } ) => (
+						<PostURLForm onClose={ onClose } />
+					) }
+				/>
+			</PanelRow>
+		</PostURLCheck>
+	);
+}
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const label = usePostURLLabel();
+	return (
+		<Button
+			className="edit-post-post-url__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post URL.
+			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

package/src/components/sidebar/post-url/style.scss

@@ -0,0 +1,23 @@
+.edit-post-post-url {
+	width: 100%;
+	justify-content: flex-start;
+
+	span {
+		display: block;
+		width: 45%;
+		flex-shrink: 0;
+	}
+}
+
+.components-button.edit-post-post-url__toggle {
+	text-align: left;
+	white-space: normal;
+	height: auto;
+	word-break: break-word;
+}
+
+.edit-post-post-url__dialog .editor-post-url {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}

package/src/components/sidebar/post-visibility/index.js

@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import {
 	PostVisibility as PostVisibilityForm,
 	PostVisibilityLabel,
 	PostVisibilityCheck,
+	usePostVisibilityLabel,
 } from '@wordpress/editor';
 import { useRef } from '@wordpress/element';
 
@@ -32,15 +33,12 @@ export function PostVisibility() {
 								// when the label changes.
 								anchorRef: rowRef.current,
 							} }
+							focusOnMount
 							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									aria-expanded={ isOpen }
-									className="edit-post-post-visibility__toggle"
+								<PostVisibilityToggle
+									isOpen={ isOpen }
 									onClick={ onToggle }
-									variant="tertiary"
-								>
-									<PostVisibilityLabel />
-								</Button>
+								/>
 							) }
 							renderContent={ ( { onClose } ) => (
 								<PostVisibilityForm onClose={ onClose } />
@@ -53,4 +51,20 @@ export function PostVisibility() {
 	);
 }
 
+function PostVisibilityToggle( { isOpen, onClick } ) {
+	const label = usePostVisibilityLabel();
+	return (
+		<Button
+			className="edit-post-post-visibility__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post visibility.
+			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
+
 export default PostVisibility;

package/src/components/sidebar/settings-sidebar/index.js

@@ -19,7 +19,6 @@ import LastRevision from '../last-revision';
 import PostTaxonomies from '../post-taxonomies';
 import FeaturedImage from '../featured-image';
 import PostExcerpt from '../post-excerpt';
-import PostLink from '../post-link';
 import DiscussionPanel from '../discussion-panel';
 import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
@@ -41,7 +40,7 @@ const SettingsSidebar = () => {
 			// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
 			// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
 			// If one of the two sidebars is active the component will contain the content of that sidebar.
-			// When neither of the the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
+			// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
 			// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
 			// should contain the sidebar that will be active when the toggle button is pressed. If a block
 			// is selected, that should be edit-post/block otherwise it's edit-post/document.
@@ -87,7 +86,6 @@ const SettingsSidebar = () => {
 					<PostStatus />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
-					<PostLink />
 					<PostTaxonomies />
 					<FeaturedImage />
 					<PostExcerpt />

package/src/components/sidebar/template/style.scss

@@ -0,0 +1,35 @@
+.edit-post-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}
+
+.edit-post-template__modal-actions {
+	margin-top: $grid-unit-15;
+}
+
+.edit-post-template-modal__tip {
+	padding: $grid-unit-20 $grid-unit-30;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+
+	@include break-medium() {
+		width: $grid-unit * 30;
+	}
+}
+
+.edit-post-template__notice {
+	margin: 0 0 $grid-unit-10 0;
+
+	.components-notice__content {
+		margin: 0;
+	}
+}
+
+.edit-post-template__actions {
+	button:not(:last-child) {
+		margin-right: $grid-unit-10;
+	}
+}

package/src/components/start-page-options/style.scss

@@ -11,15 +11,6 @@
 	@include break-large() {
 		height: 70%;
 	}
-
-	// @todo: Consider this for a minimal modal prop.
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		content: none;
-	}
 }
 
 // 2 column masonry layout.

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

@@ -245,6 +245,7 @@ export default function VisualEditor( { styles } ) {
 							<LayoutStyle
 								selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
 								layout={ defaultLayout }
+								layoutDefinitions={ defaultLayout?.definitions }
 							/>
 						) }
 						{ ! isTemplateMode && (
@@ -260,7 +261,7 @@ export default function VisualEditor( { styles } ) {
 								className={
 									isTemplateMode
 										? 'wp-site-blocks'
-										: undefined
+										: 'is-layout-flow' // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								__experimentalLayout={ layout }
 							/>

package/src/style.scss

@@ -11,11 +11,12 @@
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
 @import "./components/sidebar/post-author/style.scss";
-@import "./components/sidebar/post-link/style.scss";
+@import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
 @import "./components/sidebar/post-status/style.scss";
 @import "./components/sidebar/post-template/style.scss";
+@import "./components/sidebar/post-url/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-summary/style.scss";

package/build/components/sidebar/post-link/index.js

@@ -1,182 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _lodash = require("lodash");
-
-var _i18n = require("@wordpress/i18n");
-
-var _components = require("@wordpress/components");
-
-var _data = require("@wordpress/data");
-
-var _compose = require("@wordpress/compose");
-
-var _editor = require("@wordpress/editor");
-
-var _url = require("@wordpress/url");
-
-var _coreData = require("@wordpress/core-data");
-
-var _store = require("../../../store");
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-link';
-
-function PostLink(_ref) {
-  let {
-    isOpened,
-    onTogglePanel,
-    isEditable,
-    postLink,
-    permalinkPrefix,
-    permalinkSuffix,
-    editPermalink,
-    postSlug,
-    postTypeLabel
-  } = _ref;
-  const [forceEmptyField, setForceEmptyField] = (0, _element.useState)(false);
-  let prefixElement, postNameElement, suffixElement;
-
-  if (isEditable) {
-    prefixElement = permalinkPrefix && (0, _element.createElement)("span", {
-      className: "edit-post-post-link__link-prefix"
-    }, permalinkPrefix);
-    postNameElement = postSlug && (0, _element.createElement)("span", {
-      className: "edit-post-post-link__link-post-name"
-    }, postSlug);
-    suffixElement = permalinkSuffix && (0, _element.createElement)("span", {
-      className: "edit-post-post-link__link-suffix"
-    }, permalinkSuffix);
-  }
-
-  return (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Permalink'),
-    opened: isOpened,
-    onToggle: onTogglePanel
-  }, isEditable && (0, _element.createElement)("div", {
-    className: "editor-post-link"
-  }, (0, _element.createElement)(_components.TextControl, {
-    label: (0, _i18n.__)('URL Slug'),
-    value: forceEmptyField ? '' : postSlug,
-    autoComplete: "off",
-    spellCheck: "false",
-    onChange: newValue => {
-      editPermalink(newValue); // When we delete the field the permalink gets
-      // reverted to the original value.
-      // The forceEmptyField logic allows the user to have
-      // the field temporarily empty while typing.
-
-      if (!newValue) {
-        if (!forceEmptyField) {
-          setForceEmptyField(true);
-        }
-
-        return;
-      }
-
-      if (forceEmptyField) {
-        setForceEmptyField(false);
-      }
-    },
-    onBlur: event => {
-      editPermalink((0, _url.cleanForSlug)(event.target.value));
-
-      if (forceEmptyField) {
-        setForceEmptyField(false);
-      }
-    }
-  }), (0, _element.createElement)("p", null, (0, _i18n.__)('The last part of the URL.'), ' ', (0, _element.createElement)(_components.ExternalLink, {
-    href: (0, _i18n.__)('https://wordpress.org/support/article/settings-sidebar/#permalink')
-  }, (0, _i18n.__)('Read about permalinks')))), (0, _element.createElement)("h3", {
-    className: "edit-post-post-link__preview-label"
-  }, postTypeLabel || (0, _i18n.__)('View post')), (0, _element.createElement)("div", {
-    className: "edit-post-post-link__preview-link-container"
-  }, (0, _element.createElement)(_components.ExternalLink, {
-    className: "edit-post-post-link__link",
-    href: postLink,
-    target: "_blank"
-  }, isEditable ? (0, _element.createElement)(_element.Fragment, null, prefixElement, postNameElement, suffixElement) : postLink)));
-}
-
-var _default = (0, _compose.compose)([(0, _data.withSelect)(select => {
-  const {
-    isPermalinkEditable,
-    getCurrentPost,
-    isCurrentPostPublished,
-    getPermalinkParts,
-    getEditedPostAttribute,
-    getEditedPostSlug
-  } = select(_editor.store);
-  const {
-    isEditorPanelEnabled,
-    isEditorPanelOpened
-  } = select(_store.store);
-  const {
-    getPostType
-  } = select(_coreData.store);
-  const {
-    link
-  } = getCurrentPost();
-  const postTypeName = getEditedPostAttribute('type');
-  const postType = getPostType(postTypeName);
-  const permalinkParts = getPermalinkParts();
-  return {
-    postLink: link,
-    isEditable: isPermalinkEditable(),
-    isPublished: isCurrentPostPublished(),
-    isOpened: isEditorPanelOpened(PANEL_NAME),
-    isEnabled: isEditorPanelEnabled(PANEL_NAME),
-    isViewable: (0, _lodash.get)(postType, ['viewable'], false),
-    postSlug: (0, _url.safeDecodeURIComponent)(getEditedPostSlug()),
-    postTypeLabel: (0, _lodash.get)(postType, ['labels', 'view_item']),
-    hasPermalinkParts: !!permalinkParts,
-    permalinkPrefix: permalinkParts === null || permalinkParts === void 0 ? void 0 : permalinkParts.prefix,
-    permalinkSuffix: permalinkParts === null || permalinkParts === void 0 ? void 0 : permalinkParts.suffix
-  };
-}), (0, _compose.ifCondition)(_ref2 => {
-  let {
-    isEnabled,
-    postLink,
-    isViewable,
-    hasPermalinkParts
-  } = _ref2;
-  return isEnabled && postLink && isViewable && hasPermalinkParts;
-}), (0, _data.withDispatch)(dispatch => {
-  const {
-    toggleEditorPanelOpened
-  } = dispatch(_store.store);
-  const {
-    editPost
-  } = dispatch(_editor.store);
-  return {
-    onTogglePanel: () => toggleEditorPanelOpened(PANEL_NAME),
-    editPermalink: newSlug => {
-      editPost({
-        slug: newSlug
-      });
-    }
-  };
-})])(PostLink);
-
-exports.default = _default;
-//# sourceMappingURL=index.js.map

package/build/components/sidebar/post-link/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/components/sidebar/post-link/index.js"],"names":["PANEL_NAME","PostLink","isOpened","onTogglePanel","isEditable","postLink","permalinkPrefix","permalinkSuffix","editPermalink","postSlug","postTypeLabel","forceEmptyField","setForceEmptyField","prefixElement","postNameElement","suffixElement","newValue","event","target","value","select","isPermalinkEditable","getCurrentPost","isCurrentPostPublished","getPermalinkParts","getEditedPostAttribute","getEditedPostSlug","editorStore","isEditorPanelEnabled","isEditorPanelOpened","editPostStore","getPostType","coreStore","link","postTypeName","postType","permalinkParts","isPublished","isEnabled","isViewable","hasPermalinkParts","prefix","suffix","dispatch","toggleEditorPanelOpened","editPost","newSlug","slug"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { PanelBody, TextControl, ExternalLink } from '@wordpress/components';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { compose, ifCondition } from '@wordpress/compose';\nimport { store as editorStore } from '@wordpress/editor';\nimport { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';\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\n/**\n * Module Constants\n */\nconst PANEL_NAME = 'post-link';\n\nfunction PostLink( {\n\tisOpened,\n\tonTogglePanel,\n\tisEditable,\n\tpostLink,\n\tpermalinkPrefix,\n\tpermalinkSuffix,\n\teditPermalink,\n\tpostSlug,\n\tpostTypeLabel,\n} ) {\n\tconst [ forceEmptyField, setForceEmptyField ] = useState( false );\n\n\tlet prefixElement, postNameElement, suffixElement;\n\tif ( isEditable ) {\n\t\tprefixElement = permalinkPrefix && (\n\t\t\t<span className=\"edit-post-post-link__link-prefix\">\n\t\t\t\t{ permalinkPrefix }\n\t\t\t</span>\n\t\t);\n\t\tpostNameElement = postSlug && (\n\t\t\t<span className=\"edit-post-post-link__link-post-name\">\n\t\t\t\t{ postSlug }\n\t\t\t</span>\n\t\t);\n\t\tsuffixElement = permalinkSuffix && (\n\t\t\t<span className=\"edit-post-post-link__link-suffix\">\n\t\t\t\t{ permalinkSuffix }\n\t\t\t</span>\n\t\t);\n\t}\n\n\treturn (\n\t\t<PanelBody\n\t\t\ttitle={ __( 'Permalink' ) }\n\t\t\topened={ isOpened }\n\t\t\tonToggle={ onTogglePanel }\n\t\t>\n\t\t\t{ isEditable && (\n\t\t\t\t<div className=\"editor-post-link\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'URL Slug' ) }\n\t\t\t\t\t\tvalue={ forceEmptyField ? '' : postSlug }\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tspellCheck=\"false\"\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\teditPermalink( newValue );\n\t\t\t\t\t\t\t// When we delete the field the permalink gets\n\t\t\t\t\t\t\t// reverted to the original value.\n\t\t\t\t\t\t\t// The forceEmptyField logic allows the user to have\n\t\t\t\t\t\t\t// the field temporarily empty while typing.\n\t\t\t\t\t\t\tif ( ! newValue ) {\n\t\t\t\t\t\t\t\tif ( ! forceEmptyField ) {\n\t\t\t\t\t\t\t\t\tsetForceEmptyField( true );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( forceEmptyField ) {\n\t\t\t\t\t\t\t\tsetForceEmptyField( false );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonBlur={ ( event ) => {\n\t\t\t\t\t\t\teditPermalink( cleanForSlug( event.target.value ) );\n\t\t\t\t\t\t\tif ( forceEmptyField ) {\n\t\t\t\t\t\t\t\tsetForceEmptyField( false );\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\t<p>\n\t\t\t\t\t\t{ __( 'The last part of the URL.' ) }{ ' ' }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/settings-sidebar/#permalink'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Read about permalinks' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<h3 className=\"edit-post-post-link__preview-label\">\n\t\t\t\t{ postTypeLabel || __( 'View post' ) }\n\t\t\t</h3>\n\t\t\t<div className=\"edit-post-post-link__preview-link-container\">\n\t\t\t\t<ExternalLink\n\t\t\t\t\tclassName=\"edit-post-post-link__link\"\n\t\t\t\t\thref={ postLink }\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t>\n\t\t\t\t\t{ isEditable ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ prefixElement }\n\t\t\t\t\t\t\t{ postNameElement }\n\t\t\t\t\t\t\t{ suffixElement }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tpostLink\n\t\t\t\t\t) }\n\t\t\t\t</ExternalLink>\n\t\t\t</div>\n\t\t</PanelBody>\n\t);\n}\n\nexport default compose( [\n\twithSelect( ( select ) => {\n\t\tconst {\n\t\t\tisPermalinkEditable,\n\t\t\tgetCurrentPost,\n\t\t\tisCurrentPostPublished,\n\t\t\tgetPermalinkParts,\n\t\t\tgetEditedPostAttribute,\n\t\t\tgetEditedPostSlug,\n\t\t} = select( editorStore );\n\t\tconst { isEditorPanelEnabled, isEditorPanelOpened } =\n\t\t\tselect( editPostStore );\n\t\tconst { getPostType } = select( coreStore );\n\n\t\tconst { link } = getCurrentPost();\n\n\t\tconst postTypeName = getEditedPostAttribute( 'type' );\n\t\tconst postType = getPostType( postTypeName );\n\t\tconst permalinkParts = getPermalinkParts();\n\n\t\treturn {\n\t\t\tpostLink: link,\n\t\t\tisEditable: isPermalinkEditable(),\n\t\t\tisPublished: isCurrentPostPublished(),\n\t\t\tisOpened: isEditorPanelOpened( PANEL_NAME ),\n\t\t\tisEnabled: isEditorPanelEnabled( PANEL_NAME ),\n\t\t\tisViewable: get( postType, [ 'viewable' ], false ),\n\t\t\tpostSlug: safeDecodeURIComponent( getEditedPostSlug() ),\n\t\t\tpostTypeLabel: get( postType, [ 'labels', 'view_item' ] ),\n\t\t\thasPermalinkParts: !! permalinkParts,\n\t\t\tpermalinkPrefix: permalinkParts?.prefix,\n\t\t\tpermalinkSuffix: permalinkParts?.suffix,\n\t\t};\n\t} ),\n\tifCondition( ( { isEnabled, postLink, isViewable, hasPermalinkParts } ) => {\n\t\treturn isEnabled && postLink && isViewable && hasPermalinkParts;\n\t} ),\n\twithDispatch( ( dispatch ) => {\n\t\tconst { toggleEditorPanelOpened } = dispatch( editPostStore );\n\t\tconst { editPost } = dispatch( editorStore );\n\t\treturn {\n\t\t\tonTogglePanel: () => toggleEditorPanelOpened( PANEL_NAME ),\n\t\t\teditPermalink: ( newSlug ) => {\n\t\t\t\teditPost( { slug: newSlug } );\n\t\t\t},\n\t\t};\n\t} ),\n] )( PostLink );\n"]}