@wordpress/edit-post 7.18.0 → 7.19.0

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

@@ -8,19 +8,13 @@ import classnames from 'classnames';
  */
 import { PostTitle, store as editorStore } from '@wordpress/editor';
 import {
-	WritingFlow,
 	BlockList,
 	BlockTools,
 	store as blockEditorStore,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypewriter as useTypewriter,
-	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
 	useSetting,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
-	__unstableIframe as Iframe,
 	__experimentalRecursionProvider as RecursionProvider,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -37,44 +31,15 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { LayoutStyle, useLayoutClasses, useLayoutStyles } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	LayoutStyle,
+	useLayoutClasses,
+	useLayoutStyles,
+	ExperimentalBlockCanvas: BlockCanvas,
+} = unlock( blockEditorPrivateApis );
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
-function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
-	const ref = useMouseMoveTypingReset();
-
-	if ( ! shouldIframe ) {
-		return (
-			<>
-				<EditorStyles styles={ styles } />
-				<WritingFlow
-					ref={ contentRef }
-					className="editor-styles-wrapper"
-					style={ { flex: '1', ...style } }
-					tabIndex={ -1 }
-				>
-					{ children }
-				</WritingFlow>
-			</>
-		);
-	}
-
-	return (
-		<Iframe
-			ref={ ref }
-			contentRef={ contentRef }
-			style={ { width: '100%', height: '100%', display: 'block' } }
-			name="editor-canvas"
-		>
-			<EditorStyles styles={ styles } />
-			{ children }
-		</Iframe>
-	);
-}
-
 /**
  * Given an array of nested blocks, find the first Post Content
  * block inside it, recursing through any nesting levels,
@@ -101,6 +66,15 @@ function getPostContentAttributes( blocks ) {
 	}
 }
 
+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,
@@ -123,9 +97,10 @@ export default function VisualEditor( { styles } ) {
 			select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const _isTemplateMode = isEditingTemplate();
+		const postTypeSlug = getCurrentPostType();
 		let _wrapperBlockName;
 
-		if ( getCurrentPostType() === 'wp_block' ) {
+		if ( postTypeSlug === 'wp_block' ) {
 			_wrapperBlockName = 'core/block';
 		} else if ( ! _isTemplateMode ) {
 			_wrapperBlockName = 'core/post-content';
@@ -133,6 +108,7 @@ export default function VisualEditor( { styles } ) {
 
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
+		const postType = select( coreStore ).getPostType( postTypeSlug );
 		const canEditTemplate = select( coreStore ).canUser(
 			'create',
 			'templates'
@@ -146,7 +122,7 @@ export default function VisualEditor( { styles } ) {
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
-				supportsTemplateMode && canEditTemplate
+				postType?.viewable && supportsTemplateMode && canEditTemplate
 					? getEditedPostTemplate()
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
@@ -214,14 +190,7 @@ export default function VisualEditor( { styles } ) {
 	}
 
 	const ref = useRef();
-	const contentRef = useMergeRefs( [
-		ref,
-		useClipboardHandler(),
-		useTypewriter(),
-		useBlockSelectionClearer(),
-	] );
-
-	const blockSelectionClearerRef = useBlockSelectionClearer();
+	const contentRef = useMergeRefs( [ ref, useTypewriter() ] );
 
 	// fallbackLayout is used if there is no Post Content,
 	// and for Post Title.
@@ -261,6 +230,26 @@ export default function VisualEditor( { styles } ) {
 		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(
@@ -305,6 +294,11 @@ export default function VisualEditor( { styles } ) {
 		? postContentLayout
 		: fallbackLayout;
 
+	const postEditorLayout =
+		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
+			? fallbackLayout
+			: blockListLayout;
+
 	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
@@ -355,17 +349,17 @@ export default function VisualEditor( { styles } ) {
 				animate={ {
 					padding: isTemplateMode ? '48px 48px 0' : 0,
 				} }
-				ref={ blockSelectionClearerRef }
 			>
 				<motion.div
 					animate={ animatedStyles }
 					initial={ desktopCanvasStyles }
 					className={ previewMode }
 				>
-					<MaybeIframe
+					<BlockCanvas
 						shouldIframe={ isToBeIframed }
 						contentRef={ contentRef }
 						styles={ styles }
+						height="100%"
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&
@@ -377,7 +371,7 @@ export default function VisualEditor( { styles } ) {
 									/>
 									<LayoutStyle
 										selector=".block-editor-block-list__layout.is-root-container"
-										layout={ blockListLayout }
+										layout={ postEditorLayout }
 									/>
 									{ align && (
 										<LayoutStyle css={ alignCSS } />
@@ -419,7 +413,7 @@ export default function VisualEditor( { styles } ) {
 								layout={ blockListLayout }
 							/>
 						</RecursionProvider>
-					</MaybeIframe>
+					</BlockCanvas>
 				</motion.div>
 			</motion.div>
 		</BlockTools>

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

@@ -67,3 +67,92 @@
 	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
 	flex-grow: 1;
 }
+
+// Fixed contextual toolbar
+@include editor-left(".edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
+
+.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
+
+	@include break-medium() {
+		// leave room for block inserter, undo and redo, list view
+		margin-left: $toolbar-margin;
+		// position on top of interface header
+		position: fixed;
+		top: $admin-bar-height;
+		// Don't fill up when empty
+		min-height: initial;
+		// remove the border
+		border-bottom: none;
+		// has to be flex for collapse button to fit
+		display: flex;
+
+		// Mimic the height of the parent, vertically align center, and provide a max-height.
+		height: $header-height;
+		align-items: center;
+
+
+		// on tablet viewports the toolbar is fixed
+		// on top of interface header and covers the whole header
+		// except for the inserter on the left
+		width: calc(100% - #{$toolbar-margin});
+
+		&.is-collapsed {
+			width: initial;
+		}
+
+		&:empty {
+			width: initial;
+		}
+
+		.is-fullscreen-mode & {
+			// leave room for block inserter, undo and redo, list view
+			// and some margin left
+			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+
+			top: 0;
+
+			&.is-collapsed {
+				width: initial;
+			}
+
+			&:empty {
+				width: initial;
+			}
+		}
+
+		.show-icon-labels & {
+			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
+			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
+
+			.is-fullscreen-mode & {
+				margin-left: $grid-unit * 18; // site hub, inserter and margin
+			}
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		width: auto;
+		.show-icon-labels & {
+			width: auto; //there are no undo, redo and list view buttons
+		}
+
+		.is-fullscreen-mode & {
+			// in full screen mode we need to account for
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
+		}
+	}
+}

package/src/editor.js

@@ -12,7 +12,6 @@ import {
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -156,25 +155,23 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	}
 
 	return (
-		<ShortcutProvider>
-			<SlotFillProvider>
-				<ExperimentalEditorProvider
-					settings={ editorSettings }
-					post={ post }
-					initialEdits={ initialEdits }
-					useSubRegistry={ false }
-					__unstableTemplate={ isTemplateMode ? template : undefined }
-					{ ...props }
-				>
-					<ErrorBoundary>
-						<CommandMenu />
-						<EditorInitialization postId={ postId } />
-						<Layout />
-					</ErrorBoundary>
-					<PostLockedModal />
-				</ExperimentalEditorProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<SlotFillProvider>
+			<ExperimentalEditorProvider
+				settings={ editorSettings }
+				post={ post }
+				initialEdits={ initialEdits }
+				useSubRegistry={ false }
+				__unstableTemplate={ isTemplateMode ? template : undefined }
+				{ ...props }
+			>
+				<ErrorBoundary>
+					<CommandMenu />
+					<EditorInitialization postId={ postId } />
+					<Layout />
+				</ErrorBoundary>
+				<PostLockedModal />
+			</ExperimentalEditorProvider>
+		</SlotFillProvider>
 	);
 }
 

package/src/hooks/commands/use-common-commands.js

@@ -33,6 +33,7 @@ export default function useCommonCommands() {
 		closeGeneralSidebar,
 		switchEditorMode,
 		setIsListViewOpened,
+		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { openModal } = useDispatch( interfaceStore );
 	const {
@@ -41,6 +42,7 @@ export default function useCommonCommands() {
 		isListViewOpen,
 		isPublishSidebarEnabled,
 		showBlockBreadcrumbs,
+		isDistractionFree,
 	} = useSelect( ( select ) => {
 		const { getEditorMode, isListViewOpened, isFeatureActive } =
 			select( editPostStore );
@@ -53,6 +55,10 @@ export default function useCommonCommands() {
 			isPublishSidebarEnabled:
 				select( editorStore ).isPublishSidebarEnabled(),
 			showBlockBreadcrumbs: isFeatureActive( 'showBlockBreadcrumbs' ),
+			isDistractionFree: select( preferencesStore ).get(
+				editPostStore.name,
+				'distractionFree'
+			),
 		};
 	}, [] );
 	const { toggle } = useDispatch( preferencesStore );
@@ -92,7 +98,7 @@ export default function useCommonCommands() {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-post', 'distractionFree' );
+			toggleDistractionFree();
 			close();
 		},
 	} );
@@ -131,6 +137,9 @@ export default function useCommonCommands() {
 		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'fixedToolbar' );
+			if ( isDistractionFree ) {
+				toggleDistractionFree();
+			}
 			close();
 		},
 	} );

package/src/store/actions.js

@@ -26,10 +26,17 @@ import { store as editPostStore } from '.';
  */
 export const openGeneralSidebar =
 	( name ) =>
-	( { registry } ) =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( isDistractionFree ) {
+			dispatch.toggleDistractionFree();
+		}
 		registry
 			.dispatch( interfaceStore )
 			.enableComplementaryArea( editPostStore.name, name );
+	};
 
 /**
  * Returns an action object signalling that the user closed the sidebar.
@@ -210,7 +217,7 @@ export const toggleFeature =
  */
 export const switchEditorMode =
 	( mode ) =>
-	( { registry } ) => {
+	( { dispatch, registry } ) => {
 		registry
 			.dispatch( preferencesStore )
 			.set( 'core/edit-post', 'editorMode', mode );
@@ -220,6 +227,15 @@ export const switchEditorMode =
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
 
+		if (
+			mode === 'text' &&
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-post', 'distractionFree' )
+		) {
+			dispatch.toggleDistractionFree();
+		}
+
 		const message =
 			mode === 'visual'
 				? __( 'Visual editor selected' )
@@ -479,12 +495,20 @@ export function setIsInserterOpened( value ) {
  * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
  * @return {Object} Action object.
  */
-export function setIsListViewOpened( isOpen ) {
-	return {
-		type: 'SET_IS_LIST_VIEW_OPENED',
-		isOpen,
+export const setIsListViewOpened =
+	( isOpen ) =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( isDistractionFree && isOpen ) {
+			dispatch.toggleDistractionFree();
+		}
+		dispatch( {
+			type: 'SET_IS_LIST_VIEW_OPENED',
+			isOpen,
+		} );
 	};
-}
 
 /**
  * Returns an action object used to switch to template editing.
@@ -590,3 +614,46 @@ export const initializeMetaBoxes =
 			type: 'META_BOXES_INITIALIZED',
 		} );
 	};
+
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ */
+export const toggleDistractionFree =
+	() =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'distractionFree' );
+		if ( ! isDistractionFree ) {
+			registry.batch( () => {
+				registry
+					.dispatch( preferencesStore )
+					.set( 'core/edit-post', 'fixedToolbar', false );
+				dispatch.setIsInserterOpened( false );
+				dispatch.setIsListViewOpened( false );
+				dispatch.closeGeneralSidebar();
+			} );
+		}
+		registry.batch( () => {
+			registry
+				.dispatch( preferencesStore )
+				.set(
+					'core/edit-post',
+					'distractionFree',
+					! isDistractionFree
+				);
+			registry
+				.dispatch( noticesStore )
+				.createInfoNotice(
+					isDistractionFree
+						? __( 'Distraction free off.' )
+						: __( 'Distraction free on.' ),
+					{
+						id: 'core/edit-post/distraction-free-mode/notice',
+						type: 'snackbar',
+					}
+				);
+		} );
+	};

package/src/store/test/actions.js

@@ -53,6 +53,20 @@ describe( 'actions', () => {
 		).toBeNull();
 	} );
 
+	it( 'openGeneralSidebar - should turn off distraction free mode when opening a general sidebar', () => {
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core/edit-post', 'distractionFree', true );
+		registry
+			.dispatch( editPostStore )
+			.openGeneralSidebar( 'edit-post/block' );
+		expect(
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-post', 'distractionFree' )
+		).toBe( false );
+	} );
+
 	it( 'toggleFeature', () => {
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
@@ -102,6 +116,17 @@ describe( 'actions', () => {
 				'text'
 			);
 		} );
+		it( 'should turn off distraction free mode when switching to code editor', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'distractionFree', true );
+			registry.dispatch( editPostStore ).switchEditorMode( 'text' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( false );
+		} );
 	} );
 
 	it( 'togglePinnedPluginItem', () => {
@@ -333,4 +358,54 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'toggleDistractionFree', () => {
+		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
+			// Enable everything that shouldn't be enabled in distraction free mode.
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'fixedToolbar', true );
+			registry.dispatch( editPostStore ).setIsListViewOpened( true );
+			registry
+				.dispatch( editPostStore )
+				.openGeneralSidebar( 'edit-post/block' );
+			// Initial state is falsy.
+			registry.dispatch( editPostStore ).toggleDistractionFree();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'fixedToolbar' )
+			).toBe( false );
+			expect( registry.select( editPostStore ).isListViewOpened() ).toBe(
+				false
+			);
+			expect( registry.select( editPostStore ).isInserterOpened() ).toBe(
+				false
+			);
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( editPostStore.name )
+			).toBeNull();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should turn off distraction free mode when opening the list view', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core/edit-post', 'distractionFree', true );
+			registry.dispatch( editPostStore ).setIsListViewOpened( true );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core/edit-post', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -14,7 +14,7 @@ import {
 	listViewPanel,
 } from '../reducer';
 
-import { setIsInserterOpened, setIsListViewOpened } from '../actions';
+import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'isSavingMetaBoxes', () => {
@@ -135,13 +135,19 @@ describe( 'state', () => {
 
 		it( 'should close the inserter when opening the list view panel', () => {
 			expect(
-				blockInserterPanel( true, setIsListViewOpened( true ) )
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
 			).toBe( false );
 		} );
 
 		it( 'should not change the state when closing the list view panel', () => {
 			expect(
-				blockInserterPanel( true, setIsListViewOpened( false ) )
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
 			).toBe( true );
 		} );
 	} );
@@ -156,12 +162,18 @@ describe( 'state', () => {
 		} );
 
 		it( 'should set the open state of the list view panel', () => {
-			expect( listViewPanel( false, setIsListViewOpened( true ) ) ).toBe(
-				true
-			);
-			expect( listViewPanel( true, setIsListViewOpened( false ) ) ).toBe(
-				false
-			);
+			expect(
+				listViewPanel( false, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
+			).toBe( true );
+			expect(
+				listViewPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
+			).toBe( false );
 		} );
 
 		it( 'should close the list view when opening the inserter panel', () => {

package/src/style.scss

@@ -93,15 +93,6 @@ body.js.block-editor-page {
 
 @include wordpress-admin-schemes();
 
-.interface-interface-skeleton__header .edit-post-header {
-	@supports (scrollbar-gutter: stable) {
-		// The scrollbar-gutter property ensures space is reserved for the scrollbar to appear,
-		// when scrollbars are set to be always visible. This ensure icons stay visually aligned.
-		scrollbar-gutter: stable;
-		overflow: hidden;
-	}
-}
-
 // 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