diff --git a/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js b/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js
index bf742bef1429bb..c3a355d243f345 100644
--- a/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js
+++ b/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { useViewportMatch, compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
@@ -10,24 +10,46 @@ import { withDispatch, withSelect } from '@wordpress/data';
import PostPublishButton from './index';
import { store as editorStore } from '../../store';
-export function PostPublishButtonOrToggle( {
+const IS_TOGGLE = 'toggle';
+const IS_BUTTON = 'button';
+
+export default 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;
+ const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+ const { togglePublishSidebar } = useDispatch( editorStore );
+ const {
+ hasPublishAction,
+ isBeingScheduled,
+ isPending,
+ isPublished,
+ isPublishSidebarEnabled,
+ isPublishSidebarOpened,
+ isScheduled,
+ postStatus,
+ postStatusHasChanged,
+ } = useSelect( ( select ) => {
+ return {
+ 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,
+ };
+ }, [] );
/**
* Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
@@ -76,27 +98,3 @@ export function PostPublishButtonOrToggle( {
/>
);
}
-
-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 );
diff --git a/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js b/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js
index 0794c3c8995a1f..a8fa8b72db9c7b 100644
--- a/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js
+++ b/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js
@@ -7,13 +7,15 @@ import { render, screen } from '@testing-library/react';
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
-import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
+import PostPublishButtonOrToggle from '../post-publish-button-or-toggle';
jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
describe( 'PostPublishButtonOrToggle should render a', () => {
afterEach( () => {
@@ -21,23 +23,32 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
} );
it( 'button when the post is published (1)', () => {
- render( );
+ useSelect.mockImplementation( () => ( {
+ isPublished: true,
+ } ) );
+ render( );
expect(
screen.getByRole( 'button', { name: 'Submit for Review' } )
).toBeVisible();
} );
it( 'button when the post is scheduled (2)', () => {
- render( );
+ useSelect.mockImplementation( () => ( {
+ isScheduled: true,
+ isBeingScheduled: true,
+ } ) );
+ render( );
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(
-
- );
+ useSelect.mockImplementation( () => ( {
+ isPending: true,
+ hasPublishAction: false,
+ } ) );
+ render( );
expect(
screen.getByRole( 'button', { name: 'Submit for Review' } )
@@ -46,6 +57,9 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
useViewportMatch.mockReturnValue( true );
+ useSelect.mockImplementation( () => ( {
+ isPublishSidebarEnabled: true,
+ } ) );
render( );
expect(
screen.getByRole( 'button', { name: 'Publish' } )
@@ -53,9 +67,10 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
} );
it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
- render(
-
- );
+ useSelect.mockImplementation( () => ( {
+ isPublishSidebarEnabled: false,
+ } ) );
+ render( );
expect(
screen.getByRole( 'button', { name: 'Submit for Review' } )
).toBeVisible();