@wordpress/editor 13.33.0 → 13.35.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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -141,7 +141,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		<Button
 			className={
 				isSaveable || isSaving
-					? classnames( {
+					? clsx( {
 							'editor-post-save-draft': ! isSavedState,
 							'editor-post-saved-state': isSavedState,
 							'is-saving': isSaving,

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

@@ -62,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/panel.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelRow } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostSlugForm from './';
+import PostSlugCheck from './check';
+
+export function PostSlug() {
+	return (
+		<PostSlugCheck>
+			<PanelRow className="editor-post-slug">
+				<PostSlugForm />
+			</PanelRow>
+		</PostSlugCheck>
+	);
+}
+
+export default PostSlug;

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

@@ -0,0 +1,5 @@
+.editor-post-slug {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}

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

@@ -26,7 +26,11 @@ describe( 'PostSlug', () => {
 
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
-				getPostType: () => null,
+				getPostType: () => ( {
+					supports: {
+						slug: true,
+					},
+				} ),
 				getEditedPostAttribute: () => 'post',
 				getEditedPostSlug: () => '1',
 			} ) )

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,8 +32,8 @@ import {
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 function PostStatusLabel( { canEdit } ) {
 	const status = useSelect(
@@ -52,15 +53,15 @@ function PostStatusLabel( { canEdit } ) {
 			statusLabel = __( 'Draft' );
 			break;
 		case 'pending':
-			statusLabel = __( 'Pending review' );
+			statusLabel = __( 'Pending' );
 			break;
 		case 'private':
-			statusLabel = __( 'Published privately' );
+			statusLabel = __( 'Private' );
 			break;
 	}
 	return (
 		<Text
-			className={ classnames( 'editor-post-status-label', {
+			className={ clsx( 'editor-post-status-label', {
 				[ ` has-status-${ status }` ]: !! status,
 				'has-icon': canEdit,
 			} ) }
@@ -183,14 +184,6 @@ export default function PostStatus() {
 		return null;
 	}
 
-	if ( ! canEdit ) {
-		return (
-			<div className="editor-post-status">
-				<PostStatusLabel />
-			</div>
-		);
-	}
-
 	const updatePost = ( {
 		status: newStatus = status,
 		password: newPassword = password,
@@ -232,79 +225,94 @@ export default function PostStatus() {
 	};
 
 	return (
-		<Dropdown
-			className="editor-post-status"
-			contentClassName="editor-change-status__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className="editor-post-status-trigger"
-					onClick={ onToggle }
-				>
-					<PostStatusLabel canEdit={ canEdit } />
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ __( 'Status & visibility' ) }
-						onClose={ onClose }
-					/>
-					<form>
-						<VStack spacing={ 4 }>
-							<RadioControl
-								className="editor-change-status__options"
-								hideLabelFromVision
-								label={ __( 'Status' ) }
-								options={ STATUS_OPTIONS }
-								onChange={ handleStatus }
-								selected={
-									status === 'auto-draft' ? 'draft' : status
-								}
+		<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
+			{ canEdit ? (
+				<Dropdown
+					className="editor-post-status"
+					contentClassName="editor-change-status__content"
+					popoverProps={ popoverProps }
+					focusOnMount
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="editor-post-status-trigger"
+							onClick={ onToggle }
+						>
+							<PostStatusLabel canEdit={ canEdit } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<InspectorPopoverHeader
+								title={ __( 'Status & visibility' ) }
+								onClose={ onClose }
 							/>
-							{ status !== 'private' && (
-								<VStack
-									as="fieldset"
-									spacing={ 4 }
-									className="editor-change-status__password-fieldset"
-								>
-									<CheckboxControl
-										__nextHasNoMarginBottom
-										label={ __( 'Password protected' ) }
-										help={ __(
-											'Only visible to those who know the password'
-										) }
-										checked={ showPassword }
-										onChange={ handleTogglePassword }
+							<form>
+								<VStack spacing={ 4 }>
+									<RadioControl
+										className="editor-change-status__options"
+										hideLabelFromVision
+										label={ __( 'Status' ) }
+										options={ STATUS_OPTIONS }
+										onChange={ handleStatus }
+										selected={
+											status === 'auto-draft'
+												? 'draft'
+												: status
+										}
 									/>
-									{ showPassword && (
-										<div className="editor-change-status__password-input">
-											<TextControl
-												label={ __( 'Password' ) }
-												onChange={ ( value ) =>
-													updatePost( {
-														password: value,
-													} )
-												}
-												value={ password }
-												placeholder={ __(
-													'Use a secure password'
-												) }
-												type="text"
-												id={ passwordInputId }
-												__next40pxDefaultSize
+									{ status !== 'private' && (
+										<VStack
+											as="fieldset"
+											spacing={ 4 }
+											className="editor-change-status__password-fieldset"
+										>
+											<CheckboxControl
 												__nextHasNoMarginBottom
+												label={ __(
+													'Password protected'
+												) }
+												help={ __(
+													'Only visible to those who know the password'
+												) }
+												checked={ showPassword }
+												onChange={
+													handleTogglePassword
+												}
 											/>
-										</div>
+											{ showPassword && (
+												<div className="editor-change-status__password-input">
+													<TextControl
+														label={ __(
+															'Password'
+														) }
+														onChange={ ( value ) =>
+															updatePost( {
+																password: value,
+															} )
+														}
+														value={ password }
+														placeholder={ __(
+															'Use a secure password'
+														) }
+														type="text"
+														id={ passwordInputId }
+														__next40pxDefaultSize
+														__nextHasNoMarginBottom
+													/>
+												</div>
+											) }
+										</VStack>
 									) }
 								</VStack>
-							) }
-						</VStack>
-					</form>
-				</>
+							</form>
+						</>
+					) }
+				/>
+			) : (
+				<div className="editor-post-status">
+					<PostStatusLabel />
+				</div>
 			) }
-		/>
+		</PostPanelRow>
 	);
 }

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

@@ -1,6 +1,5 @@
 .editor-post-status {
 	max-width: 100%;
-	margin-bottom: $grid-unit-20;
 
 	.editor-post-status-trigger {
 		padding: 1px;