@wordpress/editor 14.34.0 → 14.35.0

package/src/components/collab-sidebar/index.js

@@ -31,10 +31,11 @@ import {
 } from './hooks';
 import { focusCommentThread } from './utils';
 import PostTypeSupportCheck from '../post-type-support-check';
+import { unlock } from '../../lock-unlock';
 
 function NotesSidebarContent( {
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	styles,
 	comments,
 	commentSidebarRef,
@@ -49,7 +50,7 @@ function NotesSidebarContent( {
 		<VStack
 			className="editor-collab-sidebar-panel"
 			style={ styles }
-			role="list"
+			role="tree"
 			spacing="3"
 			justify="flex-start"
 			ref={ ( node ) => {
@@ -59,14 +60,17 @@ function NotesSidebarContent( {
 					commentSidebarRef.current = node;
 				}
 			} }
+			aria-label={
+				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
+			}
 		>
 			<Comments
 				threads={ comments }
 				onEditComment={ onEdit }
 				onAddReply={ onCreate }
 				onCommentDelete={ onDelete }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
 				commentSidebarRef={ commentSidebarRef }
 				reflowComments={ reflowComments }
 				commentLastUpdated={ commentLastUpdated }
@@ -77,22 +81,34 @@ function NotesSidebarContent( {
 }
 
 function NotesSidebar( { postId, mode } ) {
-	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	// Enum: 'closed' | 'creating' | 'open'
+	const [ newNoteFormState, setNewNoteFormState ] = useState( 'closed' );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
 	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
-	const blockCommentId = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return clientId
-			? getBlockAttributes( clientId )?.metadata?.noteId
-			: null;
-	}, [] );
+	const { clientId, blockCommentId, isDistractionFree } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getSettings,
+			} = select( blockEditorStore );
+			const _clientId = getSelectedBlockClientId();
+			return {
+				clientId: _clientId,
+				blockCommentId: _clientId
+					? getBlockAttributes( _clientId )?.metadata?.noteId
+					: null,
+				isDistractionFree: getSettings().isDistractionFree,
+			};
+		},
+		[]
+	);
 
 	const {
 		resultComments,
@@ -102,7 +118,8 @@ function NotesSidebar( { postId, mode } ) {
 	} = useBlockComments( postId );
 	useEnableFloatingSidebar(
 		showFloatingSidebar &&
-			( unresolvedSortedThreads.length > 0 || showCommentBoard )
+			( unresolvedSortedThreads.length > 0 ||
+				newNoteFormState !== 'closed' )
 	);
 
 	// Get the global styles to set the background color of the sidebar.
@@ -113,6 +130,8 @@ function NotesSidebar( { postId, mode } ) {
 	const currentThread = blockCommentId
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
 		: null;
+	const showAllNotesSidebar =
+		resultComments.length > 0 || ! showFloatingSidebar;
 
 	async function openTheSidebar() {
 		const prevArea = await getActiveComplementaryArea( 'core' );
@@ -120,7 +139,7 @@ function NotesSidebar( { postId, mode } ) {
 
 		if ( currentThread?.status === 'approved' ) {
 			enableComplementaryArea( 'core', collabHistorySidebarName );
-		} else if ( ! activeNotesArea ) {
+		} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {
 			enableComplementaryArea(
 				'core',
 				showFloatingSidebar
@@ -135,40 +154,52 @@ function NotesSidebar( { postId, mode } ) {
 			return;
 		}
 
-		setShowCommentBoard( ! blockCommentId );
+		setNewNoteFormState( ! currentThread ? 'open' : 'closed' );
 		focusCommentThread(
-			blockCommentId,
+			currentThread?.id,
 			commentSidebarRef.current,
 			// Focus a comment thread when there's a selected block with a comment.
-			! blockCommentId ? 'textarea' : undefined
+			! currentThread ? 'textarea' : undefined
 		);
+		toggleBlockSpotlight( clientId, true );
+	}
+
+	if ( isDistractionFree ) {
+		return <AddCommentMenuItem isDistractionFree />;
 	}
 
 	return (
 		<>
-			{ blockCommentId && (
+			{ !! currentThread && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
 					onClick={ openTheSidebar }
 				/>
 			) }
 			<AddCommentMenuItem onClick={ openTheSidebar } />
-			<PluginSidebar
-				identifier={ collabHistorySidebarName }
-				name={ collabHistorySidebarName }
-				title={ __( 'Notes' ) }
-				icon={ commentIcon }
-				closeLabel={ __( 'Close Notes' ) }
-			>
-				<NotesSidebarContent
-					comments={ resultComments }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
-					commentSidebarRef={ commentSidebarRef }
-					reflowComments={ reflowComments }
-					commentLastUpdated={ commentLastUpdated }
-				/>
-			</PluginSidebar>
+			{ showAllNotesSidebar && (
+				<PluginSidebar
+					identifier={ collabHistorySidebarName }
+					name={ collabHistorySidebarName }
+					title={ __( 'All notes' ) }
+					header={
+						<h2 className="interface-complementary-area-header__title">
+							{ __( 'All notes' ) }
+						</h2>
+					}
+					icon={ commentIcon }
+					closeLabel={ __( 'Close Notes' ) }
+				>
+					<NotesSidebarContent
+						comments={ resultComments }
+						newNoteFormState={ newNoteFormState }
+						setNewNoteFormState={ setNewNoteFormState }
+						commentSidebarRef={ commentSidebarRef }
+						reflowComments={ reflowComments }
+						commentLastUpdated={ commentLastUpdated }
+					/>
+				</PluginSidebar>
+			) }
 			{ isLargeViewport && (
 				<PluginSidebar
 					isPinnable={ false }
@@ -180,8 +211,8 @@ function NotesSidebar( { postId, mode } ) {
 				>
 					<NotesSidebarContent
 						comments={ unresolvedSortedThreads }
-						showCommentBoard={ showCommentBoard }
-						setShowCommentBoard={ setShowCommentBoard }
+						newNoteFormState={ newNoteFormState }
+						setNewNoteFormState={ setNewNoteFormState }
 						commentSidebarRef={ commentSidebarRef }
 						reflowComments={ reflowComments }
 						commentLastUpdated={ commentLastUpdated }
@@ -197,11 +228,13 @@ function NotesSidebar( { postId, mode } ) {
 }
 
 export default function NotesSidebarContainer() {
-	const { postId, mode } = useSelect( ( select ) => {
-		const { getCurrentPostId, getRenderingMode } = select( editorStore );
+	const { postId, mode, editorMode } = useSelect( ( select ) => {
+		const { getCurrentPostId, getRenderingMode, getEditorMode } =
+			select( editorStore );
 		return {
 			postId: getCurrentPostId(),
 			mode: getRenderingMode(),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 
@@ -209,6 +242,11 @@ export default function NotesSidebarContainer() {
 		return null;
 	}
 
+	// Hide Notes sidebar in Code Editor mode since block-level commenting.
+	if ( editorMode === 'text' ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys="editor.notes">
 			<NotesSidebar postId={ postId } mode={ mode } />

package/src/components/collab-sidebar/style.scss

@@ -78,6 +78,7 @@
 	border-width: var(--wp-admin-border-width-focus);
 	border-style: solid;
 	padding: var(--wp-admin-border-width-focus);
+	background: $white;
 }
 
 .editor-collab-sidebar-panel__comment-status {
@@ -154,57 +155,32 @@
 	bottom: $grid-unit-10;
 }
 
-// Comment avatar indicators.
-.comment-avatar-indicator {
-	position: relative;
-	padding: 4px;
-	min-width: auto;
-	background: transparent;
-	border: none;
-}
-
-.comment-avatar-stack {
-	display: flex;
-	align-items: center;
-	position: relative;
-	height: $icon-size;
-}
-
 .comment-avatar {
 	width: $icon-size;
-	height: $icon-size;
 	border-radius: $radius-round;
-	border: 2px solid $white;
-	margin-left: -6px;
-	flex-shrink: 0;
+	margin-left: -12px;
+	border-width: var(--wp-admin-border-width-focus);
+	border-style: solid;
+	padding: var(--wp-admin-border-width-focus);
+	background: $white;
+	box-sizing: border-box;
 
 	&:first-child {
 		margin-left: 0;
-		border-color: #de6e55;
-	}
-
-	&:nth-child(2) {
-		border-color: #599637;
-	}
-
-	&:nth-child(3) {
-		border-color: #3858e9;
 	}
 }
 
-.comment-avatar-overflow {
-	width: fit-content;
-	height: $icon-size;
-	border-radius: 4rem;
-	padding: 0 4px;
-	background: #757575;
-	color: $white;
-	border: 2px solid $white;
-	margin-left: -6px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 10px;
-	font-weight: 600;
-	flex-shrink: 0;
+.show-icon-labels {
+	.comment-avatar-indicator {
+		width: auto;
+		// Hide the user avatars container when labels are set to display...
+		div {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+			font-size: $helptext-font-size;
+		}
+	}
 }

package/src/components/collab-sidebar/utils.js

@@ -109,8 +109,8 @@ export function focusCommentThread( commentId, container, additionalSelector ) {
 
 	// A thread without a commentId is a new comment thread.
 	const threadSelector = commentId
-		? `[role=listitem][id="comment-thread-${ commentId }"]`
-		: '[role=listitem]:not([id])';
+		? `[role=treeitem][id="comment-thread-${ commentId }"]`
+		: '[role=treeitem]:not([id])';
 	const selector = additionalSelector
 		? `${ threadSelector } ${ additionalSelector }`
 		: threadSelector;
@@ -129,6 +129,7 @@ export function focusCommentThread( commentId, container, additionalSelector ) {
 				resolve( container.querySelector( selector ) );
 			}
 		} );
+
 		observer.observe( container, {
 			childList: true,
 			subtree: true,

package/src/components/commands/index.js

@@ -315,24 +315,37 @@ const getEditedEntityContextualCommands = () =>
 
 const getPageContentFocusCommands = () =>
 	function usePageContentFocusCommands() {
-		const { onNavigateToEntityRecord, goBack, templateId, isPreviewMode } =
-			useSelect( ( select ) => {
-				const {
-					getRenderingMode,
-					getEditorSettings: _getEditorSettings,
-					getCurrentTemplateId,
-				} = unlock( select( editorStore ) );
-				const editorSettings = _getEditorSettings();
-				return {
-					isTemplateHidden: getRenderingMode() === 'post-only',
-					onNavigateToEntityRecord:
-						editorSettings.onNavigateToEntityRecord,
-					getEditorSettings: _getEditorSettings,
-					goBack: editorSettings.onNavigateToPreviousEntityRecord,
-					templateId: getCurrentTemplateId(),
-					isPreviewMode: editorSettings.isPreviewMode,
-				};
-			}, [] );
+		const {
+			onNavigateToEntityRecord,
+			goBack,
+			templateId,
+			isPreviewMode,
+			canEditTemplate,
+		} = useSelect( ( select ) => {
+			const {
+				getRenderingMode,
+				getEditorSettings: _getEditorSettings,
+				getCurrentTemplateId,
+			} = unlock( select( editorStore ) );
+			const editorSettings = _getEditorSettings();
+			const _templateId = getCurrentTemplateId();
+			return {
+				isTemplateHidden: getRenderingMode() === 'post-only',
+				onNavigateToEntityRecord:
+					editorSettings.onNavigateToEntityRecord,
+				getEditorSettings: _getEditorSettings,
+				goBack: editorSettings.onNavigateToPreviousEntityRecord,
+				templateId: _templateId,
+				isPreviewMode: editorSettings.isPreviewMode,
+				canEditTemplate:
+					!! _templateId &&
+					select( coreStore ).canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_template',
+						id: _templateId,
+					} ),
+			};
+		}, [] );
 		const { editedRecord: template, hasResolved } = useEntityRecord(
 			'postType',
 			'wp_template',
@@ -345,7 +358,7 @@ const getPageContentFocusCommands = () =>
 
 		const commands = [];
 
-		if ( templateId && hasResolved ) {
+		if ( templateId && hasResolved && canEditTemplate ) {
 			commands.push( {
 				name: 'core/switch-to-template-focus',
 				label: sprintf(

package/src/components/editor/index.js

@@ -49,6 +49,8 @@ function Editor( {
 				getResolutionError,
 				hasFinishedResolution,
 				getCurrentTheme,
+				__experimentalGetCurrentGlobalStylesId,
+				canUser,
 			} = select( coreStore );
 			const { getRenderingMode, getCurrentPostType } =
 				select( editorStore );
@@ -57,6 +59,14 @@ function Editor( {
 			const renderingMode = getRenderingMode();
 			const currentPostType = getCurrentPostType();
 			const _isBlockTheme = getCurrentTheme()?.is_block_theme;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const userCanEditGlobalStyles = globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: globalStylesId,
+				  } )
+				: false;
 
 			return {
 				post: getEntityRecord( ...postArgs ),
@@ -76,6 +86,7 @@ function Editor( {
 				isBlockTheme: _isBlockTheme,
 				showGlobalStyles:
 					_isBlockTheme &&
+					userCanEditGlobalStyles &&
 					( currentPostType === 'wp_template' ||
 						renderingMode === 'template-locked' ),
 			};
@@ -109,11 +120,11 @@ function Editor( {
 						{ extraContent }
 					</EditorInterface>
 					{ children }
-					<NotesSidebar />
 					<Sidebar
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }
 					/>
+					<NotesSidebar />
 					{ isBlockTheme && <GlobalStylesRenderer /> }
 					{ showGlobalStyles && <GlobalStylesSidebar /> }
 				</ExperimentalEditorProvider>

package/src/components/entities-saved-states/index.js

@@ -36,7 +36,7 @@ function identity( values ) {
  *
  * @param {Object}   props              The component props.
  * @param {Function} props.close        The function to close the dialog.
- * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
+ * @param {boolean=} props.renderDialog Whether to render the component with modal dialog behavior.
  * @param {string}   props.variant      Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
  *
  * @return {React.ReactNode} The rendered component.

package/src/components/global-styles/hooks.js

@@ -188,8 +188,8 @@ export function useGlobalStyles() {
 /**
  * Hook to get a style value from global styles
  *
- * @param {string} path      Style path (e.g., 'color.background')
- * @param {string} blockName Optional block name
+ * @param {string}  path      Style path (e.g., 'color.background')
+ * @param {string=} blockName Optional block name
  * @return {*} Style value
  */
 export function useStyle( path, blockName ) {
@@ -203,8 +203,8 @@ export function useStyle( path, blockName ) {
 /**
  * Hook to get a setting value from global styles
  *
- * @param {string} path      Setting path (e.g., 'spacing.blockGap')
- * @param {string} blockName Optional block name
+ * @param {string}  path      Setting path (e.g., 'spacing.blockGap')
+ * @param {string=} blockName Optional block name
  * @return {*} Setting value
  */
 export function useSetting( path, blockName ) {

package/src/components/more-menu/index.js

@@ -112,7 +112,7 @@ export default function MoreMenu() {
 						<ModeSwitcher />
 						<ActionItem.Slot
 							name="core/plugin-more-menu"
-							label={ __( 'Plugins' ) }
+							label={ __( 'Panels' ) }
 							fillProps={ { onClick: onClose } }
 						/>
 						<MenuGroup label={ __( 'Tools' ) }>

package/src/components/post-template/panel.js

@@ -53,14 +53,17 @@ export default function PostTemplatePanel() {
 		return canCreateTemplates;
 	}, [] );
 
-	const canViewTemplates = useSelect( ( select ) => {
-		return (
-			select( coreStore ).canUser( 'read', {
-				kind: 'postType',
-				name: 'wp_template',
-			} ) ?? false
-		);
-	}, [] );
+	const canViewTemplates = useSelect(
+		( select ) => {
+			return isVisible
+				? select( coreStore ).canUser( 'read', {
+						kind: 'postType',
+						name: 'wp_template',
+				  } )
+				: false;
+		},
+		[ isVisible ]
+	);
 
 	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
 		return <ClassicThemeControl />;

package/src/components/post-title/index.js

@@ -28,15 +28,23 @@ import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 import PostTypeSupportCheck from '../post-type-support-check';
 
-const PostTitle = forwardRef( ( _, forwardedRef ) => {
-	const { placeholder } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { titlePlaceholder } = getSettings();
+import { unlock } from '../../lock-unlock';
 
-		return {
-			placeholder: titlePlaceholder,
-		};
-	}, [] );
+const PostTitle = forwardRef( ( _, forwardedRef ) => {
+	const { placeholder, isEditingContentOnlySection } = useSelect(
+		( select ) => {
+			const { getSettings, getEditedContentOnlySection } = unlock(
+				select( blockEditorStore )
+			);
+			const { titlePlaceholder } = getSettings();
+
+			return {
+				placeholder: titlePlaceholder,
+				isEditingContentOnlySection: !! getEditedContentOnlySection(),
+			};
+		},
+		[]
+	);
 
 	const [ isSelected, setIsSelected ] = useState( false );
 
@@ -169,11 +177,15 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 		'is-selected': isSelected,
 	} );
 
+	// Because the title is within the editor iframe, we can't use scss styles.
+	// Instead use an inline style to dim the block when it's disabled.
+	const style = isEditingContentOnlySection ? { opacity: 0.2 } : undefined;
+
 	return (
 		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<h1
 			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
-			contentEditable
+			contentEditable={ ! isEditingContentOnlySection }
 			className={ className }
 			aria-label={ decodedPlaceholder }
 			role="textbox"
@@ -182,6 +194,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 			onBlur={ onUnselect }
 			onKeyDown={ onKeyDown }
 			onPaste={ onPaste }
+			style={ style }
 		/>
 		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);

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

@@ -116,7 +116,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									scope="core"
 									featureName="enableChoosePatternModal"
 									help={ __(
-										'Shows starter patterns when creating a new page.'
+										'Pick from starter content when creating a new page.'
 									) }
 									label={ __( 'Show starter patterns' ) }
 								/>

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Flex, FlexItem, Modal, ToggleControl } from '@wordpress/components';
+import { Flex, FlexItem, Modal, CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import {
@@ -119,16 +119,15 @@ function StartPageOptionsModal( { onClose } ) {
 			</div>
 			<Flex
 				className="editor-start-page-options__modal__actions"
-				justify="flex-end"
+				justify="flex-start"
 				expanded={ false }
 			>
 				<FlexItem>
-					<ToggleControl
+					<CheckboxControl
 						__nextHasNoMarginBottom
 						checked={ showStartPatterns }
-						label={ __( 'Show starter patterns' ) }
-						help={ __(
-							'Shows starter patterns when creating a new page.'
+						label={ __(
+							'Always show starter patterns for new pages'
 						) }
 						onChange={ ( newValue ) => {
 							setShowStartPatterns( newValue );

package/src/components/start-page-options/style.scss

@@ -3,7 +3,7 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
-$actions-height: 92px;
+$actions-height: 72px;
 
 .editor-start-page-options__modal {
 	.editor-start-page-options__modal__actions {