@wordpress/editor 14.36.0 → 14.36.1-next.6deb34194.0

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

@@ -70,28 +70,22 @@ export function Comments( {
 		useDispatch( blockEditorStore )
 	);
 
-	const {
-		blockCommentId,
-		selectedBlockClientId,
-		orderedBlockIds,
-		blockMode,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockAttributes,
-			getSelectedBlockClientId,
-			getClientIdsWithDescendants,
-			getBlockMode,
-		} = select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return {
-			blockCommentId: clientId
-				? getBlockAttributes( clientId )?.metadata?.noteId
-				: null,
-			selectedBlockClientId: clientId,
-			orderedBlockIds: getClientIdsWithDescendants(),
-			blockMode: clientId ? getBlockMode( clientId ) : null,
-		};
-	}, [] );
+	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
+		useSelect( ( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getClientIdsWithDescendants,
+			} = select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockCommentId: clientId
+					? getBlockAttributes( clientId )?.metadata?.noteId
+					: null,
+				selectedBlockClientId: clientId,
+				orderedBlockIds: getClientIdsWithDescendants(),
+			};
+		}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
@@ -318,7 +312,6 @@ export function Comments( {
 		threads,
 		selectedThread,
 		setCanvasMinHeight,
-		blockMode,
 	] );
 
 	const handleThreadNavigation = ( event, thread, isSelected ) => {

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

@@ -14,7 +14,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	useEffect,
 	useMemo,
-	useRef,
 	useCallback,
 	useReducer,
 } from '@wordpress/element';
@@ -36,9 +35,7 @@ import { collabSidebarName } from './constants';
 import { unlock } from '../../lock-unlock';
 import { noop } from './utils';
 
-const { useBlockElementRef, cleanEmptyObject } = unlock(
-	blockEditorPrivateApis
-);
+const { useBlockElement, cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 export function useBlockComments( postId ) {
 	const [ commentLastUpdated, reflowComments ] = useReducer(
@@ -369,20 +366,7 @@ export function useFloatingThread( {
 	setBlockRef,
 	commentLastUpdated,
 } ) {
-	const blockRef = useRef();
-	useBlockElementRef( thread.blockClientId, blockRef );
-
-	const blockMode = useSelect(
-		( select ) => {
-			return thread.blockClientId
-				? select( blockEditorStore ).getBlockMode(
-						thread.blockClientId
-				  )
-				: null;
-		},
-		[ thread.blockClientId ]
-	);
-
+	const blockElement = useBlockElement( thread.blockClientId );
 	const updateHeight = useCallback(
 		( id, newHeight ) => {
 			setHeights( ( prev ) => {
@@ -408,17 +392,17 @@ export function useFloatingThread( {
 
 	// Store the block reference for each thread.
 	useEffect( () => {
-		if ( blockRef.current ) {
-			refs.setReference( blockRef.current );
+		if ( blockElement ) {
+			refs.setReference( blockElement );
 		}
-	}, [ blockRef, refs, commentLastUpdated, blockMode ] );
+	}, [ blockElement, refs, commentLastUpdated ] );
 
 	// Track thread heights.
 	useEffect( () => {
 		if ( refs.floating?.current ) {
-			setBlockRef( thread.id, blockRef.current );
+			setBlockRef( thread.id, blockElement );
 		}
-	}, [ thread.id, refs.floating, setBlockRef ] );
+	}, [ blockElement, thread.id, refs.floating, setBlockRef ] );
 
 	// When the selected thread changes, update heights, triggering offset recalculation.
 	useEffect( () => {
@@ -435,7 +419,6 @@ export function useFloatingThread( {
 	] );
 
 	return {
-		blockRef,
 		y,
 		refs,
 	};

package/src/components/document-bar/index.js

@@ -14,7 +14,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { BlockIcon } from '@wordpress/block-editor';
+import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor';
 import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
@@ -33,6 +33,7 @@ import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
 import { getStylesCanvasTitle } from '../styles-canvas';
 import { unlock } from '../../lock-unlock';
+import useEditedSectionDetails from './useEditedSectionDetails';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -56,6 +57,14 @@ const MotionButton = motion.create( Button );
  * @return {React.ReactNode} The rendered DocumentBar component.
  */
 export default function DocumentBar( props ) {
+	// Get action to lock the pattern design
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	// Get details about the currently edited content-only section
+	const unlockedPatternInfo = useEditedSectionDetails();
+
 	const {
 		postId,
 		postType,
@@ -133,11 +142,28 @@ export default function DocumentBar( props ) {
 	const isReducedMotion = useReducedMotion();
 
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
-	const hasBackButton = !! onNavigateToPreviousEntityRecord;
+	const hasBackButton =
+		!! onNavigateToPreviousEntityRecord || !! unlockedPatternInfo;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
-	const title = props.title || stylesCanvasTitle || entityTitle;
+
+	// Use pattern info if a pattern block is unlocked, otherwise use document/entity info
+	const title =
+		unlockedPatternInfo?.patternTitle ||
+		props.title ||
+		stylesCanvasTitle ||
+		entityTitle;
 	const icon = props.icon;
 
+	// Determine the back button action
+	const handleBackClick = ( event ) => {
+		event.stopPropagation();
+		if ( unlockedPatternInfo ) {
+			stopEditingContentOnlySection();
+		} else if ( onNavigateToPreviousEntityRecord ) {
+			onNavigateToPreviousEntityRecord();
+		}
+	};
+
 	const pageTypeBadge = usePageTypeBadge( postId );
 
 	const mountedRef = useRef( false );
@@ -156,10 +182,7 @@ export default function DocumentBar( props ) {
 					<MotionButton
 						className="editor-document-bar__back"
 						icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-						onClick={ ( event ) => {
-							event.stopPropagation();
-							onNavigateToPreviousEntityRecord();
-						} }
+						onClick={ handleBackClick }
 						size="compact"
 						initial={
 							mountedRef.current
@@ -219,12 +242,21 @@ export default function DocumentBar( props ) {
 									? stripHTML( title )
 									: __( 'No title' ) }
 							</span>
-							{ pageTypeBadge && (
+							{ unlockedPatternInfo && (
+								<span className="editor-document-bar__post-type-label">
+									{ unlockedPatternInfo.type ===
+									'template-part'
+										? `· ${ __( 'Template Part' ) }`
+										: `· ${ __( 'Pattern' ) }` }
+								</span>
+							) }
+							{ ! unlockedPatternInfo && pageTypeBadge && (
 								<span className="editor-document-bar__post-type-label">
 									{ `· ${ pageTypeBadge }` }
 								</span>
 							) }
-							{ postTypeLabel &&
+							{ ! unlockedPatternInfo &&
+								postTypeLabel &&
 								! props.title &&
 								! pageTypeBadge && (
 									<span className="editor-document-bar__post-type-label">

package/src/components/document-bar/useEditedSectionDetails.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Hook to get details about the currently edited content-only section.
+ * Only returns information when the content only pattern insertion experiment is enabled.
+ *
+ * @return {Object|null} Object with patternName, patternTitle, and type, or null if no section is being edited or experiment is disabled.
+ */
+export default function useEditedSectionDetails() {
+	return useSelect( ( select ) => {
+		// Only run when the content only pattern insertion experiment is enabled
+		if ( ! window?.__experimentalContentOnlyPatternInsertion ) {
+			return null;
+		}
+
+		const {
+			getBlockAttributes,
+			getBlockName,
+			__experimentalGetParsedPattern,
+		} = select( blockEditorStore );
+		const { getEditedEntityRecord, getCurrentTheme } = select( coreStore );
+		const { getEditedContentOnlySection } = unlock(
+			select( blockEditorStore )
+		);
+
+		// Get the clientId of the unlocked pattern/section
+		const editedSectionId = getEditedContentOnlySection();
+		if ( ! editedSectionId ) {
+			return null;
+		}
+
+		const attributes = getBlockAttributes( editedSectionId );
+
+		// Handle unsynced patterns (contentOnly patterns with patternName)
+		const patternName = attributes?.metadata?.patternName;
+		if ( patternName ) {
+			// Get pattern details if available
+			const pattern =
+				typeof __experimentalGetParsedPattern === 'function'
+					? __experimentalGetParsedPattern( patternName )
+					: null;
+
+			return {
+				patternName,
+				patternTitle: pattern?.title || attributes?.metadata?.name,
+				type: 'pattern',
+			};
+		}
+
+		const blockName = getBlockName( editedSectionId );
+
+		// Handle synced patterns (core/block)
+		if ( blockName === 'core/block' && !! attributes?.ref ) {
+			const entity = getEditedEntityRecord(
+				'postType',
+				'wp_block',
+				attributes.ref
+			);
+			if ( entity?.title ) {
+				return {
+					patternName: attributes.ref,
+					patternTitle: decodeEntities( entity.title ),
+					type: 'synced-pattern',
+				};
+			}
+		}
+
+		// Handle template parts (core/template-part)
+		if ( blockName === 'core/template-part' && !! attributes?.slug ) {
+			const theme = attributes.theme || getCurrentTheme()?.stylesheet;
+			const templatePartId = theme
+				? `${ theme }//${ attributes.slug }`
+				: null;
+			if ( templatePartId ) {
+				const entity = getEditedEntityRecord(
+					'postType',
+					'wp_template_part',
+					templatePartId
+				);
+				if ( entity?.title ) {
+					return {
+						patternName: attributes.slug,
+						patternTitle: decodeEntities( entity.title ),
+						type: 'template-part',
+					};
+				}
+			}
+		}
+
+		return null;
+	}, [] );
+}

package/src/components/global-styles-sidebar/style.scss

@@ -10,8 +10,8 @@
 		flex: 1;
 	}
 
-	.components-navigator-screen {
-		padding: 0;
+	.global-styles-ui-sidebar__navigator-screen.components-navigator-screen {
+		padding: $grid-unit-15;
 	}
 }
 

package/src/components/page-attributes/parent.js

@@ -91,9 +91,10 @@ export function PageAttributesParent() {
 				_fields: 'id,title,parent',
 			};
 
-			// Perform a search when the field is changed.
+			// Perform a search by relevance when the field is changed.
 			if ( !! fieldValue ) {
 				query.search = fieldValue;
+				query.orderby = 'relevance';
 			}
 
 			const parentPost = pageId

package/src/components/post-card-panel/index.js

@@ -102,7 +102,7 @@ export default function PostCardPanel( {
 			<HStack
 				spacing={ 2 }
 				className="editor-post-card-panel__header"
-				align="flex-start"
+				alignment="flex-start"
 			>
 				<Icon className="editor-post-card-panel__icon" icon={ icon } />
 				<Text

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

@@ -34,6 +34,7 @@ import {
 	templateTitleField,
 	pageTitleField,
 	patternTitleField,
+	notesField,
 } from '@wordpress/fields';
 
 /**
@@ -50,6 +51,20 @@ declare global {
 	}
 }
 
+/**
+ * Check if a post type supports editor notes.
+ *
+ * @param supports The post type supports object.
+ * @return Whether editor notes are supported.
+ */
+function hasEditorNotesSupport( supports?: PostType[ 'supports' ] ): boolean {
+	const editor = supports?.editor;
+	if ( Array.isArray( editor ) ) {
+		return !! editor[ 0 ]?.notes;
+	}
+	return false;
+}
+
 export function registerEntityAction< Item >(
 	kind: string,
 	name: string,
@@ -210,6 +225,7 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.editor &&
 				postTypeConfig.viewable &&
 				postPreviewField,
+			hasEditorNotesSupport( postTypeConfig.supports ) && notesField,
 		].filter( Boolean );
 		if ( postTypeConfig.supports?.title ) {
 			let _titleField;

package/src/utils/get-template-part-icon.js

@@ -5,22 +5,35 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
+	tableColumnAfter as overlayIcon,
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
+
 /**
- * Helper function to retrieve the corresponding icon by name.
+ * Helper function to retrieve the corresponding icon by area name or icon name.
  *
- * @param {string} iconName The name of the icon.
+ * @param {string} areaOrIconName The area name (e.g., 'header', 'overlay') or icon name (e.g., 'menu').
  *
  * @return {Object} The corresponding icon.
  */
-export function getTemplatePartIcon( iconName ) {
-	if ( 'header' === iconName ) {
+export function getTemplatePartIcon( areaOrIconName ) {
+	// Handle area names first
+	if ( 'header' === areaOrIconName ) {
 		return headerIcon;
-	} else if ( 'footer' === iconName ) {
+	} else if ( 'footer' === areaOrIconName ) {
 		return footerIcon;
-	} else if ( 'sidebar' === iconName ) {
+	} else if ( 'sidebar' === areaOrIconName ) {
 		return sidebarIcon;
+	} else if ( 'overlay' === areaOrIconName ) {
+		// TODO: Replace with a proper overlay icon when available.
+		// Using tableColumnAfter as a placeholder.
+		return overlayIcon;
+	}
+	// Handle icon names for backwards compatibility
+	if ( 'menu' === areaOrIconName ) {
+		// TODO: Replace with a proper overlay icon when available.
+		// Using tableColumnAfter as a placeholder.
+		return overlayIcon;
 	}
 	return symbolFilledIcon;
 }