@wordpress/edit-post 7.2.0 → 7.3.0

package/src/components/preferences-modal/options/test/enable-custom-fields.js

@@ -12,8 +12,6 @@ import {
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
-jest.useFakeTimers();
-
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
 		const { container } = render(
@@ -32,9 +30,7 @@ describe( 'EnableCustomFieldsOption', () => {
 	} );
 
 	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled />
@@ -46,9 +42,7 @@ describe( 'EnableCustomFieldsOption', () => {
 	} );
 
 	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
@@ -62,9 +56,7 @@ describe( 'EnableCustomFieldsOption', () => {
 
 describe( 'CustomFieldsConfirmation', () => {
 	it( 'submits the toggle-custom-fields-form', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const submit = jest.fn();
 		const getElementById = jest
 			.spyOn( document, 'getElementById' )

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -84,7 +84,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </h1>
       </div>
       <button
-        aria-label="Close dialog"
+        aria-label="Close"
         class="components-button has-icon"
         type="button"
       >
@@ -703,7 +703,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </h1>
       </div>
       <button
-        aria-label="Close dialog"
+        aria-label="Close"
         class="components-button has-icon"
         type="button"
       >

package/src/components/sidebar/post-schedule/index.js

@@ -16,7 +16,7 @@ export default function PostSchedule() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
+		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
 		[ popoverAnchor ]
 	);
 
@@ -29,7 +29,6 @@ export default function PostSchedule() {
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
 					popoverProps={ popoverProps }
-					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					focusOnMount
 					renderToggle={ ( { isOpen, onToggle } ) => (

package/src/components/sidebar/post-template/create-modal.js

@@ -7,10 +7,10 @@ import { useState } from '@wordpress/element';
 import { serialize, createBlock } from '@wordpress/blocks';
 import {
 	Modal,
-	Flex,
-	FlexItem,
 	TextControl,
 	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { cleanForSlug } from '@wordpress/url';
@@ -100,7 +100,6 @@ export default function PostTemplateCreateModal( { onClose } ) {
 	return (
 		<Modal
 			title={ __( 'Create custom template' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ cancel }
 			className="edit-post-post-template__create-modal"
 		>
@@ -108,28 +107,23 @@ export default function PostTemplateCreateModal( { onClose } ) {
 				className="edit-post-post-template__create-form"
 				onSubmit={ submit }
 			>
-				<Flex align="flex-start" gap={ 8 }>
-					<FlexItem>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-							placeholder={ DEFAULT_TITLE }
-							disabled={ isBusy }
-							help={ __(
-								'Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.'
-							) }
-						/>
-					</FlexItem>
-				</Flex>
-
-				<Flex justify="flex-end" expanded={ false }>
-					<FlexItem>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ DEFAULT_TITLE }
+						disabled={ isBusy }
+						help={ __(
+							'Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.'
+						) }
+					/>
+					<HStack justify="right">
 						<Button variant="tertiary" onClick={ cancel }>
 							{ __( 'Cancel' ) }
 						</Button>
-					</FlexItem>
-					<FlexItem>
+
 						<Button
 							variant="primary"
 							type="submit"
@@ -138,8 +132,8 @@ export default function PostTemplateCreateModal( { onClose } ) {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

package/src/components/sidebar/post-template/index.js

@@ -20,7 +20,7 @@ export default function PostTemplate() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
+		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
 		[ popoverAnchor ]
 	);
 
@@ -57,7 +57,6 @@ export default function PostTemplate() {
 			<span>{ __( 'Template' ) }</span>
 			<Dropdown
 				popoverProps={ popoverProps }
-				position="bottom left"
 				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
 				focusOnMount

package/src/components/sidebar/post-url/index.js

@@ -16,7 +16,7 @@ export default function PostURL() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
+		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
 		[ popoverAnchor ]
 	);
 
@@ -26,7 +26,6 @@ export default function PostURL() {
 				<span>{ __( 'URL' ) }</span>
 				<Dropdown
 					popoverProps={ popoverProps }
-					position="bottom left"
 					className="edit-post-post-url__dropdown"
 					contentClassName="edit-post-post-url__dialog"
 					focusOnMount

package/src/components/sidebar/post-visibility/index.js

@@ -21,6 +21,7 @@ export function PostVisibility() {
 			// Anchor the popover to the middle of the entire row so that it doesn't
 			// move around when the label changes.
 			anchor: popoverAnchor,
+			placement: 'bottom-end',
 		} ),
 		[ popoverAnchor ]
 	);
@@ -40,7 +41,6 @@ export function PostVisibility() {
 					) }
 					{ canEdit && (
 						<Dropdown
-							position="bottom left"
 							contentClassName="edit-post-post-visibility__dialog"
 							popoverProps={ popoverProps }
 							focusOnMount

package/src/components/sidebar/settings-header/style.scss

@@ -15,6 +15,7 @@
 	&:focus:not(:disabled) {
 		position: relative;
 		box-shadow: none;
+		outline: none;
 	}
 
 	// Tab indicator
@@ -39,6 +40,10 @@
 	// Active.
 	&.is-active::after {
 		height: calc(1 * var(--wp-admin-border-width-focus));
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
 	}
 
 	// Focus.
@@ -62,5 +67,8 @@
 
 	&:focus-visible::before {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 }

package/src/components/start-page-options/index.js

@@ -23,15 +23,11 @@ function useStartPatterns() {
 	// the current post type is part of the postTypes declared.
 	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
 		( select ) => {
-			const { __experimentalGetPatternsByBlockTypes } =
-				select( blockEditorStore );
+			const { getPatternsByBlockTypes } = select( blockEditorStore );
 			const { getCurrentPostType } = select( editorStore );
 			return {
-				// get pa
 				blockPatternsWithPostContentBlockType:
-					__experimentalGetPatternsByBlockTypes(
-						'core/post-content'
-					),
+					getPatternsByBlockTypes( 'core/post-content' ),
 				postType: getCurrentPostType(),
 			};
 		},
@@ -117,7 +113,6 @@ export default function StartPageOptions() {
 		<Modal
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
 			onRequestClose={ () => {
 				setModalState( START_PAGE_MODAL_STATES.CLOSED );
 			} }

package/src/components/visual-editor/index.js

@@ -82,7 +82,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
  *
  * @param {Array} blocks A list of blocks.
  *
- * @return {Object} The Post Content block.
+ * @return {Object | undefined} The Post Content block.
  */
 function findPostContent( blocks ) {
 	for ( let i = 0; i < blocks.length; i++ ) {

package/src/editor.js

@@ -1,20 +1,15 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	EditorProvider,
 	ErrorBoundary,
 	PostLockedModal,
 	store as editorStore,
+	experiments as editorExperiments,
 } from '@wordpress/editor';
-import { StrictMode, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
@@ -26,15 +21,11 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
+import { unlock } from './experiments';
+
+const { ExperimentalEditorProvider } = unlock( editorExperiments );
 
-function Editor( {
-	postId,
-	postType,
-	settings,
-	initialEdits,
-	onError,
-	...props
-} ) {
+function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	const {
 		hasFixedToolbar,
 		focusMode,
@@ -136,7 +127,7 @@ function Editor( {
 			// all block types).
 			const defaultAllowedBlockTypes =
 				true === settings.allowedBlockTypes
-					? map( blockTypes, 'name' )
+					? blockTypes.map( ( { name } ) => name )
 					: settings.allowedBlockTypes || [];
 
 			result.allowedBlockTypes = defaultAllowedBlockTypes.filter(
@@ -182,28 +173,24 @@ function Editor( {
 	}
 
 	return (
-		<StrictMode>
-			<ShortcutProvider>
-				<SlotFillProvider>
-					<EditorProvider
-						settings={ editorSettings }
-						post={ post }
-						initialEdits={ initialEdits }
-						useSubRegistry={ false }
-						__unstableTemplate={
-							isTemplateMode ? template : undefined
-						}
-						{ ...props }
-					>
-						<ErrorBoundary onError={ onError }>
-							<EditorInitialization postId={ postId } />
-							<Layout styles={ styles } />
-						</ErrorBoundary>
-						<PostLockedModal />
-					</EditorProvider>
-				</SlotFillProvider>
-			</ShortcutProvider>
-		</StrictMode>
+		<ShortcutProvider>
+			<SlotFillProvider>
+				<ExperimentalEditorProvider
+					settings={ editorSettings }
+					post={ post }
+					initialEdits={ initialEdits }
+					useSubRegistry={ false }
+					__unstableTemplate={ isTemplateMode ? template : undefined }
+					{ ...props }
+				>
+					<ErrorBoundary>
+						<EditorInitialization postId={ postId } />
+						<Layout styles={ styles } />
+					</ErrorBoundary>
+					<PostLockedModal />
+				</ExperimentalEditorProvider>
+			</SlotFillProvider>
+		</ShortcutProvider>
 	);
 }
 

package/src/editor.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import memize from 'memize';
-import { map } from 'lodash';
 import { I18nManager } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -74,7 +73,7 @@ class Editor extends Component {
 			// all block types).
 			const defaultAllowedBlockTypes =
 				true === settings.allowedBlockTypes
-					? map( blockTypes, 'name' )
+					? blockTypes.map( ( { name } ) => name )
 					: settings.allowedBlockTypes || [];
 
 			settings.allowedBlockTypes = defaultAllowedBlockTypes.filter(

package/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/edit-post'
+	);

package/src/index.js

@@ -6,7 +6,8 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { createRoot } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -20,49 +21,6 @@ import './plugins';
 import Editor from './editor';
 import { store as editPostStore } from './store';
 
-/**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
- *
- * @param {Object}  postType     Post type of the post to edit.
- * @param {Object}  postId       ID of the post to edit.
- * @param {Element} target       DOM node in which editor is rendered.
- * @param {?Object} settings     Editor settings object.
- * @param {Object}  initialEdits Programmatic edits to apply initially, to be
- *                               considered as non-user-initiated (bypass for
- *                               unsaved changes prompt).
- */
-export function reinitializeEditor(
-	postType,
-	postId,
-	target,
-	settings,
-	initialEdits
-) {
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
-
-	render(
-		<Editor
-			settings={ settings }
-			onError={ reboot }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-			recovery
-		/>,
-		target
-	);
-}
-
 /**
  * Initializes and returns an instance of Editor.
  *
@@ -82,14 +40,7 @@ export function initializeEditor(
 	initialEdits
 ) {
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
+	const root = createRoot( target );
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		editorMode: 'visual',
@@ -187,16 +138,26 @@ export function initializeEditor(
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
+	root.render(
 		<Editor
 			settings={ settings }
-			onError={ reboot }
 			postId={ postId }
 			postType={ postType }
 			initialEdits={ initialEdits }
-		/>,
-		target
+		/>
 	);
+
+	return root;
+}
+
+/**
+ * Used to reinitialize the editor after an error. Now it's a deprecated noop function.
+ */
+export function reinitializeEditor() {
+	deprecated( 'wp.editPost.reinitializeEditor', {
+		since: '6.2',
+		version: '6.3',
+	} );
 }
 
 export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';