@wordpress/editor 14.34.1-next.2f1c7c01b.0 → 14.35.0

package/src/components/collab-sidebar/add-comment.js

@@ -36,12 +36,10 @@ export function AddComment( {
 	y,
 	refs,
 } ) {
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
+	const { clientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
 		return {
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.metadata?.noteId,
+			clientId: getSelectedBlockClientId(),
 		};
 	}, [] );
 	const blockElement = useBlockElement( clientId );
@@ -53,11 +51,7 @@ export function AddComment( {
 		toggleBlockSpotlight( clientId, false );
 	};
 
-	if (
-		newNoteFormState !== 'open' ||
-		! clientId ||
-		undefined !== blockCommentId
-	) {
+	if ( newNoteFormState !== 'open' || ! clientId ) {
 		return null;
 	}
 

package/src/components/collab-sidebar/comment-form.js

@@ -16,6 +16,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId, useDebounce } from '@wordpress/compose';
+import { isKeyboardEvent } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -50,6 +51,12 @@ function CommentForm( {
 		<VStack
 			className="editor-collab-sidebar-panel__comment-form"
 			spacing="4"
+			as="form"
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				onSubmit( inputComment );
+				setInputComment( '' );
+			} }
 		>
 			<VisuallyHidden as="label" htmlFor={ inputId }>
 				{ labelText ?? __( 'Note' ) }
@@ -63,6 +70,14 @@ function CommentForm( {
 				} }
 				rows={ 1 }
 				maxRows={ 20 }
+				onKeyDown={ ( event ) => {
+					if (
+						isKeyboardEvent.primary( event, 'Enter' ) &&
+						! isDisabled
+					) {
+						event.target.parentNode.requestSubmit();
+					}
+				} }
 			/>
 			<HStack spacing="2" justify="flex-end" wrap>
 				<Button size="compact" variant="tertiary" onClick={ onCancel }>
@@ -72,10 +87,7 @@ function CommentForm( {
 					size="compact"
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => {
-						onSubmit( inputComment );
-						setInputComment( '' );
-					} }
+					type="submit"
 					disabled={ isDisabled }
 				>
 					<Truncate>{ submitButtonText }</Truncate>

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

@@ -66,6 +66,9 @@ export function Comments( {
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
 	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
+	const { selectBlock, toggleBlockSpotlight } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
 		useSelect( ( select ) => {
 			const {
@@ -93,11 +96,7 @@ export function Comments( {
 		// add a "new note" entry to the threads. This special thread type
 		// gets sorted and floated like regular threads, but shows an AddComment
 		// component instead of a regular comment thread.
-		if (
-			isFloating &&
-			newNoteFormState === 'open' &&
-			undefined === blockCommentId
-		) {
+		if ( isFloating && newNoteFormState === 'open' ) {
 			// Insert the new note entry at the correct location for its blockId.
 			const newNoteThread = {
 				id: 'new-note-thread',
@@ -124,7 +123,6 @@ export function Comments( {
 		noteThreads,
 		isFloating,
 		newNoteFormState,
-		blockCommentId,
 		selectedBlockClientId,
 		orderedBlockIds,
 	] );
@@ -160,8 +158,9 @@ export function Comments( {
 	// Auto-select the related comment thread when a block is selected.
 	useEffect( () => {
 		// Fallback to 'new-note-thread' when showing the comment board for a new note.
-		const fallback = newNoteFormState === 'open' ? 'new-note-thread' : null;
-		setSelectedThread( blockCommentId ?? fallback );
+		setSelectedThread(
+			newNoteFormState === 'open' ? 'new-note-thread' : blockCommentId
+		);
 	}, [ blockCommentId, newNoteFormState ] );
 
 	const setBlockRef = useCallback( ( id, blockRef ) => {
@@ -314,24 +313,96 @@ export function Comments( {
 		setCanvasMinHeight,
 	] );
 
+	const handleThreadNavigation = ( event, thread, isSelected ) => {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const currentIndex = threads.findIndex( ( t ) => t.id === thread.id );
+
+		if (
+			( event.key === 'Enter' || event.key === 'ArrowRight' ) &&
+			event.currentTarget === event.target &&
+			! isSelected
+		) {
+			// Expand thread.
+			setNewNoteFormState( 'closed' );
+			setSelectedThread( thread.id );
+			if ( !! thread.blockClientId ) {
+				// Pass `null` as the second parameter to prevent focusing the block.
+				selectBlock( thread.blockClientId, null );
+				toggleBlockSpotlight( thread.blockClientId, true );
+			}
+		} else if (
+			( ( event.key === 'Enter' || event.key === 'ArrowLeft' ) &&
+				event.currentTarget === event.target &&
+				isSelected ) ||
+			event.key === 'Escape'
+		) {
+			// Collapse thread.
+			setSelectedThread( null );
+			setNewNoteFormState( 'closed' );
+			if ( thread.blockClientId ) {
+				toggleBlockSpotlight( thread.blockClientId, false );
+			}
+			focusCommentThread( thread.id, commentSidebarRef.current );
+		} else if (
+			event.key === 'ArrowDown' &&
+			currentIndex < threads.length - 1 &&
+			event.currentTarget === event.target
+		) {
+			// Move to the next thread.
+			const nextThread = threads[ currentIndex + 1 ];
+			focusCommentThread( nextThread.id, commentSidebarRef.current );
+		} else if (
+			event.key === 'ArrowUp' &&
+			currentIndex > 0 &&
+			event.currentTarget === event.target
+		) {
+			// Move to the previous thread.
+			const prevThread = threads[ currentIndex - 1 ];
+			focusCommentThread( prevThread.id, commentSidebarRef.current );
+		} else if (
+			event.key === 'Home' &&
+			event.currentTarget === event.target
+		) {
+			// Move to the first thread.
+			focusCommentThread( threads[ 0 ].id, commentSidebarRef.current );
+		} else if (
+			event.key === 'End' &&
+			event.currentTarget === event.target
+		) {
+			// Move to the last thread.
+			focusCommentThread(
+				threads[ threads.length - 1 ].id,
+				commentSidebarRef.current
+			);
+		}
+	};
+
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
-	// This should no longer happen since https://github.com/WordPress/gutenberg/pull/72872.
+	// A special case for `template-locked` mode - https://github.com/WordPress/gutenberg/pull/72646.
 	if ( ! hasThreads && ! isFloating ) {
-		return null;
+		return (
+			<AddComment
+				onSubmit={ onAddReply }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
+				commentSidebarRef={ commentSidebarRef }
+			/>
+		);
 	}
 
 	return (
 		<>
-			{ ! isFloating &&
-				newNoteFormState === 'open' &&
-				undefined === blockCommentId && (
-					<AddComment
-						onSubmit={ onAddReply }
-						newNoteFormState={ newNoteFormState }
-						setNewNoteFormState={ setNewNoteFormState }
-						commentSidebarRef={ commentSidebarRef }
-					/>
-				) }
+			{ ! isFloating && newNoteFormState === 'open' && (
+				<AddComment
+					onSubmit={ onAddReply }
+					newNoteFormState={ newNoteFormState }
+					setNewNoteFormState={ setNewNoteFormState }
+					commentSidebarRef={ commentSidebarRef }
+				/>
+			) }
 			{ threads.map( ( thread ) => (
 				<Thread
 					key={ thread.id }
@@ -351,6 +422,13 @@ export function Comments( {
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
 					newNoteFormState={ newNoteFormState }
+					onKeyDown={ ( event ) =>
+						handleThreadNavigation(
+							event,
+							thread,
+							selectedThread === thread.id
+						)
+					}
 				/>
 			) ) }
 		</>
@@ -374,6 +452,7 @@ function Thread( {
 	selectedThread,
 	commentLastUpdated,
 	newNoteFormState,
+	onKeyDown,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -470,27 +549,7 @@ function Thread( {
 			onMouseLeave={ onMouseLeave }
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
-			onKeyDown={ ( event ) => {
-				if ( event.defaultPrevented ) {
-					return;
-				}
-				// Expand or Collapse thread.
-				if (
-					event.key === 'Enter' &&
-					event.currentTarget === event.target
-				) {
-					if ( isSelected ) {
-						unselectThread();
-					} else {
-						handleCommentSelect();
-					}
-				}
-				// Collapse thread and focus the thread.
-				if ( event.key === 'Escape' ) {
-					unselectThread();
-					focusCommentThread( thread.id, commentSidebarRef.current );
-				}
-			} }
+			onKeyDown={ onKeyDown }
 			tabIndex={ 0 }
 			role="treeitem"
 			aria-label={ ariaLabel }

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

@@ -154,12 +154,12 @@ function NotesSidebar( { postId, mode } ) {
 			return;
 		}
 
-		setNewNoteFormState( ! blockCommentId ? 'open' : 'closed' );
+		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 );
 	}
@@ -170,7 +170,7 @@ function NotesSidebar( { postId, mode } ) {
 
 	return (
 		<>
-			{ blockCommentId && (
+			{ !! currentThread && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
 					onClick={ openTheSidebar }

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

@@ -169,3 +169,18 @@
 		margin-left: 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/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' ),
 			};

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/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/visual-editor/index.js

@@ -38,6 +38,8 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
+import { usePaddingAppender } from './use-padding-appender';
+import { useEditContentOnlySectionExit } from './use-edit-content-only-section-exit';
 
 const {
 	LayoutStyle,
@@ -350,6 +352,10 @@ function VisualEditor( {
 		return canvasMinHeight + scrollTop;
 	}, [ canvasMinHeight ] );
 
+	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		! isPreview && renderingMode === 'post-only' && ! isDesignPostType
+	);
+
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
@@ -366,6 +372,7 @@ function VisualEditor( {
 					// which isn't a requirement in auto resize mode.
 					enableResizing ? 'min-height:0!important;' : ''
 				}}
+				${ paddingStyle ? paddingStyle : '' }
 				${
 					enableResizing
 						? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}`
@@ -375,7 +382,7 @@ function VisualEditor( {
 				// color to the iframe HTML element to match the background color of the editor canvas.
 			},
 		];
-	}, [ styles, enableResizing, calculatedMinHeight ] );
+	}, [ styles, enableResizing, calculatedMinHeight, paddingStyle ] );
 
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
@@ -389,6 +396,8 @@ function VisualEditor( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),
 		useZoomOutModeExit(),
+		paddingAppenderRef,
+		useEditContentOnlySectionExit(),
 	] );
 
 	return (

package/src/components/visual-editor/use-edit-content-only-section-exit.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Allows content only section editing to be exited by clicking outside of the
+ * edited blocks.
+ */
+export function useEditContentOnlySectionExit() {
+	const { getEditedContentOnlySection } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	return useRefEffect(
+		( node ) => {
+			function onClick( event ) {
+				const editedContentOnlySection = getEditedContentOnlySection();
+				if ( ! editedContentOnlySection ) {
+					return;
+				}
+
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					// If the user clicks outside the edited block, stop editing.
+					if (
+						! event.target.closest(
+							`[data-block="${ editedContentOnlySection }"]`
+						)
+					) {
+						stopEditingContentOnlySection();
+					}
+				}
+			}
+
+			node.addEventListener( 'click', onClick );
+
+			return () => {
+				node.removeEventListener( 'click', onClick );
+			};
+		},
+		[ getEditedContentOnlySection, stopEditingContentOnlySection ]
+	);
+}