@wordpress/edit-post 7.35.0 → 8.0.1

package/src/components/layout/index.js

@@ -10,26 +10,19 @@ import {
 	AutosaveMonitor,
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
-	EditorNotices,
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
 	EditorSnackbars,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	BlockBreadcrumb,
-	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { ScrollLock } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useCallback, useMemo } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+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';
@@ -40,55 +33,54 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import TextEditor from '../text-editor';
-import VisualEditor from '../visual-editor';
+import BackButton from '../back-button';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
-import Header from '../header';
 import MetaBoxes from '../meta-boxes';
+import PostEditorMoreMenu from '../more-menu';
 import WelcomeGuide from '../welcome-guide';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import useCommonCommands from '../../hooks/commands/use-common-commands';
+import useEditPostCommands from '../../commands/use-commands';
+import { usePaddingAppender } from './use-padding-appender';
+import { useShouldIframe } from './use-should-iframe';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const {
-	InserterSidebar,
-	ListViewSidebar,
-	ComplementaryArea,
-	FullscreenMode,
-	SavePublishPanels,
-	InterfaceSkeleton,
-	interfaceStore,
-	Sidebar,
-} = unlock( editorPrivateApis );
+const { EditorInterface, FullscreenMode, Sidebar } =
+	unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
-
-const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-};
+const DESIGN_POST_TYPES = [
+	'wp_template',
+	'wp_template_part',
+	'wp_block',
+	'wp_navigation',
+];
 
 function useEditorStyles() {
-	const { hasThemeStyleSupport, editorSettings } = useSelect(
-		( select ) => ( {
+	const {
+		hasThemeStyleSupport,
+		editorSettings,
+		isZoomedOutView,
+		hasMetaBoxes,
+		renderingMode,
+		postType,
+	} = useSelect( ( select ) => {
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getCurrentPostType, getRenderingMode } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
 			hasThemeStyleSupport:
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
-		} ),
-		[]
-	);
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+			renderingMode: getRenderingMode(),
+			postType: _postType,
+		};
+	}, [] );
 
 	// Compute the default styles.
 	return useMemo( () => {
@@ -122,110 +114,84 @@ function useEditorStyles() {
 			} );
 		}
 
-		return hasThemeStyles ? editorSettings.styles : defaultEditorStyles;
+		const baseStyles = hasThemeStyles
+			? editorSettings.styles ?? []
+			: defaultEditorStyles;
+
+		// Add a constant padding for the typewriter effect. When typing at the
+		// bottom, there needs to be room to scroll up.
+		if (
+			! isZoomedOutView &&
+			! hasMetaBoxes &&
+			renderingMode === 'post-only' &&
+			! DESIGN_POST_TYPES.includes( postType )
+		) {
+			return [
+				...baseStyles,
+				{
+					css: 'body{padding-bottom: 40vh}',
+				},
+			];
+		}
+
+		return baseStyles;
 	}, [
 		editorSettings.defaultEditorStyles,
 		editorSettings.disableLayoutStyles,
 		editorSettings.styles,
 		hasThemeStyleSupport,
+		postType,
 	] );
 }
 
 function Layout( { initialPost } ) {
 	useCommands();
-	useCommonCommands();
-
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const { closeGeneralSidebar } = useDispatch( editPostStore );
+	useEditPostCommands();
+	const paddingAppenderRef = usePaddingAppender();
+	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
-		isRichEditingEnabled,
-		sidebarIsOpened,
 		hasActiveMetaboxes,
-		previousShortcut,
-		nextShortcut,
 		hasBlockSelected,
-		isInserterOpened,
-		isListViewOpened,
 		showIconLabels,
 		isDistractionFree,
-		showBlockBreadcrumbs,
 		showMetaBoxes,
-		documentLabel,
 		hasHistory,
-		hasBlockBreadcrumbs,
-		blockEditorMode,
 		isEditingTemplate,
+		isWelcomeGuideVisible,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
-		const editorSettings = getEditorSettings();
-		const postTypeLabel = getPostTypeLabel();
+		const { getEditorSettings } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 
 		return {
-			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
-			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
-				select( editorStore ).isPublishSidebarOpened()
-			),
+			mode: select( editorStore ).getEditorMode(),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editorStore ).isInserterOpened(),
-			isListViewOpened: select( editorStore ).isListViewOpened(),
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
-			showIconLabels: get( 'core', 'showIconLabels' ),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			// translators: Default label for the Document in the Block Breadcrumb.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			showMetaBoxes:
+				select( editorStore ).getRenderingMode() === 'post-only',
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
-			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			blockEditorMode:
-				select( blockEditorStore ).__unstableGetEditorMode(),
 			isEditingTemplate:
 				select( editorStore ).getCurrentPostType() === 'wp_template',
+			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 		};
 	}, [] );
 
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
 		? 'block-selection-edit'
-		: 'post-editor-edit';
+		: 'entity-edit';
 	useCommandContext( commandContext );
 
 	const styles = useEditorStyles();
 
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
-			}
-			setEntitiesSavedStatesCallback( false );
-		},
-		[ entitiesSavedStatesCallback ]
-	);
-
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
 	if ( showIconLabels ) {
 		document.body.classList.add( 'show-icon-labels' );
@@ -234,34 +200,9 @@ function Layout( { initialPost } ) {
 	}
 
 	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isWideViewport,
-		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-		'has-block-breadcrumbs':
-			hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
-	const secondarySidebarLabel = isListViewOpened
-		? __( 'Document Overview' )
-		: __( 'Block Library' );
-
-	const secondarySidebar = () => {
-		if ( mode === 'visual' && isInserterOpened ) {
-			return (
-				<InserterSidebar
-					closeGeneralSidebar={ closeGeneralSidebar }
-					isRightSidebarOpen={ sidebarIsOpened }
-				/>
-			);
-		}
-		if ( mode === 'visual' && isListViewOpened ) {
-			return <ListViewSidebar />;
-		}
-
-		return null;
-	};
-
 	function onPluginAreaError( name ) {
 		createErrorNotice(
 			sprintf(
@@ -335,82 +276,7 @@ function Layout( { initialPost } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<EditorKeyboardShortcuts />
 			<BlockKeyboardShortcuts />
-
-			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree && isWideViewport }
-				className={ className }
-				labels={ {
-					...interfaceLabels,
-					secondarySidebar: secondarySidebarLabel,
-				} }
-				header={
-					<Header
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						initialPost={ initialPost }
-					/>
-				}
-				editorNotices={ <EditorNotices /> }
-				secondarySidebar={ secondarySidebar() }
-				sidebar={
-					! isDistractionFree && (
-						<ComplementaryArea.Slot scope="core" />
-					)
-				}
-				notices={ <EditorSnackbars /> }
-				content={
-					<>
-						{ ! isDistractionFree && <EditorNotices /> }
-						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
-							<TextEditor />
-						) }
-						{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
-						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditor styles={ styles } />
-						) }
-						{ ! isDistractionFree && showMetaBoxes && (
-							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
-							</div>
-						) }
-						{ isMobileViewport && sidebarIsOpened && (
-							<ScrollLock />
-						) }
-					</>
-				}
-				footer={
-					! isDistractionFree &&
-					! isMobileViewport &&
-					showBlockBreadcrumbs &&
-					isRichEditingEnabled &&
-					blockEditorMode !== 'zoom-out' &&
-					mode === 'visual' && (
-						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb rootLabelText={ documentLabel } />
-						</div>
-					)
-				}
-				actions={
-					<SavePublishPanels
-						closeEntitiesSavedStates={ closeEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={
-							entitiesSavedStatesCallback
-						}
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						forceIsDirtyPublishPanel={ hasActiveMetaboxes }
-					/>
-				}
-				shortcuts={ {
-					previous: previousShortcut,
-					next: nextShortcut,
-				} }
-			/>
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />
@@ -422,6 +288,26 @@ function Layout( { initialPost } ) {
 					}
 				/>
 			) }
+			<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>
 		</>
 	);
 }

package/src/components/layout/style.scss

@@ -1,28 +1,20 @@
+.editor-visual-editor {
+	flex: 1 0 auto;
+	height: auto;
+}
+
 .edit-post-layout__metaboxes {
 	flex-shrink: 0;
 	clear: both;
 }
 
 // Adjust the position of the notices
-.edit-post-layout .components-editor-notices__snackbar {
+.components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.is-distraction-free {
-	.components-editor-notices__snackbar {
-		bottom: 16px;
-	}
-}
-
-// Adjust the position of the notices when breadcrumbs are present
-.has-block-breadcrumbs {
-	.components-editor-notices__snackbar {
-		bottom: 40px;
-	}
+	bottom: 24px;
+	padding-left: 24px;
+	padding-right: 24px;
 }
 
 @include editor-left(".edit-post-layout .components-editor-notices__snackbar");

package/src/components/layout/use-should-iframe.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
+
+export function useShouldIframe() {
+	const {
+		isBlockBasedTheme,
+		hasV3BlocksOnly,
+		isEditingTemplate,
+		hasMetaBoxes,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { getBlockTypes } = select( blocksStore );
+		const editorSettings = getEditorSettings();
+		return {
+			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+				return type.apiVersion >= 3;
+			} ),
+			isEditingTemplate: getCurrentPostType() === 'wp_template',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+		};
+	}, [] );
+
+	return (
+		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
+			! hasMetaBoxes ) ||
+		isEditingTemplate
+	);
+}

package/src/components/{header/more-menu → more-menu}/index.js

@@ -10,10 +10,10 @@ import { displayShortcut } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 import ManagePatternsMenuItem from './manage-patterns-menu-item';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import EditPostPreferencesModal from '../../preferences-modal';
+import EditPostPreferencesModal from '../preferences-modal';
 
 const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 

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/index.js

@@ -14,13 +14,19 @@ import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import './hooks';
 import Editor from './editor';
+import { unlock } from './lock-unlock';
+
+const { BackButton: __experimentalMainDashboardButton } =
+	unlock( editorPrivateApis );
 
 /**
  * Initializes and returns an instance of Editor.
@@ -80,7 +86,7 @@ export function initializeEditor(
 	registerCoreBlocks();
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
 		} );
@@ -152,8 +158,7 @@ export function reinitializeEditor() {
 	} );
 }
 
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
-
+export { default as __experimentalFullscreenModeClose } from './components/back-button/fullscreen-mode-close';
+export { __experimentalMainDashboardButton };
 export { store } from './store';
 export * from './deprecated';

package/src/store/selectors.js

@@ -609,10 +609,13 @@ export const getEditedPostTemplate = createRegistrySelector(
 		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
 			slug: slugToCheck,
 		} );
-		return select( coreStore ).getEditedEntityRecord(
-			'postType',
-			'wp_template',
-			defaultTemplateId
-		);
+
+		return defaultTemplateId
+			? select( coreStore ).getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					defaultTemplateId
+			  )
+			: null;
 	}
 );

package/src/style.scss

@@ -1,9 +1,6 @@
-@import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
+@import "./components/back-button/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/text-editor/style.scss";
-@import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 
 /**
@@ -36,7 +33,7 @@ body.js.block-editor-page {
 
 // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
 .editor-header,
-.edit-post-text-editor,
+.editor-text-editor,
 .editor-sidebar,
 .editor-post-publish-panel {
 	@include reset;

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

@@ -19,3 +19,75 @@ exports[`Editor appends media correctly for allowed types and skips unsupported
 <figure class="wp-block-video"><video controls src="file:///local-video-4.mp4"></video></figure>
 <!-- /wp:video -->"
 `;
+
+exports[`Editor on content update parses markdown into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Overview</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Consectetur adipiscing<br>elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Details</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Duis sagittis ipsum <code>## Mixed Lists</code></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Key Points:</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><br>Consectetur adipiscing elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Additional Info:<br>-<br>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;