@wordpress/edit-post 7.18.1-next.5a1d1283.0 → 7.19.0

package/src/components/preferences-modal/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -20,25 +20,52 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	describe( 'should match snapshot when the modal is active', () => {
+		afterEach( () => {
+			useViewportMatch.mockClear();
+		} );
 		it( 'large viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => true );
 			render( <EditPostPreferencesModal /> );
-			await screen.findByRole( 'tab', {
+			const tabPanel = await screen.findByRole( 'tabpanel', {
 				name: 'General',
-				selected: true,
 			} );
+
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
+				within( tabPanel ).getByLabelText(
+					'Include pre-publish checklist'
+				)
+			).toBeInTheDocument();
 		} );
-		it( 'small viewports', () => {
+		it( 'small viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => false );
 			render( <EditPostPreferencesModal /> );
+
+			// The tabpanel is not rendered in small viewports.
+			expect(
+				screen.queryByRole( 'tabpanel', {
+					name: 'General',
+				} )
+			).not.toBeInTheDocument();
+
+			const dialog = screen.getByRole( 'dialog', {
+				name: 'Preferences',
+			} );
+
+			// Checkbox toggle controls are not rendered in small viewports.
+			expect(
+				within( dialog ).queryByLabelText(
+					'Include pre-publish checklist'
+				)
+			).not.toBeInTheDocument();
+
+			// Individual preference nav buttons are rendered in small viewports.
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
+				within( dialog ).getByRole( 'button', {
+					name: 'General',
+				} )
+			).toBeInTheDocument();
 		} );
 	} );
 

package/src/components/start-page-options/index.js

@@ -97,14 +97,13 @@ function StartPageOptionsModal() {
 
 export default function StartPageOptions() {
 	const shouldEnableModal = useSelect( ( select ) => {
-		const { getEditedPostContent, isEditedPostSaveable } =
-			select( editorStore );
+		const { isCleanNewPost } = select( editorStore );
 		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
+
 		return (
-			! isEditedPostSaveable() &&
-			'' === getEditedPostContent() &&
 			! isEditingTemplate() &&
-			! isFeatureActive( 'welcomeGuide' )
+			! isFeatureActive( 'welcomeGuide' ) &&
+			isCleanNewPost()
 		);
 	}, [] );
 

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/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