@wordpress/edit-post 8.0.0 → 8.1.0

package/src/components/layout/index.js

@@ -12,6 +12,8 @@ import {
 	UnsavedChangesWarning,
 	EditorKeyboardShortcutsRegister,
 	EditorSnackbars,
+	ErrorBoundary,
+	PostLockedModal,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
@@ -20,21 +22,27 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import {
+	CommandMenu,
+	privateApis as commandsPrivateApis,
+} from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BackButton from '../back-button';
+import EditorInitialization from '../editor-initialization';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
@@ -46,12 +54,12 @@ import { unlock } from '../../lock-unlock';
 import useEditPostCommands from '../../commands/use-commands';
 import { usePaddingAppender } from './use-padding-appender';
 import { useShouldIframe } from './use-should-iframe';
+import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { EditorInterface, FullscreenMode, Sidebar } =
-	unlock( editorPrivateApis );
+const { Editor, FullscreenMode } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 const DESIGN_POST_TYPES = [
 	'wp_template',
@@ -92,7 +100,7 @@ function useEditorStyles() {
 			) ?? [];
 
 		const defaultEditorStyles = [
-			...editorSettings.defaultEditorStyles,
+			...( editorSettings?.defaultEditorStyles ?? [] ),
 			...presetStyles,
 		];
 
@@ -119,7 +127,7 @@ function useEditorStyles() {
 			? editorSettings.styles ?? []
 			: defaultEditorStyles;
 
-		// Add a constant padding for the typewritter effect. When typing at the
+		// Add a constant padding for the typewriter effect. When typing at the
 		// bottom, there needs to be room to scroll up.
 		if (
 			! isZoomedOutView &&
@@ -127,9 +135,12 @@ function useEditorStyles() {
 			renderingMode === 'post-only' &&
 			! DESIGN_POST_TYPES.includes( postType )
 		) {
-			baseStyles.push( {
-				css: 'body{padding-bottom: 40vh}',
-			} );
+			return [
+				...baseStyles,
+				{
+					css: 'body{padding-bottom: 40vh}',
+				},
+			];
 		}
 
 		return baseStyles;
@@ -138,59 +149,96 @@ function useEditorStyles() {
 		editorSettings.disableLayoutStyles,
 		editorSettings.styles,
 		hasThemeStyleSupport,
+		postType,
 	] );
 }
 
-function Layout( { initialPost } ) {
+function Layout( {
+	postId: initialPostId,
+	postType: initialPostType,
+	settings,
+	initialEdits,
+} ) {
 	useCommands();
 	useEditPostCommands();
-	const isWideViewport = useViewportMatch( 'large' );
 	const paddingAppenderRef = usePaddingAppender();
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const {
+		currentPost,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
+	} = useNavigateToEntityRecord(
+		initialPostId,
+		initialPostType,
+		'post-only'
+	);
 	const {
 		mode,
 		isFullscreenActive,
-		sidebarIsOpened,
 		hasActiveMetaboxes,
 		hasBlockSelected,
 		showIconLabels,
 		isDistractionFree,
-		showBlockBreadcrumbs,
 		showMetaBoxes,
 		hasHistory,
 		isEditingTemplate,
 		isWelcomeGuideVisible,
-	} = useSelect( ( select ) => {
-		const { get } = select( preferencesStore );
-		const { getEditorSettings } = select( editorStore );
-		const { isFeatureActive } = select( editPostStore );
+		templateId,
+	} = useSelect(
+		( select ) => {
+			const { get } = select( preferencesStore );
+			const { isFeatureActive, getEditedPostTemplateId } = unlock(
+				select( editPostStore )
+			);
+			const { canUser, getPostType } = select( coreStore );
 
-		return {
-			mode: select( editorStore ).getEditorMode(),
-			isFullscreenActive:
-				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasBlockSelected:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			showIconLabels: get( 'core', 'showIconLabels' ),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
-			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-		};
-	}, [] );
+			const supportsTemplateMode = settings.supportsTemplateMode;
+			const isViewable =
+				getPostType( currentPost.postType )?.viewable ?? false;
+			const canViewTemplate = canUser( 'read', 'templates' );
+
+			return {
+				mode: select( editorStore ).getEditorMode(),
+				isFullscreenActive:
+					select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
+				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+				hasBlockSelected:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
+				showIconLabels: get( 'core', 'showIconLabels' ),
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				showMetaBoxes:
+					select( editorStore ).getRenderingMode() === 'post-only',
+				isEditingTemplate:
+					select( editorStore ).getCurrentPostType() ===
+					'wp_template',
+				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
+				templateId:
+					supportsTemplateMode &&
+					isViewable &&
+					canViewTemplate &&
+					currentPost.postType !== 'wp_template'
+						? getEditedPostTemplateId()
+						: null,
+			};
+		},
+		[ settings.supportsTemplateMode, currentPost.postType ]
+	);
 
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
 		? 'block-selection-edit'
 		: 'entity-edit';
 	useCommandContext( commandContext );
-
+	const editorSettings = useMemo(
+		() => ( {
+			...settings,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+			defaultRenderingMode: 'post-only',
+		} ),
+		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
+	);
 	const styles = useEditorStyles();
 
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
@@ -201,11 +249,7 @@ function Layout( { initialPost } ) {
 	}
 
 	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isWideViewport,
-		'has-block-breadcrumbs':
-			showBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
 	function onPluginAreaError( name ) {
@@ -245,7 +289,7 @@ function Layout( { initialPost } ) {
 							sprintf(
 								// translators: %s: Title of the created post e.g: "Post 1".
 								__( '"%s" successfully created.' ),
-								title
+								decodeEntities( title )
 							),
 							{
 								type: 'snackbar',
@@ -272,48 +316,63 @@ function Layout( { initialPost } ) {
 		[ createSuccessNotice ]
 	);
 
+	const initialPost = useMemo( () => {
+		return {
+			type: initialPostType,
+			id: initialPostId,
+		};
+	}, [ initialPostType, initialPostId ] );
 	return (
-		<>
-			<FullscreenMode isActive={ isFullscreenActive } />
-			<BrowserURL hasHistory={ hasHistory } />
-			<UnsavedChangesWarning />
-			<AutosaveMonitor />
-			<LocalAutosaveMonitor />
-			<EditPostKeyboardShortcuts />
-			<EditorKeyboardShortcutsRegister />
-			<BlockKeyboardShortcuts />
-			<WelcomeGuide />
-			<InitPatternModal />
-			<PluginArea onError={ onPluginAreaError } />
-			{ ! isDistractionFree && (
-				<Sidebar
+		<SlotFillProvider>
+			<ErrorBoundary>
+				<CommandMenu />
+				<WelcomeGuide postType={ currentPost.postType } />
+				<Editor
+					settings={ editorSettings }
+					initialEdits={ initialEdits }
+					postType={ currentPost.postType }
+					postId={ currentPost.postId }
+					templateId={ templateId }
+					className={ className }
+					styles={ styles }
+					forceIsDirty={ hasActiveMetaboxes }
+					contentRef={ paddingAppenderRef }
+					disableIframe={ ! shouldIframe }
+					// We should auto-focus the canvas (title) on load.
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus={ ! isWelcomeGuideVisible }
 					onActionPerformed={ onActionPerformed }
-					extraPanels={
+					extraSidebarPanels={
 						! isEditingTemplate && <MetaBoxes location="side" />
 					}
-				/>
-			) }
-			<PostEditorMoreMenu />
-			<BackButton initialPost={ initialPost } />
-			<EditorSnackbars />
-			<EditorInterface
-				className={ className }
-				styles={ styles }
-				forceIsDirty={ hasActiveMetaboxes }
-				contentRef={ paddingAppenderRef }
-				disableIframe={ ! shouldIframe }
-				// We should auto-focus the canvas (title) on load.
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={ ! isWelcomeGuideVisible }
-			>
-				{ ! isDistractionFree && showMetaBoxes && (
-					<div className="edit-post-layout__metaboxes">
-						<MetaBoxes location="normal" />
-						<MetaBoxes location="advanced" />
-					</div>
-				) }
-			</EditorInterface>
-		</>
+					extraContent={
+						! isDistractionFree &&
+						showMetaBoxes && (
+							<div className="edit-post-layout__metaboxes">
+								<MetaBoxes location="normal" />
+								<MetaBoxes location="advanced" />
+							</div>
+						)
+					}
+				>
+					<PostLockedModal />
+					<EditorInitialization />
+					<FullscreenMode isActive={ isFullscreenActive } />
+					<BrowserURL hasHistory={ hasHistory } />
+					<UnsavedChangesWarning />
+					<AutosaveMonitor />
+					<LocalAutosaveMonitor />
+					<EditPostKeyboardShortcuts />
+					<EditorKeyboardShortcutsRegister />
+					<BlockKeyboardShortcuts />
+					<InitPatternModal />
+					<PluginArea onError={ onPluginAreaError } />
+					<PostEditorMoreMenu />
+					<BackButton initialPost={ initialPost } />
+					<EditorSnackbars />
+				</Editor>
+			</ErrorBoundary>
+		</SlotFillProvider>
 	);
 }
 

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

@@ -42,6 +42,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				className="edit-post-preferences-modal__custom-fields-confirmation-button"
 				variant="secondary"
 				isBusy={ isReloading }
+				__experimentalIsFocusable
 				disabled={ isReloading }
 				onClick={ () => {
 					setIsReloading( true );

package/src/components/welcome-guide/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -11,21 +10,22 @@ import WelcomeGuideDefault from './default';
 import WelcomeGuideTemplate from './template';
 import { store as editPostStore } from '../../store';
 
-export default function WelcomeGuide() {
-	const { isActive, isEditingTemplate } = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-		const { getCurrentPostType } = select( editorStore );
-		const _isEditingTemplate = getCurrentPostType() === 'wp_template';
+export default function WelcomeGuide( { postType } ) {
+	const { isActive, isEditingTemplate } = useSelect(
+		( select ) => {
+			const { isFeatureActive } = select( editPostStore );
+			const _isEditingTemplate = postType === 'wp_template';
+			const feature = _isEditingTemplate
+				? 'welcomeGuideTemplate'
+				: 'welcomeGuide';
 
-		const feature = _isEditingTemplate
-			? 'welcomeGuideTemplate'
-			: 'welcomeGuide';
-
-		return {
-			isActive: isFeatureActive( feature ),
-			isEditingTemplate: _isEditingTemplate,
-		};
-	}, [] );
+			return {
+				isActive: isFeatureActive( feature ),
+				isEditingTemplate: _isEditingTemplate,
+			};
+		},
+		[ postType ]
+	);
 
 	if ( ! isActive ) {
 		return null;

package/src/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -22,7 +22,7 @@ import {
 /**
  * Internal dependencies
  */
-import Editor from './editor';
+import Layout from './components/layout';
 import { unlock } from './lock-unlock';
 
 const { BackButton: __experimentalMainDashboardButton } =
@@ -137,12 +137,14 @@ export function initializeEditor(
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
 	root.render(
-		<Editor
-			settings={ settings }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-		/>
+		<StrictMode>
+			<Layout
+				settings={ settings }
+				postId={ postId }
+				postType={ postType }
+				initialEdits={ initialEdits }
+			/>
+		</StrictMode>
 	);
 
 	return root;

package/src/store/index.js

@@ -9,7 +9,9 @@ import { createReduxStore, register } from '@wordpress/data';
 import reducer from './reducer';
 import * as actions from './actions';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Store definition for the edit post namespace.
@@ -23,5 +25,5 @@ export const store = createReduxStore( STORE_NAME, {
 	actions,
 	selectors,
 } );
-
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );

package/src/store/private-selectors.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+export const getEditedPostTemplateId = createRegistrySelector(
+	( select ) => () => {
+		const {
+			id: postId,
+			type: postType,
+			slug,
+		} = select( editorStore ).getCurrentPost();
+		const { getSite, getEntityRecords } = select( coreStore );
+		const siteSettings = getSite();
+		// First check if the current page is set as the posts page.
+		const isPostsPage = +postId === siteSettings?.page_for_posts;
+		if ( isPostsPage ) {
+			return select( coreStore ).getDefaultTemplateId( { slug: 'home' } );
+		}
+		const currentTemplate =
+			select( editorStore ).getEditedPostAttribute( 'template' );
+		if ( currentTemplate ) {
+			const templateWithSameSlug = getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			)?.find( ( template ) => template.slug === currentTemplate );
+			if ( ! templateWithSameSlug ) {
+				return templateWithSameSlug;
+			}
+			return templateWithSameSlug.id;
+		}
+		let slugToCheck;
+		// In `draft` status we might not have a slug available, so we use the `single`
+		// post type templates slug(ex page, single-post, single-product etc..).
+		// Pages do not need the `single` prefix in the slug to be prioritized
+		// through template hierarchy.
+		if ( slug ) {
+			slugToCheck =
+				postType === 'page'
+					? `${ postType }-${ slug }`
+					: `single-${ postType }-${ slug }`;
+		} else {
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+		}
+		return select( coreStore ).getDefaultTemplateId( {
+			slug: slugToCheck,
+		} );
+	}
+);

package/src/store/selectors.js

@@ -14,6 +14,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import { getEditedPostTemplateId } from './private-selectors';
 
 const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
@@ -555,67 +556,15 @@ export function areMetaBoxesInitialized( state ) {
  * @return {Object?} Post Template.
  */
 export const getEditedPostTemplate = createRegistrySelector(
-	( select ) => () => {
-		const {
-			id: postId,
-			type: postType,
-			slug,
-		} = select( editorStore ).getCurrentPost();
-		const { getSite, getEditedEntityRecord, getEntityRecords } =
-			select( coreStore );
-		const siteSettings = getSite();
-		// First check if the current page is set as the posts page.
-		const isPostsPage = +postId === siteSettings?.page_for_posts;
-		if ( isPostsPage ) {
-			const defaultTemplateId = select( coreStore ).getDefaultTemplateId(
-				{ slug: 'home' }
-			);
-			return getEditedEntityRecord(
-				'postType',
-				'wp_template',
-				defaultTemplateId
-			);
-		}
-		const currentTemplate =
-			select( editorStore ).getEditedPostAttribute( 'template' );
-		if ( currentTemplate ) {
-			const templateWithSameSlug = getEntityRecords(
-				'postType',
-				'wp_template',
-				{ per_page: -1 }
-			)?.find( ( template ) => template.slug === currentTemplate );
-			if ( ! templateWithSameSlug ) {
-				return templateWithSameSlug;
-			}
-			return getEditedEntityRecord(
-				'postType',
-				'wp_template',
-				templateWithSameSlug.id
-			);
-		}
-		let slugToCheck;
-		// In `draft` status we might not have a slug available, so we use the `single`
-		// post type templates slug(ex page, single-post, single-product etc..).
-		// Pages do not need the `single` prefix in the slug to be prioritized
-		// through template hierarchy.
-		if ( slug ) {
-			slugToCheck =
-				postType === 'page'
-					? `${ postType }-${ slug }`
-					: `single-${ postType }-${ slug }`;
-		} else {
-			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+	( select ) => ( state ) => {
+		const templateId = getEditedPostTemplateId( state );
+		if ( ! templateId ) {
+			return undefined;
 		}
-		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
-			slug: slugToCheck,
-		} );
-
-		return defaultTemplateId
-			? select( coreStore ).getEditedEntityRecord(
-					'postType',
-					'wp_template',
-					defaultTemplateId
-			  )
-			: null;
+		return select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_template',
+			templateId
+		);
 	}
 );

package/src/test/__snapshots__/editor.native.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="file:///path/to/file.png" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
 exports[`Editor appends media correctly for allowed types 1`] = `
 "<!-- wp:image -->
 <figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>

package/src/test/editor.native.js

@@ -9,8 +9,10 @@ import {
 	getEditorHtml,
 	getEditorTitle,
 	initializeEditor,
+	pasteIntoRichText,
 	screen,
 	setupCoreBlocks,
+	within,
 } from 'test/helpers';
 import { BackHandler } from 'react-native';
 
@@ -98,6 +100,38 @@ describe( 'Editor', () => {
 		} );
 	} );
 
+	it( 'adds empty image block when pasting unsupported HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			text: '<div><img src="file:LOW-RES.png"></div>',
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds image block when pasting HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			files: [ 'file:///path/to/file.png' ],
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'appends media correctly for allowed types', async () => {
 		// Arrange
 		requestMediaImport