@wordpress/edit-post 7.24.0 → 7.25.0

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

@@ -6,24 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { PostTitle, store as editorStore } from '@wordpress/editor';
 import {
-	BlockList,
-	BlockTools,
-	store as blockEditorStore,
-	__unstableUseTypewriter as useTypewriter,
-	__unstableUseTypingObserver as useTypingObserver,
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	useSettings,
-	__experimentalRecursionProvider as RecursionProvider,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { useEffect, useRef, useMemo } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
-import { parse, store as blocksStore } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -31,398 +20,76 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const {
-	LayoutStyle,
-	useLayoutClasses,
-	useLayoutStyles,
-	ExperimentalBlockCanvas: BlockCanvas,
-} = unlock( blockEditorPrivateApis );
+const { EditorCanvas } = unlock( editorPrivateApis );
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
-/**
- * Given an array of nested blocks, find the first Post Content
- * block inside it, recursing through any nesting levels,
- * and return its attributes.
- *
- * @param {Array} blocks A list of blocks.
- *
- * @return {Object | undefined} The Post Content block.
- */
-function getPostContentAttributes( blocks ) {
-	for ( let i = 0; i < blocks.length; i++ ) {
-		if ( blocks[ i ].name === 'core/post-content' ) {
-			return blocks[ i ].attributes;
-		}
-		if ( blocks[ i ].innerBlocks.length ) {
-			const nestedPostContent = getPostContentAttributes(
-				blocks[ i ].innerBlocks
-			);
-
-			if ( nestedPostContent ) {
-				return nestedPostContent;
-			}
-		}
-	}
-}
-
-function checkForPostContentAtRootLevel( blocks ) {
-	for ( let i = 0; i < blocks.length; i++ ) {
-		if ( blocks[ i ].name === 'core/post-content' ) {
-			return true;
-		}
-	}
-	return false;
-}
-
 export default function VisualEditor( { styles } ) {
 	const {
-		deviceType,
 		isWelcomeGuideVisible,
-		isTemplateMode,
-		postContentAttributes,
-		editedPostTemplate = {},
-		wrapperBlockName,
-		wrapperUniqueId,
+		renderingMode,
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			isEditingTemplate,
-			getEditedPostTemplate,
-			__experimentalGetPreviewDeviceType,
-		} = select( editPostStore );
-		const { getCurrentPostId, getCurrentPostType, getEditorSettings } =
-			select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
+		const { getEditorSettings, getRenderingMode } = select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
-		const _isTemplateMode = isEditingTemplate();
-		const postTypeSlug = getCurrentPostType();
-		let _wrapperBlockName;
-
-		if ( postTypeSlug === 'wp_block' ) {
-			_wrapperBlockName = 'core/block';
-		} else if ( ! _isTemplateMode ) {
-			_wrapperBlockName = 'core/post-content';
-		}
-
 		const editorSettings = getEditorSettings();
-		const supportsTemplateMode = editorSettings.supportsTemplateMode;
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		const canEditTemplate = select( coreStore ).canUser(
-			'create',
-			'templates'
-		);
 
 		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			isTemplateMode: _isTemplateMode,
-			postContentAttributes: getEditorSettings().postContentAttributes,
-			// Post template fetch returns a 404 on classic themes, which
-			// messes with e2e tests, so check it's a block theme first.
-			editedPostTemplate:
-				postType?.viewable && supportsTemplateMode && canEditTemplate
-					? getEditedPostTemplate()
-					: undefined,
-			wrapperBlockName: _wrapperBlockName,
-			wrapperUniqueId: getCurrentPostId(),
+			renderingMode: getRenderingMode(),
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
 			} ),
 		};
 	}, [] );
-	const { isCleanNewPost } = useSelect( editorStore );
 	const hasMetaBoxes = useSelect(
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const {
-		hasRootPaddingAwareAlignments,
-		isFocusMode,
-		themeHasDisabledLayoutStyles,
-		themeSupportsLayout,
-	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
-			themeSupportsLayout: _settings.supportsLayout,
-			isFocusMode: _settings.focusMode,
-			hasRootPaddingAwareAlignments:
-				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
-		};
-	}, [] );
-	const desktopCanvasStyles = {
-		height: '100%',
-		width: '100%',
-		marginLeft: 'auto',
-		marginRight: 'auto',
-		display: 'flex',
-		flexFlow: 'column',
-		// Default background color so that grey
-		// .edit-post-editor-regions__content color doesn't show through.
-		background: 'white',
-	};
-	const templateModeStyles = {
-		...desktopCanvasStyles,
-		borderRadius: '2px 2px 0 0',
-		border: '1px solid #ddd',
-		borderBottom: 0,
-	};
-	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
-	const [ globalLayoutSettings ] = useSettings( 'layout' );
-	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
-
-	let animatedStyles = isTemplateMode
-		? templateModeStyles
-		: desktopCanvasStyles;
-	if ( resizedCanvasStyles ) {
-		animatedStyles = resizedCanvasStyles;
-	}
 
 	let paddingBottom;
 
 	// Add a constant padding for the typewritter effect. When typing at the
 	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && ! resizedCanvasStyles && ! isTemplateMode ) {
+	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
 		paddingBottom = '40vh';
 	}
 
-	const ref = useRef();
-	const contentRef = useMergeRefs( [ ref, useTypewriter() ] );
-
-	// fallbackLayout is used if there is no Post Content,
-	// and for Post Title.
-	const fallbackLayout = useMemo( () => {
-		if ( isTemplateMode ) {
-			return { type: 'default' };
-		}
-
-		if ( themeSupportsLayout ) {
-			// We need to ensure support for wide and full alignments,
-			// so we add the constrained type.
-			return { ...globalLayoutSettings, type: 'constrained' };
-		}
-		// Set default layout for classic themes so all alignments are supported.
-		return { type: 'default' };
-	}, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] );
-
-	const newestPostContentAttributes = useMemo( () => {
-		if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) {
-			return postContentAttributes;
-		}
-		// When in template editing mode, we can access the blocks directly.
-		if ( editedPostTemplate?.blocks ) {
-			return getPostContentAttributes( editedPostTemplate?.blocks );
-		}
-		// If there are no blocks, we have to parse the content string.
-		// Best double-check it's a string otherwise the parse function gets unhappy.
-		const parseableContent =
-			typeof editedPostTemplate?.content === 'string'
-				? editedPostTemplate?.content
-				: '';
-
-		return getPostContentAttributes( parse( parseableContent ) ) || {};
-	}, [
-		editedPostTemplate?.content,
-		editedPostTemplate?.blocks,
-		postContentAttributes,
-	] );
-
-	const hasPostContentAtRootLevel = useMemo( () => {
-		if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) {
-			return false;
-		}
-		// When in template editing mode, we can access the blocks directly.
-		if ( editedPostTemplate?.blocks ) {
-			return checkForPostContentAtRootLevel( editedPostTemplate?.blocks );
-		}
-		// If there are no blocks, we have to parse the content string.
-		// Best double-check it's a string otherwise the parse function gets unhappy.
-		const parseableContent =
-			typeof editedPostTemplate?.content === 'string'
-				? editedPostTemplate?.content
-				: '';
-
-		return (
-			checkForPostContentAtRootLevel( parse( parseableContent ) ) || false
-		);
-	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
-
-	const { layout = {}, align = '' } = newestPostContentAttributes || {};
-
-	const postContentLayoutClasses = useLayoutClasses(
-		newestPostContentAttributes,
-		'core/post-content'
-	);
-
-	const blockListLayoutClass = classnames(
-		{
-			'is-layout-flow': ! themeSupportsLayout,
-		},
-		themeSupportsLayout && postContentLayoutClasses,
-		align && `align${ align }`
-	);
-
-	const postContentLayoutStyles = useLayoutStyles(
-		newestPostContentAttributes,
-		'core/post-content',
-		'.block-editor-block-list__layout.is-root-container'
-	);
-
-	// Update type for blocks using legacy layouts.
-	const postContentLayout = useMemo( () => {
-		return layout &&
-			( layout?.type === 'constrained' ||
-				layout?.inherit ||
-				layout?.contentSize ||
-				layout?.wideSize )
-			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
-			: { ...globalLayoutSettings, ...layout, type: 'default' };
-	}, [
-		layout?.type,
-		layout?.inherit,
-		layout?.contentSize,
-		layout?.wideSize,
-		globalLayoutSettings,
-	] );
-
-	// If there is a Post Content block we use its layout for the block list;
-	// if not, this must be a classic theme, in which case we use the fallback layout.
-	const blockListLayout = postContentAttributes
-		? postContentLayout
-		: fallbackLayout;
-
-	const postEditorLayout =
-		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
-			? fallbackLayout
-			: blockListLayout;
-
-	const observeTypingRef = useTypingObserver();
-	const titleRef = useRef();
-	useEffect( () => {
-		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
-			return;
-		}
-		titleRef?.current?.focus();
-	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
-
 	styles = useMemo(
 		() => [
 			...styles,
 			{
 				// We should move this in to future to the body.
-				css:
-					`.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}` +
-					( paddingBottom
-						? `body{padding-bottom:${ paddingBottom }}`
-						: '' ),
+				css: paddingBottom
+					? `body{padding-bottom:${ paddingBottom }}`
+					: '',
 			},
 		],
-		[ styles ]
+		[ styles, paddingBottom ]
 	);
 
-	// Add some styles for alignwide/alignfull Post Content and its children.
-	const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
-		.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
-		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
-		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
-
 	const isToBeIframed =
 		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 			! hasMetaBoxes ) ||
-		isTemplateMode ||
-		deviceType === 'Tablet' ||
-		deviceType === 'Mobile';
+		renderingMode === 'template-only';
 
 	return (
-		<BlockTools
-			__unstableContentRef={ ref }
+		<div
 			className={ classnames( 'edit-post-visual-editor', {
-				'is-template-mode': isTemplateMode,
+				'is-template-mode': renderingMode === 'template-only',
 				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>
-			<motion.div
-				className="edit-post-visual-editor__content-area"
-				animate={ {
-					padding: isTemplateMode ? '48px 48px 0' : 0,
-				} }
-			>
-				<motion.div
-					animate={ animatedStyles }
-					initial={ desktopCanvasStyles }
-					className={ previewMode }
-				>
-					<BlockCanvas
-						shouldIframe={ isToBeIframed }
-						contentRef={ contentRef }
-						styles={ styles }
-						height="100%"
-					>
-						{ themeSupportsLayout &&
-							! themeHasDisabledLayoutStyles &&
-							! isTemplateMode && (
-								<>
-									<LayoutStyle
-										selector=".edit-post-visual-editor__post-title-wrapper"
-										layout={ fallbackLayout }
-									/>
-									<LayoutStyle
-										selector=".block-editor-block-list__layout.is-root-container"
-										layout={ postEditorLayout }
-									/>
-									{ align && (
-										<LayoutStyle css={ alignCSS } />
-									) }
-									{ postContentLayoutStyles && (
-										<LayoutStyle
-											layout={ postContentLayout }
-											css={ postContentLayoutStyles }
-										/>
-									) }
-								</>
-							) }
-						{ ! isTemplateMode && (
-							<div
-								className={ classnames(
-									'edit-post-visual-editor__post-title-wrapper',
-									{
-										'is-focus-mode': isFocusMode,
-										'has-global-padding':
-											hasRootPaddingAwareAlignments,
-									}
-								) }
-								contentEditable={ false }
-								ref={ observeTypingRef }
-							>
-								<PostTitle ref={ titleRef } />
-							</div>
-						) }
-						<RecursionProvider
-							blockName={ wrapperBlockName }
-							uniqueId={ wrapperUniqueId }
-						>
-							<BlockList
-								className={
-									isTemplateMode
-										? 'wp-site-blocks'
-										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
-								}
-								layout={ blockListLayout }
-								dropZoneElement={
-									// When iframed, pass in the html element of the iframe to
-									// ensure the drop zone extends to the edges of the iframe.
-									isToBeIframed
-										? ref.current?.parentNode
-										: ref.current
-								}
-							/>
-						</RecursionProvider>
-					</BlockCanvas>
-				</motion.div>
-			</motion.div>
-		</BlockTools>
+			<EditorCanvas
+				disableIframe={ ! isToBeIframed }
+				styles={ styles }
+				// We should auto-focus the canvas (title) on load.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus={ ! isWelcomeGuideVisible }
+			/>
+		</div>
 	);
 }

package/src/components/visual-editor/style.scss

@@ -38,21 +38,6 @@
 	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
 }
 
-// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
-// .block-editor-block-list__layout and block-editor-block-list__block
-// We need to have two DOM elements.
-.edit-post-visual-editor__post-title-wrapper {
-	.editor-post-title {
-		// Center.
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	// Add extra margin at the top, to push down the Title area in the post editor.
-	margin-top: 4rem;
-	margin-bottom: var(--wp--style--block-gap);
-}
-
 .edit-post-visual-editor__content-area {
 	width: 100%;
 	height: 100%;

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -12,8 +13,9 @@ import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuide() {
 	const { isActive, isTemplateMode } = useSelect( ( select ) => {
-		const { isFeatureActive, isEditingTemplate } = select( editPostStore );
-		const _isTemplateMode = isEditingTemplate();
+		const { isFeatureActive } = select( editPostStore );
+		const { getRenderingMode } = select( editorStore );
+		const _isTemplateMode = getRenderingMode() === 'template-only';
 		const feature = _isTemplateMode
 			? 'welcomeGuideTemplate'
 			: 'welcomeGuide';

package/src/editor.js

@@ -14,6 +14,7 @@ import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,6 +27,8 @@ import { unlock } from './lock-unlock';
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const {
 		hasFixedToolbar,
 		focusMode,
@@ -36,13 +39,11 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		hiddenBlockTypes,
 		blockTypes,
 		keepCaretInsideBlock,
-		isTemplateMode,
 		template,
 	} = useSelect(
 		( select ) => {
 			const {
 				isFeatureActive,
-				isEditingTemplate,
 				getEditedPostTemplate,
 				getHiddenBlockTypes,
 			} = select( editPostStore );
@@ -68,9 +69,9 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				getEditorSettings().supportsTemplateMode;
 			const isViewable = getPostType( postType )?.viewable ?? false;
 			const canEditTemplate = canUser( 'create', 'templates' );
-
 			return {
-				hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
+				hasFixedToolbar:
+					isFeatureActive( 'fixedToolbar' ) || ! isLargeViewport,
 				focusMode: isFeatureActive( 'focusMode' ),
 				isDistractionFree: isFeatureActive( 'distractionFree' ),
 				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
@@ -81,7 +82,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				hiddenBlockTypes: getHiddenBlockTypes(),
 				blockTypes: getBlockTypes(),
 				keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
-				isTemplateMode: isEditingTemplate(),
 				template:
 					supportsTemplateMode && isViewable && canEditTemplate
 						? getEditedPostTemplate()
@@ -89,7 +89,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				post: postObject,
 			};
 		},
-		[ postType, postId ]
+		[ postType, postId, isLargeViewport ]
 	);
 
 	const { updatePreferredStyleVariations, setIsInserterOpened } =
@@ -156,7 +156,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				post={ post }
 				initialEdits={ initialEdits }
 				useSubRegistry={ false }
-				__unstableTemplate={ isTemplateMode ? template : undefined }
+				__unstableTemplate={ template }
 				{ ...props }
 			>
 				<ErrorBoundary>

package/src/editor.native.js

@@ -192,18 +192,12 @@ class Editor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			getEditorMode,
-			__experimentalGetPreviewDeviceType,
-			getHiddenBlockTypes,
-		} = select( editPostStore );
+		const { isFeatureActive, getEditorMode, getHiddenBlockTypes } =
+			select( editPostStore );
 		const { getBlockTypes } = select( blocksStore );
 
 		return {
-			hasFixedToolbar:
-				isFeatureActive( 'fixedToolbar' ) ||
-				__experimentalGetPreviewDeviceType() !== 'Desktop',
+			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
 			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
 			hiddenBlockTypes: getHiddenBlockTypes(),

package/src/index.js

@@ -15,6 +15,7 @@ import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -93,7 +94,7 @@ export function initializeEditor(
 		'removeTemplatePartsFromInserter',
 		( canInsert, blockType ) => {
 			if (
-				! select( editPostStore ).isEditingTemplate() &&
+				select( editorStore ).getRenderingMode() === 'post-only' &&
 				blockType.name === 'core/template-part'
 			) {
 				return false;
@@ -118,7 +119,7 @@ export function initializeEditor(
 			{ getBlockParentsByBlockName }
 		) => {
 			if (
-				! select( editPostStore ).isEditingTemplate() &&
+				select( editorStore ).getRenderingMode() === 'post-only' &&
 				blockType.name === 'core/post-content'
 			) {
 				return (

package/src/plugins/welcome-guide-menu-item/index.js

@@ -4,15 +4,12 @@
 import { useSelect } from '@wordpress/data';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 export default function WelcomeGuideMenuItem() {
 	const isTemplateMode = useSelect(
-		( select ) => select( editPostStore ).isEditingTemplate(),
+		( select ) =>
+			select( editorStore ).getRenderingMode() === 'template-only',
 		[]
 	);