@wordpress/edit-post 6.14.1 → 6.15.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

@@ -118,15 +118,23 @@ 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,
+		useRootPaddingAwareAlignments,
+		isFocusMode,
+	} = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+			themeSupportsLayout: _settings.supportsLayout,
+			assets: _settings.__unstableResolvedAssets,
+			useRootPaddingAwareAlignments:
+				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isFocusMode: _settings.focusMode,
+		};
+	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
@@ -189,9 +197,11 @@ export default function VisualEditor( { styles } ) {
 		return { type: 'default' };
 	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
 
-	const blockListLayoutClass = themeSupportsLayout
-		? 'is-layout-constrained'
-		: 'is-layout-flow';
+	const blockListLayoutClass = classnames( {
+		'is-layout-constrained': themeSupportsLayout,
+		'is-layout-flow': ! themeSupportsLayout,
+		'has-global-padding': useRootPaddingAwareAlignments,
+	} );
 
 	const titleRef = useRef();
 	useEffect( () => {
@@ -257,7 +267,12 @@ export default function VisualEditor( { styles } ) {
 							) }
 						{ ! 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 } />