@wordpress/editor 14.30.1-next.a730c9c8c.0 → 14.31.1-next.f56bd8138.0

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML } from '@wordpress/element';
+import { useState, RawHTML, useEffect, useMemo } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -14,17 +14,46 @@ import {
 	Button,
 	DropdownMenu,
 } from '@wordpress/components';
+
 import { published, moreVertical } from '@wordpress/icons';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, _x, sprintf, _n } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 
+const { useBlockElement } = unlock( blockEditorPrivateApis );
+
+/**
+ * Finds the first block that has the specified comment ID.
+ *
+ * @param {string} commentId - The comment ID to search for.
+ * @param {Array}  blockList - The list of blocks to search through.
+ * @return {string|null} The client ID of the found block, or null if not found.
+ */
+const findBlockByCommentId = ( commentId, blockList ) => {
+	for ( const block of blockList ) {
+		if ( block.attributes?.blockCommentId === commentId ) {
+			return block.clientId;
+		}
+		if ( block.innerBlocks ) {
+			const found = findBlockByCommentId( commentId, block.innerBlocks );
+			if ( found ) {
+				return found;
+			}
+		}
+	}
+	return null;
+};
+
 /**
  * Renders the Comments component.
  *
@@ -49,27 +78,36 @@ export function Comments( {
 	showCommentBoard,
 	setShowCommentBoard,
 } ) {
-	const { blockCommentId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
+	const { blockCommentId, blocks } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId, getBlocks } =
 			select( blockEditorStore );
 		const _clientId = getSelectedBlockClientId();
-
 		return {
 			blockCommentId: _clientId
 				? getBlockAttributes( _clientId )?.blockCommentId
 				: null,
+			blocks: getBlocks(),
 		};
 	}, [] );
 
-	const [ focusThread, setFocusThread ] = useState(
-		showCommentBoard && blockCommentId ? blockCommentId : null
-	);
+	const { flashBlock } = useDispatch( blockEditorStore );
 
 	const clearThreadFocus = () => {
 		setFocusThread( null );
 		setShowCommentBoard( false );
 	};
 
+	const [ focusThread, setFocusThread ] = useState(
+		showCommentBoard && blockCommentId ? blockCommentId : null
+	);
+
+	useEffect( () => {
+		// Highlight comment when block is selected.
+		if ( blockCommentId && ! focusThread ) {
+			setFocusThread( blockCommentId );
+		}
+	}, [ blockCommentId, focusThread, blocks, setFocusThread ] );
+
 	return (
 		<>
 			{
@@ -91,34 +129,22 @@ export function Comments( {
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread ) => (
-					<VStack
+					<Thread
 						key={ thread.id }
-						className={ clsx(
-							'editor-collab-sidebar-panel__thread',
-							{
-								'editor-collab-sidebar-panel__active-thread':
-									blockCommentId &&
-									blockCommentId === thread.id,
-								'editor-collab-sidebar-panel__focus-thread':
-									focusThread && focusThread === thread.id,
-							}
-						) }
-						id={ thread.id }
-						spacing="3"
-						onClick={ () => setFocusThread( thread.id ) }
-					>
-						<Thread
-							thread={ thread }
-							onAddReply={ onAddReply }
-							onCommentDelete={ onCommentDelete }
-							onCommentResolve={ onCommentResolve }
-							onCommentReopen={ onCommentReopen }
-							onEditComment={ onEditComment }
-							isFocused={ focusThread === thread.id }
-							clearThreadFocus={ clearThreadFocus }
-							setFocusThread={ setFocusThread }
-						/>
-					</VStack>
+						thread={ thread }
+						onAddReply={ onAddReply }
+						onCommentDelete={ onCommentDelete }
+						onCommentResolve={ onCommentResolve }
+						onCommentReopen={ onCommentReopen }
+						onEditComment={ onEditComment }
+						isFocused={ focusThread === thread.id }
+						clearThreadFocus={ clearThreadFocus }
+						setFocusThread={ setFocusThread }
+						blockCommentId={ blockCommentId }
+						blocks={ blocks }
+						flashBlock={ flashBlock }
+						setShowCommentBoard={ setShowCommentBoard }
+					/>
 				) ) }
 		</>
 	);
@@ -134,9 +160,41 @@ function Thread( {
 	isFocused,
 	clearThreadFocus,
 	setFocusThread,
+	blocks,
+	flashBlock,
+	setShowCommentBoard,
 } ) {
+	// Find first block that has this comment ID - run at component root level.
+	const relatedBlock = useMemo( () => {
+		if ( ! thread.id || ! blocks ) {
+			return null;
+		}
+		return findBlockByCommentId( thread.id, blocks );
+	}, [ thread.id, blocks ] );
+
+	const relatedBlockElement = useBlockElement( relatedBlock );
+
+	const handleCommentSelect = ( threadId ) => {
+		setShowCommentBoard( false );
+		setFocusThread( threadId );
+		if ( relatedBlock && relatedBlockElement ) {
+			relatedBlockElement.scrollIntoView( {
+				behavior: 'instant',
+				block: 'center',
+			} );
+			flashBlock( relatedBlock );
+		}
+	};
+
 	return (
-		<>
+		<VStack
+			className={ clsx( 'editor-collab-sidebar-panel__thread', {
+				'editor-collab-sidebar-panel__focus-thread': isFocused,
+			} ) }
+			id={ thread.id }
+			spacing="3"
+			onClick={ () => handleCommentSelect( thread.id ) }
+		>
 			<CommentBoard
 				thread={ thread }
 				onResolve={ onCommentResolve }
@@ -230,7 +288,7 @@ function Thread( {
 					</VStack>
 				</VStack>
 			) }
-		</>
+		</VStack>
 	);
 }
 

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

@@ -257,7 +257,8 @@ export default function CollabSidebar() {
 	const { records: threads, totalPages } = useEntityRecords(
 		'root',
 		'comment',
-		queryArgs
+		queryArgs,
+		{ enabled: !! postId && typeof postId === 'number' }
 	);
 
 	const hasMoreComments = totalPages && totalPages > 1;
@@ -377,6 +378,7 @@ export default function CollabSidebar() {
 				// translators: Comments sidebar title
 				title={ __( 'Comments' ) }
 				icon={ commentIcon }
+				closeLabel={ __( 'Close Comments' ) }
 			>
 				<CollabSidebarContent
 					comments={ resultComments }

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

@@ -13,112 +13,112 @@
 .editor-collab-sidebar-panel {
 	padding: $grid-unit-20;
 	height: 100%;
+}
 
-	&__thread {
-		position: relative;
-		padding: $grid-unit-20;
-		border-radius: $radius-large;
-		border: 1.5px solid $gray-300;
-		background-color: $gray-100;
-		margin-bottom: $grid-unit-20;
-	}
+.editor-collab-sidebar-panel__thread {
+	position: relative;
+	padding: $grid-unit-20;
+	border-radius: $radius-large;
+	border: 1.5px solid $gray-300;
+	background-color: $gray-100;
+	margin-bottom: $grid-unit-20;
+}
 
-	&__active-thread {
-		border: 1.5px solid #3858e9;
-	}
+.editor-collab-sidebar-panel__active-thread {
+	border: 1.5px solid #3858e9;
+}
 
-	&__focus-thread {
-		border: 1.5px solid #3858e9;
-		background-color: $white;
-		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
-	}
+.editor-collab-sidebar-panel__focus-thread {
+	border: 1.5px solid #3858e9;
+	background-color: $white;
+	box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
+}
 
-	&__comment-field {
-		flex: 1;
+.editor-collab-sidebar-panel__comment-field {
+	flex: 1;
 
-		button {
-			flex-grow: 1;
-			justify-content: center;
-		}
+	button {
+		flex-grow: 1;
+		justify-content: center;
 	}
+}
 
-	&__child-thread {
-		margin-top: 15px;
-	}
+.editor-collab-sidebar-panel__child-thread {
+	margin-top: 15px;
+}
 
-	&__user-name {
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 16px;
-		text-align: left;
-		color: $gray-700;
-		text-transform: capitalize;
-	}
+.editor-collab-sidebar-panel__user-name {
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	text-align: left;
+	color: $gray-700;
+	text-transform: capitalize;
+}
 
-	&__user-time {
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 16px;
-		text-align: left;
-		color: $gray-700;
-	}
+.editor-collab-sidebar-panel__user-time {
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	text-align: left;
+	color: $gray-700;
+}
 
-	&__user-comment {
-		p:last-child {
-			margin-bottom: 0;
-		}
+.editor-collab-sidebar-panel__user-comment {
+	p:last-child {
+		margin-bottom: 0;
 	}
+}
 
-	&__user-avatar {
-		border-radius: $radius-round;
-		flex-shrink: 0;
-	}
+.editor-collab-sidebar-panel__user-avatar {
+	border-radius: $radius-round;
+	flex-shrink: 0;
+}
 
-	&__thread-overlay {
-		background-color: rgba(0, 0, 0, 0.7);
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-		padding: 15px;
-		border-radius: $radius-large;
-		color: $white;
+.editor-collab-sidebar-panel__thread-overlay {
+	background-color: rgba(0, 0, 0, 0.7);
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	padding: 15px;
+	border-radius: $radius-large;
+	color: $white;
 
-		p {
-			margin-bottom: 15px;
-		}
+	p {
+		margin-bottom: 15px;
+	}
 
-		button {
-			padding: 4px 10px;
-			color: $white;
-		}
+	button {
+		padding: 4px 10px;
+		color: $white;
 	}
+}
 
-	&__comment-status {
-		margin-left: auto;
+.editor-collab-sidebar-panel__comment-status {
+	margin-left: auto;
 
-		button {
-			&.has-icon:not(.has-text) {
-				min-width: 24px;
-				padding: 0;
-				width: 24px;
-				height: 24px;
-				flex-shrink: 0;
-			}
+	button {
+		&.has-icon:not(.has-text) {
+			min-width: 24px;
+			padding: 0;
+			width: 24px;
+			height: 24px;
+			flex-shrink: 0;
 		}
 	}
+}
 
-	&__comment-dropdown-menu {
-		flex-shrink: 0;
-	}
+.editor-collab-sidebar-panel__comment-dropdown-menu {
+	flex-shrink: 0;
+}
 
-	&__show-more-reply {
-		font-weight: 500;
-		font-style: italic;
-	}
+.editor-collab-sidebar-panel__show-more-reply {
+	font-weight: 500;
+	font-style: italic;
 }
 
 // Comment avatar indicators.

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

@@ -109,6 +109,7 @@ function PrivateExcerpt() {
 				getCurrentPostId,
 				getEditedPostAttribute,
 				isEditorPanelEnabled,
+				__experimentalGetDefaultTemplateType,
 			} = select( editorStore );
 			const postType = getCurrentPostType();
 			const isTemplateOrTemplatePart = [
@@ -131,13 +132,17 @@ function PrivateExcerpt() {
 					postType,
 					getCurrentPostId()
 				);
+			const fallback = isTemplateOrTemplatePart
+				? __experimentalGetDefaultTemplateType( template.slug )
+						.description
+				: undefined;
 			// For post types that use excerpt as description, we do not abide
 			// by the `isEnabled` panel flag in order to render them as text.
 			const _shouldRender =
 				isEditorPanelEnabled( PANEL_NAME ) ||
 				_shouldBeUsedAsDescription;
 			return {
-				excerpt: getEditedPostAttribute( _usedAttribute ),
+				excerpt: getEditedPostAttribute( _usedAttribute ) ?? fallback,
 				shouldRender: _shouldRender,
 				shouldBeUsedAsDescription: _shouldBeUsedAsDescription,
 				// If we should render, allow editing for all post types that are not used as description.

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -156,7 +156,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary has-icon"
+              class="components-button is-next-40px-default-size is-primary has-icon has-icon-right"
               href="https://wordpress.local/sample-page/"
               target="_blank"
             >
@@ -383,7 +383,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary has-icon"
+              class="components-button is-next-40px-default-size is-primary has-icon has-icon-right"
               href="https://wordpress.local/sample-page/"
               target="_blank"
             >

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

@@ -52,14 +52,30 @@ export function useAllowSwitchingTemplates() {
 }
 
 function useTemplates( postType ) {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-				post_type: postType,
-			} ),
+	// To do: create a new selector to checks if templates exist at all instead
+	// of and unbound request. In the modal, the user templates should be
+	// paginated and we should not make an unbound request.
+	const { staticTemplates, templates } = useSelect(
+		( select ) => {
+			return {
+				staticTemplates: select( coreStore ).getEntityRecords(
+					'postType',
+					'wp_registered_template',
+					{ per_page: -1, post_type: postType }
+				),
+				templates: select( coreStore ).getEntityRecords(
+					'postType',
+					'wp_template',
+					{ per_page: -1, post_type: postType }
+				),
+			};
+		},
 		[ postType ]
 	);
+	return useMemo(
+		() => [ ...( staticTemplates || [] ), ...( templates || [] ) ],
+		[ staticTemplates, templates ]
+	);
 }
 
 export function useAvailableTemplates( postType ) {
@@ -71,7 +87,7 @@ export function useAvailableTemplates( postType ) {
 			allowSwitchingTemplate &&
 			templates?.filter(
 				( template ) =>
-					template.is_custom &&
+					( template.is_custom || template.type === 'wp_template' ) &&
 					template.slug !== currentTemplateSlug &&
 					!! template.content.raw // Skip empty templates.
 			),

package/src/components/post-type-support-check/index.js

@@ -9,6 +9,23 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+function checkSupport( supports = {}, key ) {
+	// Check for top-level support keys.
+	if ( supports[ key ] !== undefined ) {
+		return !! supports[ key ];
+	}
+
+	const [ topKey, subKey ] = key.split( '.' );
+	// Try to unwrap sub-properties from the superfluous array.
+	const [ subProperties ] = Array.isArray( supports[ topKey ] )
+		? supports[ topKey ]
+		: [];
+
+	return Array.isArray( subProperties )
+		? subProperties.includes( subKey )
+		: !! subProperties?.[ subKey ];
+}
+
 /**
  * A component which renders its own children only if the current editor post
  * type supports one of the given `supportKeys` prop.
@@ -31,7 +48,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) {
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-		).some( ( key ) => !! postType.supports[ key ] );
+		).some( ( key ) => checkSupport( postType.supports, key ) );
 	}
 
 	if ( ! isSupported ) {

package/src/components/post-type-support-check/test/index.js

@@ -96,4 +96,41 @@ describe( 'PostTypeSupportCheck', () => {
 
 		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
+
+	it( 'renders its children when post type supports a sub-feature', () => {
+		setupUseSelectMock( {
+			supports: {
+				editor: [ [ 'block-comments' ] ],
+			},
+		} );
+		const { container } = render(
+			<PostTypeSupportCheck supportKeys="editor.block-comments">
+				Supported
+			</PostTypeSupportCheck>
+		);
+
+		expect( container ).toHaveTextContent( 'Supported' );
+	} );
+
+	it( 'renders its children when post type supports some of the sub-features', () => {
+		setupUseSelectMock( {
+			supports: {
+				editor: [ [ 'block-comments' ] ],
+				test: [
+					{
+						example: false,
+					},
+				],
+			},
+		} );
+		const { container } = render(
+			<PostTypeSupportCheck
+				supportKeys={ [ 'editor.block-comments', 'test.example' ] }
+			>
+				Supported
+			</PostTypeSupportCheck>
+		);
+
+		expect( container ).toHaveTextContent( 'Supported' );
+	} );
 } );

package/src/components/provider/index.js

@@ -220,7 +220,10 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
 			// If it is a template, try to inherit the post type from the name.
-			if ( post.type === 'wp_template' ) {
+			if (
+				post.type === 'wp_template' ||
+				post.type === 'wp_registered_template'
+			) {
 				if ( post.slug === 'page' ) {
 					postContext.postType = 'page';
 				} else if ( post.slug === 'single' ) {

package/src/dataviews/store/private-actions.ts

@@ -138,7 +138,7 @@ export const registerPostTypeSchema =
 				: undefined,
 			// @ts-ignore
 			globalThis.IS_GUTENBERG_PLUGIN
-				? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes(
+				? ! [ 'wp_block', 'wp_template_part' ].includes(
 						postTypeConfig.slug
 				  ) &&
 				  canCreate &&