diff --git a/packages/editor/src/components/post-sticky/check.js b/packages/editor/src/components/post-sticky/check.js
index bd5e47da7749b..e31c145b9bbf0 100644
--- a/packages/editor/src/components/post-sticky/check.js
+++ b/packages/editor/src/components/post-sticky/check.js
@@ -1,28 +1,25 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+export default function PostStickyCheck( { children } ) {
+ const { hasStickyAction, postType } = useSelect( ( select ) => {
+ const post = select( editorStore ).getCurrentPost();
+ return {
+ hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+ postType: select( editorStore ).getCurrentPostType(),
+ };
+ }, [] );
+
if ( postType !== 'post' || ! hasStickyAction ) {
return null;
}
return children;
}
-
-export default compose( [
- withSelect( ( select ) => {
- const post = select( editorStore ).getCurrentPost();
- return {
- hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
- postType: select( editorStore ).getCurrentPostType(),
- };
- } ),
-] )( PostStickyCheck );
diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
index 253b927f0240c..fe8820243962b 100644
--- a/packages/editor/src/components/post-sticky/index.js
+++ b/packages/editor/src/components/post-sticky/index.js
@@ -3,8 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
@@ -12,31 +11,22 @@ import { compose } from '@wordpress/compose';
import PostStickyCheck from './check';
import { store as editorStore } from '../../store';
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+export default function PostSticky() {
+ const postSticky = useSelect( ( select ) => {
+ return (
+ select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+ );
+ }, [] );
+ const { editPost } = useDispatch( editorStore );
+
return (
onUpdateSticky( ! postSticky ) }
+ onChange={ () => editPost( { sticky: ! postSticky } ) }
/>
);
}
-
-export default compose( [
- withSelect( ( select ) => {
- return {
- postSticky:
- select( editorStore ).getEditedPostAttribute( 'sticky' ),
- };
- } ),
- withDispatch( ( dispatch ) => {
- return {
- onUpdateSticky( postSticky ) {
- dispatch( editorStore ).editPost( { sticky: postSticky } );
- },
- };
- } ),
-] )( PostSticky );
diff --git a/packages/editor/src/components/post-sticky/test/index.js b/packages/editor/src/components/post-sticky/test/index.js
index f637ec89e9582..ff567cfe2598e 100644
--- a/packages/editor/src/components/post-sticky/test/index.js
+++ b/packages/editor/src/components/post-sticky/test/index.js
@@ -3,40 +3,55 @@
*/
import { render, screen } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
/**
* Internal dependencies
*/
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+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;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+ useSelect.mockImplementation( ( cb ) => {
+ return cb( () => ( {
+ getCurrentPostType: () => postType,
+ getCurrentPost: () => ( {
+ _links: {
+ 'wp:action-sticky': hasStickyAction,
+ },
+ } ),
+ } ) );
+ } );
+}
describe( 'PostSticky', () => {
it( 'should not render anything if the post type is not "post"', () => {
- render(
-
- Can Toggle Sticky
-
- );
+ setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+ render( Can Toggle Sticky );
expect(
screen.queryByText( 'Can Toggle Sticky' )
).not.toBeInTheDocument();
} );
it( "should not render anything if post doesn't support stickying", () => {
- render(
-
- Can Toggle Sticky
-
- );
+ setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+ render( Can Toggle Sticky );
expect(
screen.queryByText( 'Can Toggle Sticky' )
).not.toBeInTheDocument();
} );
it( 'should render if the post supports stickying', () => {
- render(
-
- Can Toggle Sticky
-
- );
+ setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+ render( Can Toggle Sticky );
expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
} );
} );