@wordpress/editor 13.33.0 → 13.34.0

package/src/components/post-publish-button/post-publish-button-or-toggle.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch, compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostPublishButton from './index';
+import { store as editorStore } from '../../store';
+
+export function PostPublishButtonOrToggle( {
+	forceIsDirty,
+	hasPublishAction,
+	isBeingScheduled,
+	isPending,
+	isPublished,
+	isPublishSidebarEnabled,
+	isPublishSidebarOpened,
+	isScheduled,
+	togglePublishSidebar,
+	setEntitiesSavedStatesCallback,
+	postStatusHasChanged,
+	postStatus,
+} ) {
+	const IS_TOGGLE = 'toggle';
+	const IS_BUTTON = 'button';
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	let component;
+
+	/**
+	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
+	 *
+	 * 1) We want to show a BUTTON when the post status is at the _final stage_
+	 * for a particular role (see https://wordpress.org/documentation/article/post-status/):
+	 *
+	 * - is published
+	 * - post status has changed explicitely to something different than 'future' or 'publish'
+	 * - is scheduled to be published
+	 * - is pending and can't be published (but only for viewports >= medium).
+	 * 	 Originally, we considered showing a button for pending posts that couldn't be published
+	 * 	 (for example, for an author with the contributor role). Some languages can have
+	 * 	 long translations for "Submit for review", so given the lack of UI real estate available
+	 * 	 we decided to take into account the viewport in that case.
+	 *  	 See: https://github.com/WordPress/gutenberg/issues/10475
+	 *
+	 * 2) Then, in small viewports, we'll show a TOGGLE.
+	 *
+	 * 3) Finally, we'll use the publish sidebar status to decide:
+	 *
+	 * - if it is enabled, we show a TOGGLE
+	 * - if it is disabled, we show a BUTTON
+	 */
+	if (
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( isScheduled && isBeingScheduled ) ||
+		( isPending && ! hasPublishAction && ! isSmallerThanMediumViewport )
+	) {
+		component = IS_BUTTON;
+	} else if ( isSmallerThanMediumViewport || isPublishSidebarEnabled ) {
+		component = IS_TOGGLE;
+	} else {
+		component = IS_BUTTON;
+	}
+
+	return (
+		<PostPublishButton
+			forceIsDirty={ forceIsDirty }
+			isOpen={ isPublishSidebarOpened }
+			isToggle={ component === IS_TOGGLE }
+			onToggle={ togglePublishSidebar }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		/>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => ( {
+		hasPublishAction:
+			select( editorStore ).getCurrentPost()?._links?.[
+				'wp:action-publish'
+			] ?? false,
+		isBeingScheduled: select( editorStore ).isEditedPostBeingScheduled(),
+		isPending: select( editorStore ).isCurrentPostPending(),
+		isPublished: select( editorStore ).isCurrentPostPublished(),
+		isPublishSidebarEnabled:
+			select( editorStore ).isPublishSidebarEnabled(),
+		isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(),
+		isScheduled: select( editorStore ).isCurrentPostScheduled(),
+		postStatus: select( editorStore ).getEditedPostAttribute( 'status' ),
+		postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { togglePublishSidebar } = dispatch( editorStore );
+		return {
+			togglePublishSidebar,
+		};
+	} )
+)( PostPublishButtonOrToggle );

package/src/components/post-publish-button/test/post-publish-button-or-toggle.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
+
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+
+describe( 'PostPublishButtonOrToggle should render a', () => {
+	afterEach( () => {
+		useViewportMatch.mockRestore();
+	} );
+
+	it( 'button when the post is published (1)', () => {
+		render( <PostPublishButtonOrToggle isPublished /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is scheduled (2)', () => {
+		render( <PostPublishButtonOrToggle isScheduled isBeingScheduled /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
+		render(
+			<PostPublishButtonOrToggle isPending hasPublishAction={ false } />
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
+		useViewportMatch.mockReturnValue( true );
+		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Publish' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
+		render(
+			<PostPublishButtonOrToggle isPublishSidebarEnabled={ false } />
+		);
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+} );

package/src/components/post-publish-panel/style.scss

@@ -188,3 +188,46 @@
 		}
 	}
 }
+
+.edit-post-layout,
+.edit-site-editor__interface-skeleton {
+	.editor-post-publish-panel {
+		position: fixed;
+		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
+		top: $admin-bar-height-big;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		overflow: auto;
+
+		@include break-medium() {
+			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
+			top: $admin-bar-height;
+			left: auto;
+			width: $sidebar-width + $border-width;
+			border-left: $border-width solid $gray-300;
+			transform: translateX(+100%);
+			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+			@include reduce-motion("animation");
+
+			body.is-fullscreen-mode & {
+				top: 0;
+			}
+
+			// Keep it open on focus to avoid conflict with navigate-regions animation.
+			[role="region"]:focus & {
+				transform: translateX(0%);
+			}
+		}
+	}
+
+	.editor-post-publish-panel__header-publish-button {
+		justify-content: center;
+	}
+}
+
+@keyframes editor-post-publish-panel__slide-in-animation {
+	100% {
+		transform: translateX(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-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;
 }