@wordpress/editor 13.32.0 → 13.34.0

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -27,6 +27,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -139,22 +163,28 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-3"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-3"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-3"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-3"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -189,6 +219,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -301,22 +355,28 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-4"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-4"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-4"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-4"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -341,6 +401,30 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -424,22 +508,28 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-1"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-1"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-1"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-1"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -464,6 +554,30 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -547,22 +661,28 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-0"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-0"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-0"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-0"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -631,6 +751,30 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   margin-bottom: inherit;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -695,22 +839,28 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
         <div
           class="components-base-control__field emotion-8 emotion-9"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-2"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-2"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-2"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-2"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>

package/src/components/post-saved-state/index.js

@@ -40,13 +40,14 @@ export default function PostSavedState( { forceIsDirty } ) {
 		isAutosaving,
 		isDirty,
 		isNew,
-		isPending,
 		isPublished,
 		isSaveable,
 		isSaving,
 		isScheduled,
 		hasPublishAction,
 		showIconLabels,
+		postStatus,
+		postStatusHasChanged,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -59,14 +60,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 				getCurrentPost,
 				isAutosavingPost,
 				getEditedPostAttribute,
+				getPostEdits,
 			} = select( editorStore );
 			const { get } = select( preferencesStore );
-
 			return {
 				isAutosaving: isAutosavingPost(),
 				isDirty: forceIsDirty || isEditedPostDirty(),
 				isNew: isEditedPostNew(),
-				isPending: 'pending' === getEditedPostAttribute( 'status' ),
 				isPublished: isCurrentPostPublished(),
 				isSaving: isSavingPost(),
 				isSaveable: isEditedPostSaveable(),
@@ -74,11 +74,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
 				showIconLabels: get( 'core', 'showIconLabels' ),
+				postStatus: getEditedPostAttribute( 'status' ),
+				postStatusHasChanged: !! getPostEdits()?.status,
 			};
 		},
 		[ forceIsDirty ]
 	);
-
+	const isPending = postStatus === 'pending';
 	const { savePost } = useDispatch( editorStore );
 
 	const wasSaving = usePrevious( isSaving );
@@ -102,7 +104,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 		return null;
 	}
 
-	if ( isPublished || isScheduled ) {
+	if (
+		isPublished ||
+		isScheduled ||
+		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) ||
+		( postStatusHasChanged &&
+			[ 'pending', 'draft' ].includes( postStatus ) )
+	) {
 		return null;
 	}
 
@@ -115,7 +123,6 @@ export default function PostSavedState( { forceIsDirty } ) {
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
 	const isDisabled = isSaving || isSaved || ! isSaveable;
-
 	let text;
 
 	if ( isSaving ) {

package/src/components/post-saved-state/test/index.js

@@ -47,6 +47,7 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: true,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -62,6 +63,7 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -75,6 +77,7 @@ describe( 'PostSavedState', () => {
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -93,6 +96,7 @@ describe( 'PostSavedState', () => {
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		// Simulate the viewport being considered large.

package/src/components/post-schedule/panel.js

@@ -4,6 +4,7 @@
 import { Button, Dropdown } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,9 +13,27 @@ import PostScheduleCheck from './check';
 import PostScheduleForm from './index';
 import { usePostScheduleLabel } from './label';
 import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+
+const DESIGN_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+];
 
 export default function PostSchedulePanel() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
 		() => ( {
@@ -29,6 +48,9 @@ export default function PostSchedulePanel() {
 
 	const label = usePostScheduleLabel();
 	const fullLabel = usePostScheduleLabel( { full: true } );
+	if ( DESIGN_POST_TYPES.includes( postType ) ) {
+		return null;
+	}
 
 	return (
 		<PostScheduleCheck>
@@ -40,7 +62,7 @@ export default function PostSchedulePanel() {
 					contentClassName="editor-post-schedule__dialog"
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
-							__next40pxDefaultSize
+							size="compact"
 							className="editor-post-schedule__dialog-toggle"
 							variant="tertiary"
 							onClick={ onToggle }

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

@@ -10,14 +10,12 @@
 }
 
 .editor-post-schedule__dialog-toggle.components-button {
-	display: block;
-	max-width: 100%;
 	overflow: hidden;
 	text-align: left;
 	white-space: unset;
 	height: auto;
+	min-height: $button-size-compact;
 
 	// The line height + the padding should be the same as the button size.
-	padding: math.div($button-size - $grid-unit-20, 2) 12px;
-	line-height: $grid-unit-20;
+	line-height: inherit;
 }

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

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { TextControl } from '@wordpress/components';
 
@@ -14,72 +13,55 @@ import { TextControl } from '@wordpress/components';
 import PostSlugCheck from './check';
 import { store as editorStore } from '../../store';
 
-export class PostSlug extends Component {
-	constructor( { postSlug, postTitle, postID } ) {
-		super( ...arguments );
-
-		this.state = {
-			editedSlug:
-				safeDecodeURIComponent( postSlug ) ||
-				cleanForSlug( postTitle ) ||
-				postID,
-		};
-
-		this.setSlug = this.setSlug.bind( this );
-	}
-
-	setSlug( event ) {
-		const { postSlug, onUpdateSlug } = this.props;
-		const { value } = event.target;
-
-		const editedSlug = cleanForSlug( value );
-
-		if ( editedSlug === postSlug ) {
-			return;
-		}
-
-		onUpdateSlug( editedSlug );
-	}
+function PostSlugControl() {
+	const postSlug = useSelect( ( select ) => {
+		return safeDecodeURIComponent(
+			select( editorStore ).getEditedPostSlug()
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+	const [ forceEmptyField, setForceEmptyField ] = useState( false );
 
-	render() {
-		const { editedSlug } = this.state;
-		return (
-			<PostSlugCheck>
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Slug' ) }
-					autoComplete="off"
-					spellCheck="false"
-					value={ editedSlug }
-					onChange={ ( slug ) =>
-						this.setState( { editedSlug: slug } )
+	return (
+		<TextControl
+			__nextHasNoMarginBottom
+			label={ __( 'Slug' ) }
+			autoComplete="off"
+			spellCheck="false"
+			value={ forceEmptyField ? '' : postSlug }
+			onChange={ ( newValue ) => {
+				editPost( { slug: 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 );
 					}
-					onBlur={ this.setSlug }
-					className="editor-post-slug"
-				/>
-			</PostSlugCheck>
-		);
-	}
+					return;
+				}
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			onBlur={ ( event ) => {
+				editPost( {
+					slug: cleanForSlug( event.target.value ),
+				} );
+				if ( forceEmptyField ) {
+					setForceEmptyField( false );
+				}
+			} }
+			className="editor-post-slug"
+		/>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } =
-			select( editorStore );
-
-		const { id } = getCurrentPost();
-		return {
-			postSlug: getEditedPostAttribute( 'slug' ),
-			postTitle: getEditedPostAttribute( 'title' ),
-			postID: id,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( editorStore );
-		return {
-			onUpdateSlug( slug ) {
-				editPost( { slug } );
-			},
-		};
-	} ),
-] )( PostSlug );
+export default function PostSlug() {
+	return (
+		<PostSlugCheck>
+			<PostSlugControl />
+		</PostSlugCheck>
+	);
+}