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

package/src/bindings/test/term-data.js

@@ -0,0 +1,406 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { default as termDataBindings, termDataFields } from '../term-data';
+
+describe( 'term-data bindings', () => {
+	const bindings = {
+		id: {
+			source: 'core/term-data',
+			args: { field: 'id' },
+		},
+		name: {
+			source: 'core/term-data',
+			args: { field: 'name' },
+		},
+		slug: {
+			source: 'core/term-data',
+			args: { field: 'slug' },
+		},
+		link: {
+			source: 'core/term-data',
+			args: { field: 'link' },
+		},
+		description: {
+			source: 'core/term-data',
+			args: { field: 'description' },
+		},
+		parent: {
+			source: 'core/term-data',
+			args: { field: 'parent' },
+		},
+		count: {
+			source: 'core/term-data',
+			args: { field: 'count' },
+		},
+		content: {
+			source: 'core/term-data',
+			args: { field: 'unknown' },
+		},
+	};
+
+	const getEntityRecordMock = ( kind, taxonomy, termId ) => {
+		if (
+			kind === 'taxonomy' &&
+			taxonomy === 'category' &&
+			termId === 123
+		) {
+			return {
+				id: 123,
+				name: 'Technology',
+				slug: 'technology',
+				link: 'https://example.com/category/technology',
+				parent: 0,
+				count: 42,
+			};
+		}
+		return undefined;
+	};
+
+	describe( 'getValues', () => {
+		describe( 'for regular blocks using block context', () => {
+			describe( 'when termId and taxonomy are provided in context', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getBlockName: ( clientId ) =>
+								clientId === '123abc456'
+									? 'core/paragraph'
+									: undefined,
+							getBlockAttributes: () => ( {} ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: getEntityRecordMock,
+						};
+					}
+				};
+
+				it( 'should return entity field values when they exist, fall back to field label, and to field name for unknown fields', () => {
+					const values = termDataBindings.getValues( {
+						select,
+						context: {
+							taxonomy: 'category',
+							termId: 123,
+						},
+						bindings,
+						clientId: '123abc456',
+					} );
+
+					expect( values ).toStrictEqual( {
+						id: 123,
+						name: 'Technology',
+						slug: 'technology',
+						link: 'https://example.com/category/technology',
+						description: 'Description',
+						parent: 0,
+						count: '(42)',
+						content: 'unknown',
+					} );
+				} );
+
+				it( 'should fall back to field label when entity does not exist, and to field name for unknown fields', () => {
+					const values = termDataBindings.getValues( {
+						select,
+						context: {
+							taxonomy: 'category',
+							termId: 456,
+						},
+						bindings,
+						clientId: '123abc456',
+					} );
+
+					expect( values ).toStrictEqual( {
+						id: 'Term ID',
+						name: 'Name',
+						slug: 'Slug',
+						link: 'Link',
+						description: 'Description',
+						parent: 'Parent ID',
+						count: 'Count',
+						content: 'unknown',
+					} );
+				} );
+			} );
+
+			describe( 'when termData is provided in context', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getBlockName: () => 'core/paragraph',
+							getBlockAttributes: () => ( {} ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: () => null,
+						};
+					}
+				};
+
+				const termData = {
+					id: 456,
+					name: 'Design',
+					link: 'https://example.com/category/design',
+					description: 'Design resources',
+					parent: 0,
+					count: 15,
+				};
+
+				it( 'should use termData from context when entity record is not available', () => {
+					const values = termDataBindings.getValues( {
+						select,
+						context: {
+							taxonomy: 'category',
+							termId: 456,
+							termData,
+						},
+						bindings,
+						clientId: '123abc456',
+					} );
+
+					expect( values ).toStrictEqual( {
+						id: 456,
+						name: 'Design',
+						slug: 'Slug',
+						link: 'https://example.com/category/design',
+						description: 'Design resources',
+						parent: 0,
+						count: '(15)',
+						content: 'unknown',
+					} );
+				} );
+
+				it( 'should use termData when taxonomy and termId are not provided', () => {
+					const values = termDataBindings.getValues( {
+						select,
+						context: {
+							termData,
+						},
+						bindings,
+						clientId: '123abc456',
+					} );
+
+					expect( values ).toStrictEqual( {
+						id: 456,
+						name: 'Design',
+						slug: 'Slug',
+						link: 'https://example.com/category/design',
+						description: 'Design resources',
+						parent: 0,
+						count: '(15)',
+						content: 'unknown',
+					} );
+				} );
+			} );
+		} );
+
+		describe( 'for navigation blocks using block attributes', () => {
+			it( 'should use block attributes instead of context', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getBlockName: () => 'core/navigation-link',
+							getBlockAttributes: () => ( {
+								id: 789,
+								type: 'category',
+							} ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: ( kind, taxonomy, termId ) => {
+								if (
+									kind === 'taxonomy' &&
+									taxonomy === 'category' &&
+									termId === 789
+								) {
+									return {
+										id: 789,
+										name: 'Programming',
+										slug: 'programming',
+										link: 'https://example.com/category/programming',
+										description: 'Programming resources',
+										parent: 0,
+										count: 10,
+									};
+								}
+								return null;
+							},
+						};
+					}
+				};
+
+				const values = termDataBindings.getValues( {
+					select,
+					context: {},
+					bindings,
+					clientId: '123abc456',
+				} );
+
+				expect( values ).toStrictEqual( {
+					id: 789,
+					name: 'Programming',
+					slug: 'programming',
+					link: 'https://example.com/category/programming',
+					description: 'Programming resources',
+					parent: 0,
+					count: '(10)',
+					content: 'unknown',
+				} );
+			} );
+
+			it( 'should convert "tag" type to "post_tag" taxonomy', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getBlockName: () => 'core/navigation-link',
+							getBlockAttributes: () => ( {
+								id: 321,
+								type: 'tag',
+							} ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: ( kind, taxonomy, termId ) => {
+								if (
+									kind === 'taxonomy' &&
+									taxonomy === 'post_tag' &&
+									termId === 321
+								) {
+									return {
+										name: 'JavaScript',
+									};
+								}
+								return null;
+							},
+						};
+					}
+				};
+
+				const values = termDataBindings.getValues( {
+					select,
+					context: {},
+					bindings: {
+						content: {
+							source: 'core/term-data',
+							args: { field: 'name' },
+						},
+					},
+					clientId: '123abc456',
+				} );
+
+				expect( values.content ).toBe( 'JavaScript' );
+			} );
+		} );
+	} );
+
+	describe( 'getFieldsList', () => {
+		describe( 'when a Navigation block is selected', () => {
+			it( 'should return the list of available term data fields if id and type attributes are present', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getSelectedBlockClientId: () => '123abc456',
+							getBlockName: () => 'core/navigation-link',
+							getBlockAttributes: () => ( {
+								id: 123,
+								type: 'category',
+							} ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: getEntityRecordMock,
+						};
+					}
+				};
+				const fields = termDataBindings.getFieldsList( { select } );
+
+				expect( fields ).toEqual( termDataFields );
+			} );
+
+			it( 'should return an empty array if id or type attributes are missing', () => {
+				const select = ( store ) => {
+					if ( store === blockEditorStore ) {
+						return {
+							getSelectedBlockClientId: () => '123abc456',
+							getBlockName: () => 'core/navigation-link',
+							getBlockAttributes: () => ( { type: 'category' } ),
+						};
+					}
+					if ( store === coreDataStore ) {
+						return {
+							getEntityRecord: getEntityRecordMock,
+						};
+					}
+				};
+				const fields = termDataBindings.getFieldsList( { select } );
+
+				expect( fields ).toEqual( [] );
+			} );
+		} );
+
+		describe( 'when a non-Navigation block is selected', () => {
+			const select = ( store ) => {
+				if ( store === blockEditorStore ) {
+					return {
+						getSelectedBlockClientId: () => '123abc456',
+						getBlockName: () => 'core/paragraph',
+						getBlockAttributes: () => ( {} ),
+					};
+				}
+				if ( store === coreDataStore ) {
+					return {
+						getEntityRecord: getEntityRecordMock,
+					};
+				}
+			};
+
+			it( 'should return the list of available term data fields when taxonomy and termId are provided by context', () => {
+				const fields = termDataBindings.getFieldsList( {
+					select,
+					context: { taxonomy: 'category', termId: 123 },
+				} );
+
+				expect( fields ).toEqual( termDataFields );
+			} );
+
+			it( 'should return empty array when neither termId nor termData is provided from context', () => {
+				const fields = termDataBindings.getFieldsList( {
+					select,
+					context: { taxonomy: 'category' },
+				} );
+
+				expect( fields ).toEqual( [] );
+			} );
+
+			it( 'should return fields when using termData from context', () => {
+				const fields = termDataBindings.getFieldsList( {
+					select,
+					context: {
+						termData: {
+							id: 456,
+							name: 'Design',
+							slug: 'design',
+							link: 'https://example.com/category/design',
+							description: 'Design resources',
+							parent: 0,
+							count: 15,
+						},
+					},
+				} );
+
+				expect( fields ).toEqual( termDataFields );
+			} );
+		} );
+	} );
+} );

package/src/components/autocompleters/user.js

@@ -5,6 +5,12 @@ import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Renders a user label for the autocompleter.
+ *
+ * @param {Object} user User object.
+ * @return {JSX.Element} User label component.
+ */
 export function getUserLabel( user ) {
 	const avatar =
 		user.avatar_urls && user.avatar_urls[ 24 ] ? (

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

@@ -69,6 +69,7 @@ export function Comments( {
 	const { selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
 	);
+
 	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
 		useSelect( ( select ) => {
 			const {

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,9 +366,7 @@ export function useFloatingThread( {
 	setBlockRef,
 	commentLastUpdated,
 } ) {
-	const blockRef = useRef();
-	useBlockElementRef( thread.blockClientId, blockRef );
-
+	const blockElement = useBlockElement( thread.blockClientId );
 	const updateHeight = useCallback(
 		( id, newHeight ) => {
 			setHeights( ( prev ) => {
@@ -397,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 ] );
+	}, [ 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( () => {
@@ -424,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/index.js

@@ -33,7 +33,7 @@ function useServerData() {
 
 		const canUserUploadMedia = canUser( 'create', {
 			kind: 'postType',
-			name: 'attachement',
+			name: 'attachment',
 		} );
 
 		return {

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;
 	}
 }