@wordpress/edit-post 7.22.0 → 7.24.0

package/src/components/header/style.scss

@@ -6,6 +6,7 @@
 	align-items: center;
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
+	justify-content: space-between;
 
 	// Make toolbar sticky on larger breakpoints
 	@include break-zoomed-in {
@@ -33,7 +34,15 @@
 
 .edit-post-header__toolbar {
 	display: flex;
-	flex-grow: 1;
+	// Allow this area to shrink to fit the toolbar buttons.
+	flex-shrink: 8;
+	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
+	flex-grow: 3;
+	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
+	overflow: hidden;
+	// Leave enough room for the focus ring to show.
+	padding: 2px 0;
+	align-items: center;
 
 	.table-of-contents {
 		display: none;
@@ -42,12 +51,32 @@
 			display: block;
 		}
 	}
+
+	.block-editor-block-contextual-toolbar.is-fixed {
+		border: none;
+	}
+
+	.selected-block-tools-wrapper {
+		overflow-x: hidden;
+
+		&.is-collapsed {
+			display: none;
+		}
+	}
+}
+
+.edit-post-header__block-tools-toggle {
+	margin-left: 2px; // Allow focus ring to be fully visible
 }
 
 .edit-post-header__center {
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;
+
+	&.is-collapsed {
+		display: none;
+	}
 }
 
 /**
@@ -57,7 +86,7 @@
 .edit-post-header__settings {
 	display: inline-flex;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	padding-right: $grid-unit-05;
 
 	@include break-small () {

package/src/components/header/writing-menu/index.js

@@ -31,7 +31,7 @@ function WritingMenu() {
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-post', 'fixedToolbar', false );
+			setPreference( 'core/edit-post', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();

package/src/components/keyboard-shortcuts/index.js

@@ -18,7 +18,6 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getBlockSelectionStart } = useSelect( blockEditorStore );
 	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
 		useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
@@ -38,8 +37,12 @@ function KeyboardShortcuts() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockName,
+		getSelectedBlockClientId,
+		getBlockAttributes,
+		getBlockSelectionStart,
+	} = useSelect( blockEditorStore );
 
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();

package/src/components/layout/style.scss

@@ -99,14 +99,3 @@
 .edit-post-layout .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }
-
-.edit-post-layout.has-fixed-toolbar {
-	// making the header be lower than the content
-	// so the fixed toolbar can be positioned on top of it
-	// but only on desktop
-	@include break-medium() {
-		.interface-interface-skeleton__header:not(:focus-within) {
-			z-index: 19;
-		}
-	}
-}

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

@@ -70,7 +70,7 @@ export default function EditPostPreferencesModal() {
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
+		setPreference( 'core/edit-post', 'fixedToolbar', true );
 		setIsInserterOpened( false );
 		setIsListViewOpened( false );
 		closeGeneralSidebar();

package/src/components/sidebar/post-pending-status/index.js

@@ -1,18 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import {
 	PostPendingStatus as PostPendingStatusForm,
 	PostPendingStatusCheck,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostPendingStatus() {
 	return (
 		<PostPendingStatusCheck>
-			<PanelRow>
+			<PostPanelRow>
 				<PostPendingStatusForm />
-			</PanelRow>
+			</PostPanelRow>
 		</PostPendingStatusCheck>
 	);
 }

package/src/components/sidebar/post-status/index.js

@@ -7,23 +7,26 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
+import {
+	PostAuthorPanel,
+	PostSchedulePanel,
+	PostSwitchToDraftButton,
+	PostSyncStatus,
+	PostURLPanel,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
-import PostSchedule from '../post-schedule';
 import PostSticky from '../post-sticky';
-import PostAuthor from '../post-author';
 import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
 import PostTemplate from '../post-template';
-import PostURL from '../post-url';
 
 /**
  * Module Constants
@@ -58,15 +61,15 @@ export default function PostStatus() {
 				{ ( fills ) => (
 					<>
 						<PostVisibility />
-						<PostSchedule />
+						<PostSchedulePanel />
 						<PostTemplate />
-						<PostURL />
+						<PostURLPanel />
+						<PostSyncStatus />
 						<PostSticky />
 						<PostPendingStatus />
 						<PostFormat />
 						<PostSlug />
-						<PostAuthor />
-						<PostSyncStatus />
+						<PostAuthorPanel />
 						{ fills }
 						<HStack
 							style={ {

package/src/components/sidebar/post-sticky/index.js

@@ -1,18 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import {
 	PostSticky as PostStickyForm,
 	PostStickyCheck,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostSticky() {
 	return (
 		<PostStickyCheck>
-			<PanelRow>
+			<PostPanelRow>
 				<PostStickyForm />
-			</PanelRow>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }

package/src/components/sidebar/post-template/index.js

@@ -2,10 +2,13 @@
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -13,6 +16,9 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import PostTemplateForm from './form';
 import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 export default function PostTemplate() {
 	// Use internal state instead of a ref to make sure that the component
@@ -53,11 +59,9 @@ export default function PostTemplate() {
 	}
 
 	return (
-		<PanelRow className="edit-post-post-template" ref={ setPopoverAnchor }>
-			<span>{ __( 'Template' ) }</span>
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
 			<Dropdown
 				popoverProps={ popoverProps }
-				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
 				focusOnMount
 				renderToggle={ ( { isOpen, onToggle } ) => (
@@ -70,7 +74,7 @@ export default function PostTemplate() {
 					<PostTemplateForm onClose={ onClose } />
 				) }
 			/>
-		</PanelRow>
+		</PostPanelRow>
 	);
 }
 

package/src/components/sidebar/post-template/style.scss

@@ -1,19 +1,3 @@
-.edit-post-post-template {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0;
-	}
-}
-
-.edit-post-post-template__dropdown {
-	max-width: 55%;
-}
-
 .components-button.edit-post-post-template__toggle {
 	display: inline-block;
 	width: 100%;

package/src/components/sidebar/post-visibility/index.js

@@ -2,15 +2,23 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import {
 	PostVisibility as PostVisibilityForm,
 	PostVisibilityLabel,
 	PostVisibilityCheck,
 	usePostVisibilityLabel,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useMemo, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostVisibility() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -29,11 +37,10 @@ export function PostVisibility() {
 	return (
 		<PostVisibilityCheck
 			render={ ( { canEdit } ) => (
-				<PanelRow
+				<PostPanelRow
+					label={ __( 'Visibility' ) }
 					ref={ setPopoverAnchor }
-					className="edit-post-post-visibility"
 				>
-					<span>{ __( 'Visibility' ) }</span>
 					{ ! canEdit && (
 						<span>
 							<PostVisibilityLabel />
@@ -55,7 +62,7 @@ export function PostVisibility() {
 							) }
 						/>
 					) }
-				</PanelRow>
+				</PostPanelRow>
 			) }
 		/>
 	);

package/src/components/sidebar/post-visibility/style.scss

@@ -1,15 +1,3 @@
-.edit-post-post-visibility {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0;
-	}
-}
-
 .edit-post-post-visibility__dialog .editor-post-visibility {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;

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

@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -62,19 +62,11 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	);
 }
 
-function StartPageOptionsModal() {
-	const [ modalState, setModalState ] = useState( 'initial' );
+function StartPageOptionsModal( { onClose } ) {
 	const startPatterns = useStartPatterns();
 	const hasStartPattern = startPatterns.length > 0;
-	const shouldOpenModal = hasStartPattern && modalState === 'initial';
 
-	useEffect( () => {
-		if ( shouldOpenModal ) {
-			setModalState( 'open' );
-		}
-	}, [ shouldOpenModal ] );
-
-	if ( modalState !== 'open' ) {
+	if ( ! hasStartPattern ) {
 		return null;
 	}
 
@@ -83,12 +75,12 @@ function StartPageOptionsModal() {
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			isFullScreen
-			onRequestClose={ () => setModalState( 'closed' ) }
+			onRequestClose={ onClose }
 		>
 			<div className="edit-post-start-page-options__modal-content">
 				<PatternSelection
 					blockPatterns={ startPatterns }
-					onChoosePattern={ () => setModalState( 'closed' ) }
+					onChoosePattern={ onClose }
 				/>
 			</div>
 		</Modal>
@@ -96,6 +88,7 @@ function StartPageOptionsModal() {
 }
 
 export default function StartPageOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
 	const shouldEnableModal = useSelect( ( select ) => {
 		const { isCleanNewPost } = select( editorStore );
 		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
@@ -107,9 +100,9 @@ export default function StartPageOptions() {
 		);
 	}, [] );
 
-	if ( ! shouldEnableModal ) {
+	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}
 
-	return <StartPageOptionsModal />;
+	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
 }

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

@@ -3,13 +3,14 @@
  */
 import {
 	PostTextEditor,
-	PostTitle,
+	PostTitleRaw,
 	store as editorStore,
 } from '@wordpress/editor';
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +23,23 @@ export default function TextEditor() {
 	}, [] );
 	const { switchEditorMode } = useDispatch( editPostStore );
 
+	const { isWelcomeGuideVisible } = useSelect( ( select ) => {
+		const { isFeatureActive } = select( editPostStore );
+
+		return {
+			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
+		};
+	}, [] );
+
+	const titleRef = useRef();
+
+	useEffect( () => {
+		if ( isWelcomeGuideVisible ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ isWelcomeGuideVisible ] );
+
 	return (
 		<div className="edit-post-text-editor">
 			{ isRichEditingEnabled && (
@@ -37,7 +55,7 @@ export default function TextEditor() {
 				</div>
 			) }
 			<div className="edit-post-text-editor__body">
-				<PostTitle />
+				<PostTitleRaw ref={ titleRef } />
 				<PostTextEditor />
 			</div>
 		</div>

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

@@ -5,7 +5,8 @@
 	flex-grow: 1;
 
 	// Post title.
-	.editor-post-title {
+	.editor-post-title:not(.is-raw-text),
+	.editor-post-title.is-raw-text textarea {
 		max-width: none;
 		line-height: $default-line-height;
 
@@ -14,6 +15,7 @@
 		font-weight: normal;
 
 		border: $border-width solid $gray-600;
+		border-radius: 0;
 
 		// Same padding as body.
 		padding: $grid-unit-20;

package/src/components/view-link/index.js

@@ -8,18 +8,28 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
 export default function ViewLink() {
-	const { permalink, isPublished, label } = useSelect( ( select ) => {
-		// Grab post type to retrieve the view_item label.
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
+	const { permalink, isPublished, label, showIconLabels } = useSelect(
+		( select ) => {
+			// Grab post type to retrieve the view_item label.
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
 
-		return {
-			permalink: select( editorStore ).getPermalink(),
-			isPublished: select( editorStore ).isCurrentPostPublished(),
-			label: postType?.labels.view_item,
-		};
-	}, [] );
+			return {
+				permalink: select( editorStore ).getPermalink(),
+				isPublished: select( editorStore ).isCurrentPostPublished(),
+				label: postType?.labels.view_item,
+				showIconLabels:
+					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			};
+		},
+		[]
+	);
 
 	// Only render the view button if the post is published and has a permalink.
 	if ( ! isPublished || ! permalink ) {
@@ -32,6 +42,7 @@ export default function ViewLink() {
 			label={ label || __( 'View post' ) }
 			href={ permalink }
 			target="_blank"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 }

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

@@ -411,6 +411,13 @@ export default function VisualEditor( { styles } ) {
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								layout={ blockListLayout }
+								dropZoneElement={
+									// When iframed, pass in the html element of the iframe to
+									// ensure the drop zone extends to the edges of the iframe.
+									isToBeIframed
+										? ref.current?.parentNode
+										: ref.current
+								}
 							/>
 						</RecursionProvider>
 					</BlockCanvas>

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

@@ -21,7 +21,6 @@
 		font-size: $default-font-size;
 		padding: 6px 12px;
 
-		&.is-tertiary,
 		&.has-icon {
 			padding: 6px;
 		}
@@ -67,92 +66,3 @@
 	// 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/store/actions.js

@@ -630,7 +630,7 @@ export const toggleDistractionFree =
 			registry.batch( () => {
 				registry
 					.dispatch( preferencesStore )
-					.set( 'core/edit-post', 'fixedToolbar', false );
+					.set( 'core/edit-post', 'fixedToolbar', true );
 				dispatch.setIsInserterOpened( false );
 				dispatch.setIsListViewOpened( false );
 				dispatch.closeGeneralSidebar();

package/src/store/test/actions.js

@@ -375,7 +375,7 @@ describe( 'actions', () => {
 				registry
 					.select( preferencesStore )
 					.get( 'core/edit-post', 'fixedToolbar' )
-			).toBe( false );
+			).toBe( true );
 			expect( registry.select( editPostStore ).isListViewOpened() ).toBe(
 				false
 			);