@wordpress/editor 13.32.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/index.js

@@ -81,13 +81,11 @@ describe( 'PostPublishButton', () => {
 	describe( 'publish status', () => {
 		it( 'should be pending for contributor', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction={ false }
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -97,18 +95,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'pending' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'pending' );
 		} );
 
 		it( 'should be future for scheduled post', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isBeingScheduled
 					isSaveable
 					isPublishable
@@ -119,18 +115,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'future' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'future' );
 		} );
 
 		it( 'should be private for private visibility', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					visibility="private"
 					isSaveable
 					isPublishable
@@ -141,18 +135,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'private' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'private' );
 		} );
 
 		it( 'should be publish otherwise', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -162,20 +154,18 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 
 	describe( 'click', () => {
 		it( 'should save with status', async () => {
 			const user = userEvent.setup();
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -185,8 +175,7 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
-			expect( onSave ).toHaveBeenCalled();
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 

package/src/components/post-publish-button/test/label.js

@@ -1,67 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PublishButtonLabel } from '../label';
+import PublishButtonLabel from '../label';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
 
 describe( 'PublishButtonLabel', () => {
 	it( 'should show publishing if publishing in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublishing: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publishing…' );
 	} );
 
-	it( 'should show updating if published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if published and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Updating…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
-	it( 'should show scheduling if scheduled and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if scheduled and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Scheduling…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
 	it( 'should show publish if not published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: false,
 			isSaving: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 
 	it( 'should show submit for review for contributor', () => {
-		const label = PublishButtonLabel( { hasPublishAction: false } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: false,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Submit for Review' );
 	} );
 
-	it( 'should show update for already published', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show save for already published', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
-		} );
-		expect( label ).toBe( 'Update' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Save' );
 	} );
 
 	it( 'should show schedule for scheduled', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Schedule' );
 	} );
 
 	it( 'should show publish otherwise', () => {
-		const label = PublishButtonLabel( { hasPublishAction: true } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: true,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 } );

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%);
+	}
+}