Editor: refactor PostFormat to use React hooks.

packages/editor/src/components/post-format/index.js

@@ -8,8 +8,8 @@ import { find, get, includes, union } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Button, SelectControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,14 +29,31 @@ export const POST_FORMATS = [
  { id: 'chat', caption: __( 'Chat' ) },
 ];
 
-function PostFormat( {
- onUpdatePostFormat,
- postFormat = 'standard',
- supportedFormats,
- suggestedFormat,
- instanceId,
-} ) {
- const postFormatSelectorId = 'post-format-selector-' + instanceId;
+export default function PostFormat() {
+ const instanceId = useInstanceId( PostFormat );
+ const postFormatSelectorId = `post-format-selector-${ instanceId }`;
+
+ const { postFormat, suggestedFormat, supportedFormats } = useSelect(
+ ( select ) => {
+ const { getEditedPostAttribute, getSuggestedPostFormat } = select(
+ 'core/editor'
+ );
+ const _postFormat = getEditedPostAttribute( 'format' );
+ const themeSupports = select( 'core' ).getThemeSupports();
+ return {
+ postFormat: _postFormat ?? 'standard',
+ suggestedFormat: getSuggestedPostFormat(),
+ // Ensure current format is always in the set.
+ // The current format may not be a format supported by the theme.
+ supportedFormats: union(
+ [ _postFormat ],
+ get( themeSupports, [ 'formats' ], [] )
+ ),
+ };
+ },
+ []
+ );
+
  const formats = POST_FORMATS.filter( ( format ) =>
  includes( supportedFormats, format.id )
  );
@@ -45,7 +62,9 @@ function PostFormat( {
  ( format ) => format.id === suggestedFormat
  );
 
- // Disable reason: We need to change the value immiediately to show/hide the suggestion if needed
+ const { editPost } = useDispatch( 'core/editor' );
+
+ const onUpdatePostFormat = ( format ) => editPost( { format } );
 
  return (
  <PostFormatCheck>
@@ -82,30 +101,3 @@ function PostFormat( {
  </PostFormatCheck>
  );
 }
-
-export default compose( [
- withSelect( ( select ) => {
- const { getEditedPostAttribute, getSuggestedPostFormat } = select(
- 'core/editor'
- );
- const postFormat = getEditedPostAttribute( 'format' );
- const themeSupports = select( 'core' ).getThemeSupports();
- // Ensure current format is always in the set.
- // The current format may not be a format supported by the theme.
- const supportedFormats = union(
- [ postFormat ],
- get( themeSupports, [ 'formats' ], [] )
- );
- return {
- postFormat,
- supportedFormats,
- suggestedFormat: getSuggestedPostFormat(),
- };
- } ),
- withDispatch( ( dispatch ) => ( {
- onUpdatePostFormat( postFormat ) {
- dispatch( 'core/editor' ).editPost( { format: postFormat } );
- },
- } ) ),
- withInstanceId,
-] )( PostFormat );