Remove usages of withState from edit-post and editor (#32349)

* Remove usages of withState from edit-post and editor * Convert a few README.md examples, too
WordPress · Jun 1, 2021 · dfc6895 · dfc6895
1 parent a97207f
commit dfc6895
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 87 deletions.
diff --git a/packages/block-editor/src/components/font-sizes/README.MD b/packages/block-editor/src/components/font-sizes/README.MD
@@ -9,13 +9,12 @@ There is an equivalent component exposed under @wordpress/components. The differ
 
 ```jsx
 import { FontSizePicker } from '@wordpress/block-editor';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 ...
-const MyFontSizePicker = withState( {
-	fontSize: 16,
-} )( ( { fontSize, setState } ) => {
+const MyFontSizePicker = () => {
+	const [ fontSize, setFontSize ] = useState( 16 );
 	const fontSizes = [
 		{
 			name: __( 'Small' ),
@@ -35,7 +34,7 @@ const MyFontSizePicker = withState( {
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
-				setState( { fontSize: newFontSize } );
+				setFontSize( newFontSize );
 			} }
 		/>
 	);

diff --git a/packages/block-editor/src/components/image-size-control/README.md b/packages/block-editor/src/components/image-size-control/README.md
@@ -8,21 +8,19 @@ Render a ImageSizeControl.
 
 ```jsx
 import { __experimentalImageSizeControl as ImageSizeControl } from '@wordpress/block-editor';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyImageSizeControl = withState( {
-	width: null,
-	height: null,
-} )( ( { width, height, setState } ) => {
+const MyImageSizeControl = () => {
+	const [ size, setSize ] = useState( { width: null, height: null } );
 	// In this example, we have one image with a fixed size of 600x600.
 	const imageWidth = 600;
 	const imageHeight = 600;
 
 	return (
 		<ImageSizeControl
-			onChange={ ( value ) => setState( value ) }
-			width={ width }
-			height={ height }
+			onChange={ ( value ) => setSize( value ) }
+			width={ size.width }
+			height={ size.height }
 			imageWidth={ imageWidth }
 			imageHeight={ imageHeight }
 		/>

diff --git a/packages/components/src/clipboard-button/README.md b/packages/components/src/clipboard-button/README.md
@@ -8,18 +8,19 @@ With a clipboard button, users copy text (or other elements) with a single click
 
 ```jsx
 import { ClipboardButton } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/compose';
 
-const MyClipboardButton = withState( {
-	hasCopied: false,
-} )( ( { hasCopied, setState } ) => (
-	<ClipboardButton
-		variant="primary"
-		text="Text to be copied."
-		onCopy={ () => setState( { hasCopied: true } ) }
-		onFinishCopy={ () => setState( { hasCopied: false } ) }
-	>
-		{ hasCopied ? 'Copied!' : 'Copy Text' }
-	</ClipboardButton>
-) );
+const MyClipboardButton = () => {
+	const [ hasCopied, setHasCopied ] = useState( false );
+	return (
+		<ClipboardButton
+			variant="primary"
+			text="Text to be copied."
+			onCopy={ () => setHasCopied( true ) }
+			onFinishCopy={ () => setHasCopied( false ) }
+		>
+			{ hasCopied ? 'Copied!' : 'Copy Text' }
+		</ClipboardButton>
+	);
+};
 ```
diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md
@@ -55,11 +55,10 @@ Whether the palette should have a clearing button or not.
 
 ```jsx
 import { ColorPalette } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyColorPalette = withState( {
-	color: '#f00',
-} )( ( { color, setState } ) => {
+const MyColorPalette = () => {
+	const [ color, setColor ] = useState ( '#f00' )
 	const colors = [
 		{ name: 'red', color: '#f00' },
 		{ name: 'white', color: '#fff' },
@@ -70,7 +69,7 @@ const MyColorPalette = withState( {
 		<ColorPalette
 			colors={ colors }
 			value={ color }
-			onChange={ ( color ) => setState( { color } ) }
+			onChange={ ( color ) => setColor( color ) }
 		/>
 	);
 } );

diff --git a/packages/edit-post/src/components/manage-blocks-modal/manager.js b/packages/edit-post/src/components/manage-blocks-modal/manager.js
@@ -8,9 +8,9 @@ import { filter, includes, isArray } from 'lodash';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { withSelect } from '@wordpress/data';
-import { compose, withState } from '@wordpress/compose';
 import { TextControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,14 +19,14 @@ import BlockManagerCategory from './category';
 import { store as editPostStore } from '../../store';
 
 function BlockManager( {
-	search,
-	setState,
 	blockTypes,
 	categories,
 	hasBlockSupport,
 	isMatchingSearchTerm,
 	numberOfHiddenBlocks,
 } ) {
+	const [ search, setSearch ] = useState( '' );
+
 	// Filtering occurs here (as opposed to `withSelect`) to avoid
 	// wasted renders by consequence of `Array#filter` producing
 	// a new value reference on each call.
@@ -44,11 +44,7 @@ function BlockManager( {
 				type="search"
 				label={ __( 'Search for a block' ) }
 				value={ search }
-				onChange={ ( nextSearch ) =>
-					setState( {
-						search: nextSearch,
-					} )
-				}
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
 				className="edit-post-manage-blocks-modal__search"
 			/>
 			{ !! numberOfHiddenBlocks && (
@@ -96,26 +92,23 @@ function BlockManager( {
 	);
 }
 
-export default compose( [
-	withState( { search: '' } ),
-	withSelect( ( select ) => {
-		const {
-			getBlockTypes,
-			getCategories,
-			hasBlockSupport,
-			isMatchingSearchTerm,
-		} = select( blocksStore );
-		const { getPreference } = select( editPostStore );
-		const hiddenBlockTypes = getPreference( 'hiddenBlockTypes' );
-		const numberOfHiddenBlocks =
-			isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
+export default withSelect( ( select ) => {
+	const {
+		getBlockTypes,
+		getCategories,
+		hasBlockSupport,
+		isMatchingSearchTerm,
+	} = select( blocksStore );
+	const { getPreference } = select( editPostStore );
+	const hiddenBlockTypes = getPreference( 'hiddenBlockTypes' );
+	const numberOfHiddenBlocks =
+		isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
 
-		return {
-			blockTypes: getBlockTypes(),
-			categories: getCategories(),
-			hasBlockSupport,
-			isMatchingSearchTerm,
-			numberOfHiddenBlocks,
-		};
-	} ),
-] )( BlockManager );
+	return {
+		blockTypes: getBlockTypes(),
+		categories: getCategories(),
+		hasBlockSupport,
+		isMatchingSearchTerm,
+		numberOfHiddenBlocks,
+	};
+} )( BlockManager );
diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js
@@ -9,10 +9,11 @@ import { get } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition, withState } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 import { cleanForSlug, store as editorStore } from '@wordpress/editor';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -32,11 +33,11 @@ function PostLink( {
 	permalinkPrefix,
 	permalinkSuffix,
 	editPermalink,
-	forceEmptyField,
-	setState,
 	postSlug,
 	postTypeLabel,
 } ) {
+	const [ forceEmptyField, setForceEmptyField ] = useState( false );
+
 	let prefixElement, postNameElement, suffixElement;
 	if ( isEditable ) {
 		prefixElement = permalinkPrefix && (
@@ -75,24 +76,18 @@ function PostLink( {
 							// the field temporarily empty while typing.
 							if ( ! newValue ) {
 								if ( ! forceEmptyField ) {
-									setState( {
-										forceEmptyField: true,
-									} );
+									setForceEmptyField( true );
 								}
 								return;
 							}
 							if ( forceEmptyField ) {
-								setState( {
-									forceEmptyField: false,
-								} );
+								setForceEmptyField( false );
 							}
 						} }
 						onBlur={ ( event ) => {
 							editPermalink( cleanForSlug( event.target.value ) );
 							if ( forceEmptyField ) {
-								setState( {
-									forceEmptyField: false,
-								} );
+								setForceEmptyField( false );
 							}
 						} }
 					/>
@@ -176,7 +171,4 @@ export default compose( [
 			},
 		};
 	} ),
-	withState( {
-		forceEmptyField: false,
-	} ),
 ] )( PostLink );
diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js
@@ -9,21 +9,20 @@ import { invoke } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, withState } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-export const PageAttributesOrder = withState( {
-	orderInput: null,
-} )( ( { onUpdateOrder, order = 0, orderInput, setState } ) => {
+export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
+	const [ orderInput, setOrderInput ] = useState( null );
+
 	const setUpdatedOrder = ( value ) => {
-		setState( {
-			orderInput: value,
-		} );
+		setOrderInput( value );
 		const newOrder = Number( value );
 		if (
 			Number.isInteger( newOrder ) &&
@@ -42,13 +41,11 @@ export const PageAttributesOrder = withState( {
 			onChange={ setUpdatedOrder }
 			size={ 6 }
 			onBlur={ () => {
-				setState( {
-					orderInput: null,
-				} );
+				setOrderInput( null );
 			} }
 		/>
 	);
-} );
+};
 
 function PageAttributesOrderWithChecks( props ) {
 	return (