@wordpress/edit-post 6.15.0 → 6.16.0

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

@@ -28,6 +28,8 @@ import {
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableIframe as Iframe,
 	__experimentalRecursionProvider as RecursionProvider,
+	__experimentaluseLayoutClasses as useLayoutClasses,
+	__experimentaluseLayoutStyles as useLayoutStyles,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { Button, __unstableMotion as motion } from '@wordpress/components';
@@ -35,6 +37,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -82,11 +85,37 @@ function MaybeIframe( {
 	);
 }
 
+/**
+ * Given an array of nested blocks, find the first Post Content
+ * block inside it, recursing through any nesting levels.
+ *
+ * @param {Array} blocks A list of blocks.
+ *
+ * @return {Object} The Post Content block.
+ */
+function findPostContent( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return blocks[ i ];
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			const nestedPostContent = findPostContent(
+				blocks[ i ].innerBlocks
+			);
+
+			if ( nestedPostContent ) {
+				return nestedPostContent;
+			}
+		}
+	}
+}
+
 export default function VisualEditor( { styles } ) {
 	const {
 		deviceType,
 		isWelcomeGuideVisible,
 		isTemplateMode,
+		editedPostTemplate = {},
 		wrapperBlockName,
 		wrapperUniqueId,
 	} = useSelect( ( select ) => {
@@ -94,8 +123,10 @@ export default function VisualEditor( { styles } ) {
 			isFeatureActive,
 			isEditingTemplate,
 			__experimentalGetPreviewDeviceType,
+			getEditedPostTemplate,
 		} = select( editPostStore );
-		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		const { getCurrentPostId, getCurrentPostType, getEditorSettings } =
+			select( editorStore );
 		const _isTemplateMode = isEditingTemplate();
 		let _wrapperBlockName;
 
@@ -105,10 +136,17 @@ export default function VisualEditor( { styles } ) {
 			_wrapperBlockName = 'core/post-content';
 		}
 
+		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 			isTemplateMode: _isTemplateMode,
+			// Post template fetch returns a 404 on classic themes, which
+			// messes with e2e tests, so we check it's a block theme first.
+			editedPostTemplate: supportsTemplateMode
+				? getEditedPostTemplate()
+				: {},
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 		};
@@ -122,7 +160,6 @@ export default function VisualEditor( { styles } ) {
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
 		assets,
-		useRootPaddingAwareAlignments,
 		isFocusMode,
 	} = useSelect( ( select ) => {
 		const _settings = select( blockEditorStore ).getSettings();
@@ -130,8 +167,6 @@ export default function VisualEditor( { styles } ) {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			assets: _settings.__unstableResolvedAssets,
-			useRootPaddingAwareAlignments:
-				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
 			isFocusMode: _settings.focusMode,
 		};
 	}, [] );
@@ -154,7 +189,7 @@ export default function VisualEditor( { styles } ) {
 		borderBottom: 0,
 	};
 	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
-	const defaultLayout = useSetting( 'layout' );
+	const globalLayoutSettings = useSetting( 'layout' );
 	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
 
 	let animatedStyles = isTemplateMode
@@ -183,7 +218,9 @@ export default function VisualEditor( { styles } ) {
 
 	const blockSelectionClearerRef = useBlockSelectionClearer();
 
-	const layout = useMemo( () => {
+	// fallbackLayout is used if there is no Post Content,
+	// and for Post Title.
+	const fallbackLayout = useMemo( () => {
 		if ( isTemplateMode ) {
 			return { type: 'default' };
 		}
@@ -191,17 +228,65 @@ export default function VisualEditor( { styles } ) {
 		if ( themeSupportsLayout ) {
 			// We need to ensure support for wide and full alignments,
 			// so we add the constrained type.
-			return { ...defaultLayout, type: 'constrained' };
+			return { ...globalLayoutSettings, type: 'constrained' };
 		}
 		// Set default layout for classic themes so all alignments are supported.
 		return { type: 'default' };
-	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
+	}, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] );
+
+	const postContentBlock = useMemo( () => {
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return findPostContent( 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
+				: '';
 
-	const blockListLayoutClass = classnames( {
-		'is-layout-constrained': themeSupportsLayout,
-		'is-layout-flow': ! themeSupportsLayout,
-		'has-global-padding': useRootPaddingAwareAlignments,
-	} );
+		return findPostContent( parse( parseableContent ) ) || {};
+	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
+
+	const postContentLayoutClasses = useLayoutClasses( postContentBlock );
+
+	const blockListLayoutClass = classnames(
+		{
+			'is-layout-flow': ! themeSupportsLayout,
+		},
+		themeSupportsLayout && postContentLayoutClasses
+	);
+
+	const postContentLayoutStyles = useLayoutStyles(
+		postContentBlock,
+		'.block-editor-block-list__layout.is-root-container'
+	);
+
+	const layout = postContentBlock?.attributes?.layout || {};
+
+	// 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 = postContentBlock
+		? postContentLayout
+		: fallbackLayout;
 
 	const titleRef = useRef();
 	useEffect( () => {
@@ -257,13 +342,24 @@ export default function VisualEditor( { styles } ) {
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&
 							! isTemplateMode && (
-								<LayoutStyle
-									selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
-									layout={ layout }
-									layoutDefinitions={
-										defaultLayout?.definitions
-									}
-								/>
+								<>
+									<LayoutStyle
+										selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
+										layout={ fallbackLayout }
+										layoutDefinitions={
+											globalLayoutSettings?.definitions
+										}
+									/>
+									{ postContentLayoutStyles && (
+										<LayoutStyle
+											layout={ postContentLayout }
+											css={ postContentLayoutStyles }
+											layoutDefinitions={
+												globalLayoutSettings?.definitions
+											}
+										/>
+									) }
+								</>
 							) }
 						{ ! isTemplateMode && (
 							<div
@@ -288,7 +384,7 @@ export default function VisualEditor( { styles } ) {
 										? 'wp-site-blocks'
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
-								__experimentalLayout={ layout }
+								__experimentalLayout={ blockListLayout }
 							/>
 						</RecursionProvider>
 					</MaybeIframe>

package/src/index.js

@@ -80,22 +80,6 @@ export function initializeEditor(
 	settings,
 	initialEdits
 ) {
-	// Prevent adding template part in the post editor.
-	// Only add the filter when the post editor is initialized, not imported.
-	addFilter(
-		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromInserter',
-		( can, blockType ) => {
-			if (
-				! select( editPostStore ).isEditingTemplate() &&
-				blockType.name === 'core/template-part'
-			) {
-				return false;
-			}
-			return can;
-		}
-	);
-
 	const target = document.getElementById( id );
 	const reboot = reinitializeEditor.bind(
 		null,
@@ -137,6 +121,26 @@ export function initializeEditor(
 		} );
 	}
 
+	/*
+	 * Prevent adding template part in the post editor.
+	 * Only add the filter when the post editor is initialized, not imported.
+	 * Also only add the filter(s) after registerCoreBlocks()
+	 * so that common filters in the block library are not overwritten.
+	 */
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeTemplatePartsFromInserter',
+		( canInsert, blockType ) => {
+			if (
+				! select( editPostStore ).isEditingTemplate() &&
+				blockType.name === 'core/template-part'
+			) {
+				return false;
+			}
+			return canInsert;
+		}
+	);
+
 	// Show a console log warning if the browser is not in Standards rendering mode.
 	const documentMode =
 		document.compatMode === 'CSS1Compat' ? 'Standards' : 'Quirks';

package/src/style.scss

@@ -98,3 +98,17 @@ body.block-editor-page {
 }
 
 @include wordpress-admin-schemes();
+
+// The edit-site package adds or removes the sidebar when it's opened or closed.
+// The edit-post package, however, always has the sidebar in the canvas.
+// These edit-post specific rules ensures there isn't a border on the right of
+// the canvas when a sidebar is visually closed.
+.interface-interface-skeleton__sidebar {
+	border-left: none;
+
+	.is-sidebar-opened & {
+		@include break-medium() {
+			border-left: $border-width solid $gray-200;
+		}
+	}
+}