@wordpress/edit-post 8.48.1 → 8.49.0

package/src/components/init-pattern-modal/index.js

@@ -6,88 +6,75 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	Modal,
 	Button,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	ToggleControl,
 	TextControl,
 } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 export default function InitPatternModal() {
 	const { editPost } = useDispatch( editorStore );
+	const { isCleanNewPost } = useSelect( editorStore );
 	const [ syncType, setSyncType ] = useState( undefined );
 	const [ title, setTitle ] = useState( '' );
+	const [ isModalOpen, setIsModalOpen ] = useState( () => isCleanNewPost() );
 
-	const isNewPost = useSelect(
-		( select ) => select( editorStore ).isCleanNewPost(),
-		[]
-	);
-
-	const [ isModalOpen, setIsModalOpen ] = useState( () => isNewPost );
-
-	if ( ! isNewPost ) {
+	if ( ! isModalOpen ) {
 		return null;
 	}
 
 	return (
-		<>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Create pattern' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="reusable-blocks-menu-items__convert-modal"
-				>
-					<form
-						onSubmit={ ( event ) => {
-							event.preventDefault();
-							setIsModalOpen( false );
-							editPost( {
-								title,
-								meta: {
-									wp_pattern_sync_status: syncType,
-								},
-							} );
+		<Modal
+			title={ __( 'Create pattern' ) }
+			onRequestClose={ () => {
+				setIsModalOpen( false );
+			} }
+			overlayClassName="patterns-create-modal"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					setIsModalOpen( false );
+					editPost( {
+						title,
+						meta: {
+							wp_pattern_sync_status: syncType,
+						},
+					} );
+				} }
+			>
+				<Stack direction="column" gap="lg">
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ __( 'My pattern' ) }
+						className="patterns-create-modal__name-input"
+					/>
+					<ToggleControl
+						label={ _x( 'Synced', 'pattern (singular)' ) }
+						help={ __(
+							'Sync this pattern across multiple locations.'
+						) }
+						checked={ ! syncType }
+						onChange={ () => {
+							setSyncType( ! syncType ? 'unsynced' : undefined );
 						} }
-					>
-						<VStack spacing="5">
-							<TextControl
-								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
-								placeholder={ __( 'My pattern' ) }
-								className="patterns-create-modal__name-input"
-								__next40pxDefaultSize
-							/>
-							<ToggleControl
-								label={ _x( 'Synced', 'pattern (singular)' ) }
-								help={ __(
-									'Sync this pattern across multiple locations.'
-								) }
-								checked={ ! syncType }
-								onChange={ () => {
-									setSyncType(
-										! syncType ? 'unsynced' : undefined
-									);
-								} }
-							/>
-							<HStack justify="right">
-								<Button
-									__next40pxDefaultSize
-									variant="primary"
-									type="submit"
-									disabled={ ! title }
-									accessibleWhenDisabled
-								>
-									{ __( 'Create' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
+					/>
+					<Stack justify="end">
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+							disabled={ ! title }
+							accessibleWhenDisabled
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</Stack>
+				</Stack>
+			</form>
+		</Modal>
 	);
 }

package/src/components/layout/index.js

@@ -49,7 +49,6 @@ import {
 	useRefEffect,
 	useViewportMatch,
 } from '@wordpress/compose';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 /**

package/src/components/preferences-modal/index.js

@@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import MetaBoxesSection from './meta-boxes-section';
+import { MetaBoxesSection } from './meta-boxes-section';
 
 const { PreferenceToggleControl } = unlock( preferencesPrivateApis );
 const { PreferencesModal } = unlock( editorPrivateApis );

package/src/components/preferences-modal/meta-boxes-section.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
@@ -16,11 +16,18 @@ import { unlock } from '../../lock-unlock';
 
 const { PreferencesModalSection } = unlock( preferencesPrivateApis );
 
-export function MetaBoxesSection( {
-	areCustomFieldsRegistered,
-	metaBoxes,
-	...sectionProps
-} ) {
+export function MetaBoxesSection( sectionProps ) {
+	const { areCustomFieldsRegistered, metaBoxes } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getAllMetaBoxes } = select( editPostStore );
+
+		return {
+			areCustomFieldsRegistered:
+				getEditorSettings().enableCustomFields !== undefined,
+			metaBoxes: getAllMetaBoxes(),
+		};
+	}, [] );
+
 	// The 'Custom Fields' meta box is a special case that we handle separately.
 	const thirdPartyMetaBoxes = metaBoxes.filter(
 		( { id } ) => id !== 'postcustom'
@@ -45,15 +52,3 @@ export function MetaBoxesSection( {
 		</PreferencesModalSection>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getEditorSettings } = select( editorStore );
-	const { getAllMetaBoxes } = select( editPostStore );
-
-	return {
-		// This setting should not live in the block editor's store.
-		areCustomFieldsRegistered:
-			getEditorSettings().enableCustomFields !== undefined,
-		metaBoxes: getAllMetaBoxes(),
-	};
-} )( MetaBoxesSection );

package/src/components/preferences-modal/test/meta-boxes-section.js

@@ -3,68 +3,96 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, select as realSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
 /**
  * Internal dependencies
  */
 import { MetaBoxesSection } from '../meta-boxes-section';
+import { store as editPostStore } from '../../../store';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+// Override only the selectors the section reads, while delegating the rest
+// (used by the rendered child options) to the real registry.
+function setupUseSelect( { areCustomFieldsRegistered, metaBoxes } ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( ( store ) => {
+			if ( store === editorStore ) {
+				return {
+					...realSelect( store ),
+					getEditorSettings: () => ( {
+						enableCustomFields: areCustomFieldsRegistered
+							? false
+							: undefined,
+					} ),
+				};
+			}
+			if ( store === editPostStore ) {
+				return {
+					...realSelect( store ),
+					getAllMetaBoxes: () => metaBoxes,
+				};
+			}
+			return realSelect( store );
+		} )
+	);
+}
 
 describe( 'MetaBoxesSection', () => {
 	it( 'does not render if there are no options', () => {
-		render(
-			<MetaBoxesSection
-				areCustomFieldsRegistered={ false }
-				metaBoxes={ [
-					{ id: 'postcustom', title: 'This should not render' },
-				] }
-			/>
-		);
+		setupUseSelect( {
+			areCustomFieldsRegistered: false,
+			metaBoxes: [
+				{ id: 'postcustom', title: 'This should not render' },
+			],
+		} );
+		render( <MetaBoxesSection /> );
 		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a Custom Fields option', () => {
-		render(
-			<MetaBoxesSection
-				title="Advanced panels"
-				areCustomFieldsRegistered
-				metaBoxes={ [
-					{ id: 'postcustom', title: 'This should not render' },
-				] }
-			/>
-		);
+		setupUseSelect( {
+			areCustomFieldsRegistered: true,
+			metaBoxes: [
+				{ id: 'postcustom', title: 'This should not render' },
+			],
+		} );
+		render( <MetaBoxesSection title="Advanced panels" /> );
 		expect(
 			screen.getByRole( 'group', { name: 'Advanced panels' } )
 		).toMatchSnapshot();
 	} );
 
 	it( 'renders meta box options', () => {
-		render(
-			<MetaBoxesSection
-				title="Advanced panels"
-				areCustomFieldsRegistered={ false }
-				metaBoxes={ [
-					{ id: 'postcustom', title: 'This should not render' },
-					{ id: 'test1', title: 'Meta Box 1' },
-					{ id: 'test2', title: 'Meta Box 2' },
-				] }
-			/>
-		);
+		setupUseSelect( {
+			areCustomFieldsRegistered: false,
+			metaBoxes: [
+				{ id: 'postcustom', title: 'This should not render' },
+				{ id: 'test1', title: 'Meta Box 1' },
+				{ id: 'test2', title: 'Meta Box 2' },
+			],
+		} );
+		render( <MetaBoxesSection title="Advanced panels" /> );
 		expect(
 			screen.getByRole( 'group', { name: 'Advanced panels' } )
 		).toMatchSnapshot();
 	} );
 
 	it( 'renders a Custom Fields option and meta box options', () => {
-		render(
-			<MetaBoxesSection
-				title="Advanced panels"
-				areCustomFieldsRegistered
-				metaBoxes={ [
-					{ id: 'postcustom', title: 'This should not render' },
-					{ id: 'test1', title: 'Meta Box 1' },
-					{ id: 'test2', title: 'Meta Box 2' },
-				] }
-			/>
-		);
+		setupUseSelect( {
+			areCustomFieldsRegistered: true,
+			metaBoxes: [
+				{ id: 'postcustom', title: 'This should not render' },
+				{ id: 'test1', title: 'Meta Box 1' },
+				{ id: 'test2', title: 'Meta Box 2' },
+			],
+		} );
+		render( <MetaBoxesSection title="Advanced panels" /> );
 		expect(
 			screen.getByRole( 'group', { name: 'Advanced panels' } )
 		).toMatchSnapshot();

package/src/style.scss

@@ -5,7 +5,7 @@
 @use "./components/layout/style.scss" as *;
 @use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
 @use "./components/welcome-guide/style.scss" as *;
-@use "./experimental-admin-bar-in-editor.scss" as *;
+@use "./experimental-omnibar.scss" as *;
 
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );