@wordpress/edit-post 6.14.2 → 6.15.1-next.4d3b314fd5.0

package/src/components/keyboard-shortcut-help-modal/test/index.js

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { EditorKeyboardShortcutsRegister } from '@wordpress/editor';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -12,24 +18,35 @@ const noop = () => {};
 
 describe( 'KeyboardShortcutHelpModal', () => {
 	it( 'should match snapshot when the modal is active', () => {
-		const wrapper = shallow(
-			<KeyboardShortcutHelpModal
-				isModalActive={ true }
-				toggleModal={ noop }
-			/>
+		render(
+			<ShortcutProvider>
+				<EditorKeyboardShortcutsRegister />
+				<KeyboardShortcutHelpModal isModalActive toggleModal={ noop } />
+			</ShortcutProvider>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'dialog', {
+				name: 'Keyboard shortcuts',
+			} )
+		).toMatchSnapshot();
 	} );
 
-	it( 'should match snapshot when the modal is not active', () => {
-		const wrapper = shallow(
-			<KeyboardShortcutHelpModal
-				isModalActive={ false }
-				toggleModal={ noop }
-			/>
+	it( 'should not render the modal when inactive', () => {
+		render(
+			<ShortcutProvider>
+				<EditorKeyboardShortcutsRegister />
+				<KeyboardShortcutHelpModal
+					isModalActive={ false }
+					toggleModal={ noop }
+				/>
+			</ShortcutProvider>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.queryByRole( 'dialog', {
+				name: 'Keyboard shortcuts',
+			} )
+		).not.toBeInTheDocument();
 	} );
 } );

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(),
 		};
@@ -118,15 +156,20 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const { themeHasDisabledLayoutStyles, themeSupportsLayout, assets } =
-		useSelect( ( select ) => {
-			const _settings = select( blockEditorStore ).getSettings();
-			return {
-				themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
-				themeSupportsLayout: _settings.supportsLayout,
-				assets: _settings.__unstableResolvedAssets,
-			};
-		}, [] );
+	const {
+		themeHasDisabledLayoutStyles,
+		themeSupportsLayout,
+		assets,
+		isFocusMode,
+	} = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+			themeSupportsLayout: _settings.supportsLayout,
+			assets: _settings.__unstableResolvedAssets,
+			isFocusMode: _settings.focusMode,
+		};
+	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
@@ -146,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
@@ -175,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' };
 		}
@@ -183,15 +228,58 @@ 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
+				: '';
+
+		return findPostContent( parse( parseableContent ) ) || {};
+	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
 
-	const blockListLayoutClass = themeSupportsLayout
-		? 'is-layout-constrained'
-		: 'is-layout-flow';
+	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 =
+		layout &&
+		( layout?.type === 'constrained' ||
+			layout?.inherit ||
+			layout?.contentSize ||
+			layout?.wideSize )
+			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
+			: { ...globalLayoutSettings, ...layout, type: 'default' };
+
+	// 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( () => {
@@ -247,17 +335,33 @@ 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
-								className="edit-post-visual-editor__post-title-wrapper"
+								className={ classnames(
+									'edit-post-visual-editor__post-title-wrapper',
+									{
+										'is-focus-mode': isFocusMode,
+									}
+								) }
 								contentEditable={ false }
 							>
 								<PostTitle ref={ titleRef } />
@@ -273,7 +377,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>