Preferences: Use hooks instead of HoC in 'EnableCustomFieldsOption'

packages/edit-post/src/components/preferences-modal/enable-custom-fields.js

@@ -4,7 +4,7 @@
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { getPathAndQueryString } from '@wordpress/url';
@@ -57,7 +57,10 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 	);
 }
 
-export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
+export default function EnableCustomFieldsOption( { label } ) {
+	const areCustomFieldsEnabled = useSelect( ( select ) => {
+		return !! select( editorStore ).getEditorSettings().enableCustomFields;
+	}, [] );
 	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
 
 	return (
@@ -72,8 +75,3 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 		</PreferenceBaseOption>
 	);
 }
-
-export default withSelect( ( select ) => ( {
-	areCustomFieldsEnabled:
-		!! select( editorStore ).getEditorSettings().enableCustomFields,
-} ) )( EnableCustomFieldsOption );

packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js

@@ -4,37 +4,47 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import {
-	EnableCustomFieldsOption,
+	default as EnableCustomFieldsOption,
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( areCustomFieldsEnabled ) {
+	useSelect.mockImplementation( () => {
+		return areCustomFieldsEnabled;
+	} );
+}
+
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		await user.click( screen.getByRole( 'checkbox' ) );
 
@@ -44,9 +54,8 @@ describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		await user.click( screen.getByRole( 'checkbox' ) );