Edit Post: Use hooks instead of HoCs in 'PostStatus' components (#54951)

* Edit Post: Use hooks instead of HoCs in 'PostStatus' components
* Remove unused styles

packages/edit-post/src/components/sidebar/post-status/index.js

@@ -6,8 +6,7 @@ import {
 	__experimentalHStack as HStack,
 	PanelBody,
 } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
 
 /**
@@ -31,13 +30,29 @@ import PostURL from '../post-url';
  */
 const PANEL_NAME = 'post-status';
 
-function PostStatus( { isOpened, onTogglePanel } ) {
+export default function PostStatus() {
+	const { isOpened, isRemoved } = useSelect( ( select ) => {
+		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+		const { isEditorPanelRemoved, isEditorPanelOpened } =
+			select( editPostStore );
+		return {
+			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+	if ( isRemoved ) {
+		return null;
+	}
+
 	return (
 		<PanelBody
 			className="edit-post-post-status"
 			title={ __( 'Summary' ) }
 			opened={ isOpened }
-			onToggle={ onTogglePanel }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
 		>
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
@@ -69,24 +84,3 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 		</PanelBody>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editPostStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostStatus );

packages/edit-post/src/style.scss

@@ -14,7 +14,6 @@
 @import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-status/style.scss";
 @import "./components/sidebar/post-template/style.scss";
 @import "./components/sidebar/post-url/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";