@wordpress/edit-site 6.36.0 → 6.36.1-next.738bb1424.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.36.0",
+	"version": "6.36.1-next.738bb1424.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,13 +23,22 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-style",
+		"build-types",
+		"*.md"
+	],
+	"type": "module",
+	"main": "build/index.cjs",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"default": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -40,50 +49,50 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.36.0",
-		"@wordpress/admin-ui": "^1.4.0",
-		"@wordpress/api-fetch": "^7.36.0",
-		"@wordpress/base-styles": "^6.12.0",
-		"@wordpress/blob": "^4.36.0",
-		"@wordpress/block-editor": "^15.9.0",
-		"@wordpress/block-library": "^9.36.0",
-		"@wordpress/blocks": "^15.9.0",
-		"@wordpress/commands": "^1.36.0",
-		"@wordpress/components": "^30.9.0",
-		"@wordpress/compose": "^7.36.0",
-		"@wordpress/core-data": "^7.36.0",
-		"@wordpress/data": "^10.36.0",
-		"@wordpress/dataviews": "^11.0.0",
-		"@wordpress/date": "^5.36.0",
-		"@wordpress/deprecated": "^4.36.0",
-		"@wordpress/dom": "^4.36.0",
-		"@wordpress/editor": "^14.36.0",
-		"@wordpress/element": "^6.36.0",
-		"@wordpress/escape-html": "^3.36.0",
-		"@wordpress/fields": "^0.28.0",
-		"@wordpress/global-styles-engine": "^1.3.0",
-		"@wordpress/global-styles-ui": "^1.3.0",
-		"@wordpress/hooks": "^4.36.0",
-		"@wordpress/html-entities": "^4.36.0",
-		"@wordpress/i18n": "^6.9.0",
-		"@wordpress/icons": "^11.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.36.0",
-		"@wordpress/keycodes": "^4.36.0",
-		"@wordpress/media-utils": "^5.36.0",
-		"@wordpress/notices": "^5.36.0",
-		"@wordpress/patterns": "^2.36.0",
-		"@wordpress/plugins": "^7.36.0",
-		"@wordpress/preferences": "^4.36.0",
-		"@wordpress/primitives": "^4.36.0",
-		"@wordpress/private-apis": "^1.36.0",
-		"@wordpress/reusable-blocks": "^5.36.0",
-		"@wordpress/router": "^1.36.0",
-		"@wordpress/style-engine": "^2.36.0",
-		"@wordpress/url": "^4.36.0",
-		"@wordpress/viewport": "^6.36.0",
-		"@wordpress/views": "^1.3.0",
-		"@wordpress/widgets": "^4.36.0",
-		"@wordpress/wordcount": "^4.36.0",
+		"@wordpress/a11y": "^4.36.1-next.738bb1424.0",
+		"@wordpress/admin-ui": "^1.4.1-next.738bb1424.0",
+		"@wordpress/api-fetch": "^7.36.1-next.738bb1424.0",
+		"@wordpress/base-styles": "^6.12.1-next.738bb1424.0",
+		"@wordpress/blob": "^4.36.1-next.738bb1424.0",
+		"@wordpress/block-editor": "^15.9.1-next.738bb1424.0",
+		"@wordpress/block-library": "^9.36.1-next.738bb1424.0",
+		"@wordpress/blocks": "^15.9.1-next.738bb1424.0",
+		"@wordpress/commands": "^1.36.1-next.738bb1424.0",
+		"@wordpress/components": "^31.0.1-next.738bb1424.0",
+		"@wordpress/compose": "^7.36.1-next.738bb1424.0",
+		"@wordpress/core-data": "^7.36.1-next.738bb1424.0",
+		"@wordpress/data": "^10.36.1-next.738bb1424.0",
+		"@wordpress/dataviews": "^11.1.1-next.738bb1424.0",
+		"@wordpress/date": "^5.36.1-next.738bb1424.0",
+		"@wordpress/deprecated": "^4.36.1-next.738bb1424.0",
+		"@wordpress/dom": "^4.36.1-next.738bb1424.0",
+		"@wordpress/editor": "^14.36.1-next.738bb1424.0",
+		"@wordpress/element": "^6.36.1-next.738bb1424.0",
+		"@wordpress/escape-html": "^3.36.1-next.738bb1424.0",
+		"@wordpress/fields": "^0.28.1-next.738bb1424.0",
+		"@wordpress/global-styles-engine": "^1.3.1-next.738bb1424.0",
+		"@wordpress/global-styles-ui": "^1.3.1-next.738bb1424.0",
+		"@wordpress/hooks": "^4.36.1-next.738bb1424.0",
+		"@wordpress/html-entities": "^4.36.1-next.738bb1424.0",
+		"@wordpress/i18n": "^6.9.1-next.738bb1424.0",
+		"@wordpress/icons": "^11.3.1-next.738bb1424.0",
+		"@wordpress/keyboard-shortcuts": "^5.36.1-next.738bb1424.0",
+		"@wordpress/keycodes": "^4.36.1-next.738bb1424.0",
+		"@wordpress/media-utils": "^5.36.1-next.738bb1424.0",
+		"@wordpress/notices": "^5.36.1-next.738bb1424.0",
+		"@wordpress/patterns": "^2.36.1-next.738bb1424.0",
+		"@wordpress/plugins": "^7.36.1-next.738bb1424.0",
+		"@wordpress/preferences": "^4.36.1-next.738bb1424.0",
+		"@wordpress/primitives": "^4.36.1-next.738bb1424.0",
+		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
+		"@wordpress/reusable-blocks": "^5.36.1-next.738bb1424.0",
+		"@wordpress/router": "^1.36.1-next.738bb1424.0",
+		"@wordpress/style-engine": "^2.36.1-next.738bb1424.0",
+		"@wordpress/url": "^4.36.1-next.738bb1424.0",
+		"@wordpress/viewport": "^6.36.1-next.738bb1424.0",
+		"@wordpress/views": "^1.3.1-next.738bb1424.0",
+		"@wordpress/widgets": "^4.36.1-next.738bb1424.0",
+		"@wordpress/wordcount": "^4.36.1-next.738bb1424.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -98,5 +107,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
+	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
 }

package/src/components/add-new-post/index.js

@@ -99,7 +99,6 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -53,7 +53,6 @@ function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
 			<VStack spacing={ 6 }>
 				<TextControl
 					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
 					onChange={ setTitle }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -130,7 +130,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		<>
 			{ showSearchControl && (
 				<SearchControl
-					__nextHasNoMarginBottom
 					onChange={ setSearch }
 					value={ search }
 					label={ labels.search_items }

package/src/components/add-new-template-legacy/add-custom-generic-template-modal-content.js

@@ -53,7 +53,6 @@ function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
 			<VStack spacing={ 6 }>
 				<TextControl
 					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
 					onChange={ setTitle }

package/src/components/add-new-template-legacy/add-custom-template-modal-content.js

@@ -130,7 +130,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		<>
 			{ showSearchControl && (
 				<SearchControl
-					__nextHasNoMarginBottom
 					onChange={ setSearch }
 					value={ search }
 					label={ labels.search_items }

package/src/components/block-editor/use-navigate-to-entity-record.js

@@ -3,25 +3,74 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useCallback } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useGenerateBlockPath } = unlock( editorPrivateApis );
 
+/**
+ * Hook to handle navigation to entity records and retrieve initial block selection.
+ *
+ * @return {Array} A tuple containing:
+ *   - onNavigateToEntityRecord: Function to navigate to an entity record
+ *   - initialBlockSelection: The block path or clientId to restore selection, or null if none stored
+ */
 export default function useNavigateToEntityRecord() {
 	const history = useHistory();
+	const { query, path } = useLocation();
+	const generateBlockPath = useGenerateBlockPath();
+
+	// Get the selected block from URL parameters and decode the block path
+	let initialBlockSelection = null;
+	if ( query.selectedBlock ) {
+		try {
+			initialBlockSelection = JSON.parse(
+				decodeURIComponent( query.selectedBlock )
+			);
+		} catch ( e ) {
+			// Invalid JSON, ignore
+			initialBlockSelection = null;
+		}
+	}
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
-			history.navigate(
-				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+			// First, update the current URL to include the selected block path for when we navigate back
+			if ( params.selectedBlockClientId ) {
+				const blockPath = generateBlockPath(
+					params.selectedBlockClientId
+				);
+				if ( blockPath ) {
+					// Encode the block path as JSON in the URL
+					const currentUrl = addQueryArgs( path, {
+						...query,
+						selectedBlock: encodeURIComponent(
+							JSON.stringify( blockPath )
+						),
+					} );
+					history.navigate( currentUrl, { replace: true } );
+				}
+			}
+
+			// Then navigate to the new entity record
+			const url = addQueryArgs(
+				`/${ params.postType }/${ params.postId }`,
+				{
+					canvas: 'edit',
+					focusMode: true,
+				}
 			);
+
+			history.navigate( url );
 		},
-		[ history ]
+		[ history, path, query, generateBlockPath ]
 	);
 
-	return onNavigateToEntityRecord;
+	return [ onNavigateToEntityRecord, initialBlockSelection ];
 }

package/src/components/block-editor/use-site-editor-settings.js

@@ -5,7 +5,11 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { generateGlobalStyles } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -16,31 +20,39 @@ import useNavigateToEntityRecord from './use-navigate-to-entity-record';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useGlobalStyles } = unlock( editorPrivateApis );
 
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
-	const previousLocation = usePrevious( location );
+	const previousCanvas = usePrevious( location.query.canvas );
 	const history = useHistory();
 	const goBack = useMemo( () => {
 		const isFocusMode =
 			location.query.focusMode ||
 			( location?.params?.postId &&
 				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
-		const didComeFromEditorCanvas =
-			previousLocation?.query.canvas === 'edit';
+		const didComeFromEditorCanvas = previousCanvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;
-		// `previousLocation` changes when the component updates for any reason, not
-		// just when location changes. Until this is fixed we can't add it to deps. See
-		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
-	}, [ location, history ] );
+	}, [ location, history, previousCanvas ] );
 	return goBack;
 }
 
 export function useSpecificEditorSettings() {
 	const { query } = useLocation();
 	const { canvas = 'view' } = query;
-	const onNavigateToEntityRecord = useNavigateToEntityRecord();
+	const [ onNavigateToEntityRecord, initialBlockSelection ] =
+		useNavigateToEntityRecord();
+
+	/*
+	 * Generate global styles directly to avoid circular dependency with GlobalStylesRenderer
+	 * (which runs inside ExperimentalEditorProvider after this hook).
+	 * GlobalStylesRenderer updates editorStore, but reading from it here would cause infinite
+	 * loops. Reading config from useGlobalStyles and generating CSS directly keeps us in sync.
+	 * See: https://github.com/WordPress/gutenberg/issues/73350
+	 */
+	const { merged: mergedConfig } = useGlobalStyles();
+
 	const { settings, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );
 		const { getCurrentPostAttribute } = select( editorStore );
@@ -53,11 +65,24 @@ export function useSpecificEditorSettings() {
 
 	const onNavigateToPreviousEntityRecord =
 		useNavigateToPreviousEntityRecord();
+
+	const [ globalStyles, globalSettings ] = useMemo( () => {
+		return generateGlobalStyles( mergedConfig, [], {
+			disableRootPadding: false,
+		} );
+	}, [ mergedConfig ] );
+
 	const defaultEditorSettings = useMemo( () => {
+		// Preserve non-global styles from settings.styles (e.g., editor styles from add_editor_style)
+		const nonGlobalStyles = ( settings?.styles ?? [] ).filter(
+			( style ) => ! style.isGlobalStyles
+		);
+
 		return {
 			...settings,
 			styles: [
-				...settings.styles,
+				...nonGlobalStyles,
+				...globalStyles,
 				{
 					// Forming a "block formatting context" to prevent margin collapsing.
 					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
@@ -71,19 +96,24 @@ export function useSpecificEditorSettings() {
 							: undefined,
 				},
 			],
+			__experimentalFeatures: globalSettings,
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
 			focusMode: canvas !== 'view',
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
 			isPreviewMode: canvas === 'view',
+			initialBlockSelection,
 		};
 	}, [
 		settings,
+		globalStyles,
+		globalSettings,
 		canvas,
 		currentPostIsTrashed,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
+		initialBlockSelection,
 	] );
 
 	return defaultEditorSettings;

package/src/components/editor/index.js

@@ -143,6 +143,7 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	);
 
 	const settings = useSpecificEditorSettings();
+	const { initialBlockSelection, ...editorSettings } = settings;
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
@@ -222,7 +223,8 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 					postType={ postWithTemplate ? context.postType : postType }
 					postId={ postWithTemplate ? context.postId : postId }
 					templateId={ postWithTemplate ? postId : undefined }
-					settings={ settings }
+					settings={ editorSettings }
+					initialSelection={ initialBlockSelection }
 					className="edit-site-editor__editor-interface"
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />

package/src/components/page-patterns/use-pattern-settings.js

@@ -4,6 +4,8 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { generateGlobalStyles } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -12,7 +14,17 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import { filterOutDuplicatesByName } from './utils';
 
+const { useGlobalStyles } = unlock( editorPrivateApis );
+
 export default function usePatternSettings() {
+	/*
+	 * Generate global styles directly because block previews use a separate
+	 * ExperimentalBlockEditorProvider and can't access GlobalStylesRenderer's output.
+	 * Reading config from useGlobalStyles and generating CSS directly keeps us in sync.
+	 * See: https://github.com/WordPress/gutenberg/issues/73350
+	 */
+	const { merged: mergedConfig } = useGlobalStyles();
+
 	const storedSettings = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		return getSettings();
@@ -36,16 +48,28 @@ export default function usePatternSettings() {
 		[ settingsBlockPatterns, restBlockPatterns ]
 	);
 
+	const [ globalStyles, globalSettings ] = useMemo( () => {
+		return generateGlobalStyles( mergedConfig, [], {
+			disableRootPadding: false,
+		} );
+	}, [ mergedConfig ] );
+
 	const settings = useMemo( () => {
-		const { __experimentalAdditionalBlockPatterns, ...restStoredSettings } =
-			storedSettings;
+		const {
+			__experimentalAdditionalBlockPatterns,
+			styles,
+			__experimentalFeatures,
+			...restStoredSettings
+		} = storedSettings;
 
 		return {
 			...restStoredSettings,
+			styles: globalStyles,
+			__experimentalFeatures: globalSettings,
 			__experimentalBlockPatterns: blockPatterns,
 			isPreviewMode: true,
 		};
-	}, [ storedSettings, blockPatterns ] );
+	}, [ storedSettings, blockPatterns, globalStyles, globalSettings ] );
 
 	return settings;
 }

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

@@ -33,6 +33,7 @@ import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { defaultLayouts, getDefaultView } from './view-utils';
+import useNotesCount from './use-notes-count';
 
 const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -162,18 +163,34 @@ export default function PostList( { postType } ) {
 		totalPages,
 	} = useEntityRecordsWithPermissions( 'postType', postType, queryArgs );
 
+	const postIds = useMemo(
+		() => records?.map( ( record ) => record.id ) ?? [],
+		[ records ]
+	);
+	const { notesCount, isLoading: isLoadingNotesCount } =
+		useNotesCount( postIds );
+
 	// The REST API sort the authors by ID, but we want to sort them by name.
 	const data = useMemo( () => {
+		let processedRecords = records;
+
 		if ( view?.sort?.field === 'author' ) {
-			return filterSortAndPaginate(
+			processedRecords = filterSortAndPaginate(
 				records,
 				{ sort: { ...view.sort } },
 				fields
 			).data;
 		}
 
-		return records;
-	}, [ records, fields, view?.sort ] );
+		if ( processedRecords ) {
+			return processedRecords.map( ( record ) => ( {
+				...record,
+				notesCount: notesCount[ record.id ] ?? 0,
+			} ) );
+		}
+
+		return processedRecords;
+	}, [ records, fields, view?.sort, notesCount ] );
 
 	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
@@ -274,7 +291,7 @@ export default function PostList( { postType } ) {
 				fields={ fields }
 				actions={ actions }
 				data={ data || EMPTY_ARRAY }
-				isLoading={ isLoadingData }
+				isLoading={ isLoadingData || isLoadingNotesCount }
 				view={ view }
 				onChangeView={ onChangeView }
 				selection={ selection }

package/src/components/post-list/use-notes-count.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Hook to fetch notes counts for a list of post IDs.
+ *
+ * Notes are stored as comments with type 'note'.
+ * This hook fetches all notes for the given posts and returns
+ * a map of post ID to notes count.
+ *
+ * @param {number[]} postIds - Array of post IDs to fetch notes for.
+ * @return {{ notesCount: Object, isResolving: boolean }} Object with notesCount map and loading state.
+ */
+export default function useNotesCount( postIds ) {
+	const { records: notes, isResolving } = useEntityRecords(
+		'root',
+		'comment',
+		{
+			post: postIds,
+			type: 'note',
+			status: 'all',
+			per_page: -1,
+			_fields: 'id,post',
+		},
+		{
+			enabled: postIds?.length > 0,
+		}
+	);
+
+	const notesCount = useMemo( () => {
+		if ( ! notes || notes.length === 0 ) {
+			return {};
+		}
+
+		const counts = {};
+		notes.forEach( ( note ) => {
+			const postId = note.post;
+			counts[ postId ] = ( counts[ postId ] || 0 ) + 1;
+		} );
+
+		return counts;
+	}, [ notes ] );
+
+	return { notesCount, isResolving };
+}

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -31,7 +31,6 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 			<form className="sidebar-navigation__rename-modal-form">
 				<VStack spacing="3">
 					<TextControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -29,6 +29,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 		footer: {},
 		sidebar: {},
 		uncategorized: {},
+		overlay: {},
 	};
 
 	templatePartAreas.forEach(

package/src/style.scss

@@ -89,5 +89,3 @@ body.js.site-editor-php {
 		top: 0;
 	}
 }
-
-@include wordpress-admin-schemes();

package/build/components/add-new-template/add-custom-template-modal-content.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/add-new-template/add-custom-template-modal-content.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tFlex,\n\tFlexItem,\n\tSearchControl,\n\tTextHighlight,\n\tComposite,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useDebouncedInput } from '@wordpress/compose';\nimport { focus } from '@wordpress/dom';\nimport { safeDecodeURI } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { mapToIHasNameAndId } from './utils';\n\nconst EMPTY_ARRAY = [];\n\nfunction SuggestionListItem( {\n\tsuggestion,\n\tsearch,\n\tonSelect,\n\tentityForSuggestions,\n} ) {\n\tconst baseCssClass =\n\t\t'edit-site-custom-template-modal__suggestions_list__list-item';\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\tclassName={ baseCssClass }\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\tonSelect(\n\t\t\t\t\t\t\tentityForSuggestions.config.getSpecificTemplate(\n\t\t\t\t\t\t\t\tsuggestion\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Text\n\t\t\t\tsize=\"body\"\n\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\tweight={ 500 }\n\t\t\t\tclassName={ `${ baseCssClass }__title` }\n\t\t\t>\n\t\t\t\t<TextHighlight\n\t\t\t\t\ttext={ decodeEntities( suggestion.name ) }\n\t\t\t\t\thighlight={ search }\n\t\t\t\t/>\n\t\t\t</Text>\n\t\t\t{ suggestion.link && (\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\tclassName={ `${ baseCssClass }__info` }\n\t\t\t\t>\n\t\t\t\t\t{ safeDecodeURI( suggestion.link ) }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</Composite.Item>\n\t);\n}\n\nfunction useSearchSuggestions( entityForSuggestions, search ) {\n\tconst { config } = entityForSuggestions;\n\tconst query = useMemo(\n\t\t() => ( {\n\t\t\torder: 'asc',\n\t\t\tcontext: 'view',\n\t\t\tsearch,\n\t\t\tper_page: search ? 20 : 10,\n\t\t\t...config.queryArgs( search ),\n\t\t} ),\n\t\t[ search, config ]\n\t);\n\tconst { records: searchResults, hasResolved: searchHasResolved } =\n\t\tuseEntityRecords(\n\t\t\tentityForSuggestions.type,\n\t\t\tentityForSuggestions.slug,\n\t\t\tquery\n\t\t);\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tlet newSuggestions = EMPTY_ARRAY;\n\t\tif ( searchResults?.length ) {\n\t\t\tnewSuggestions = searchResults;\n\t\t\tif ( config.recordNamePath ) {\n\t\t\t\tnewSuggestions = mapToIHasNameAndId(\n\t\t\t\t\tnewSuggestions,\n\t\t\t\t\tconfig.recordNamePath\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\t// Update suggestions only when the query has resolved, so as to keep\n\t\t// the previous results in the UI.\n\t\tsetSuggestions( newSuggestions );\n\t}, [ searchResults, searchHasResolved ] );\n\treturn suggestions;\n}\n\nfunction SuggestionList( { entityForSuggestions, onSelect } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tconst suggestions = useSearchSuggestions(\n\t\tentityForSuggestions,\n\t\tdebouncedSearch\n\t);\n\tconst { labels } = entityForSuggestions;\n\tconst [ showSearchControl, setShowSearchControl ] = useState( false );\n\tif ( ! showSearchControl && suggestions?.length > 9 ) {\n\t\tsetShowSearchControl( true );\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ showSearchControl && (\n\t\t\t\t<SearchControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tonChange={ setSearch }\n\t\t\t\t\tvalue={ search }\n\t\t\t\t\tlabel={ labels.search_items }\n\t\t\t\t\tplaceholder={ labels.search_items }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! suggestions?.length && (\n\t\t\t\t<Composite\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName=\"edit-site-custom-template-modal__suggestions_list\"\n\t\t\t\t\taria-label={ __( 'Suggestions list' ) }\n\t\t\t\t>\n\t\t\t\t\t{ suggestions.map( ( suggestion ) => (\n\t\t\t\t\t\t<SuggestionListItem\n\t\t\t\t\t\t\tkey={ suggestion.slug }\n\t\t\t\t\t\t\tsuggestion={ suggestion }\n\t\t\t\t\t\t\tsearch={ debouncedSearch }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tentityForSuggestions={ entityForSuggestions }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Composite>\n\t\t\t) }\n\t\t\t{ debouncedSearch && ! suggestions?.length && (\n\t\t\t\t<Text\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tclassName=\"edit-site-custom-template-modal__no-results\"\n\t\t\t\t>\n\t\t\t\t\t{ labels.not_found }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction AddCustomTemplateModalContent( {\n\tonSelect,\n\tentityForSuggestions,\n\tonBack,\n\tcontainerRef,\n} ) {\n\tconst [ showSearchEntities, setShowSearchEntities ] = useState();\n\n\t// Focus on the first focusable element when the modal opens.\n\t// We handle focus management in the parent modal, just need to focus on the first focusable element.\n\tuseEffect( () => {\n\t\tif ( containerRef.current ) {\n\t\t\tconst [ firstFocusable ] = focus.focusable.find(\n\t\t\t\tcontainerRef.current\n\t\t\t);\n\t\t\tfirstFocusable?.focus();\n\t\t}\n\t}, [ showSearchEntities ] );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"edit-site-custom-template-modal__contents-wrapper\"\n\t\t\talignment=\"left\"\n\t\t>\n\t\t\t{ ! showSearchEntities && (\n\t\t\t\t<>\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Select whether to create a single template for all items or a specific one.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"edit-site-custom-template-modal__contents\"\n\t\t\t\t\t\tgap=\"4\"\n\t\t\t\t\t\talign=\"initial\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\t\t\tdescription,\n\t\t\t\t\t\t\t\t\ttemplatePrefix,\n\t\t\t\t\t\t\t\t} = entityForSuggestions.template;\n\t\t\t\t\t\t\t\tonSelect( {\n\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\t\t\tdescription,\n\t\t\t\t\t\t\t\t\ttemplatePrefix,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tweight={ 500 }\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.all_items }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.\n\t\t\t\t\t\t\t\t\t__( 'For all items' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowSearchEntities( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tweight={ 500 }\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.singular_name }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.\n\t\t\t\t\t\t\t\t\t__( 'For a specific item' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\t\t\t\t\t<Flex justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Flex>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ showSearchEntities && (\n\t\t\t\t<>\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'This template will be used only for the specific item chosen.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<SuggestionList\n\t\t\t\t\t\tentityForSuggestions={ entityForSuggestions }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t/>\n\t\t\t\t\t<Flex justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t// If general template exists, go directly back to main screen\n\t\t\t\t\t\t\t\t// instead of showing the choice screen\n\t\t\t\t\t\t\t\tif ( entityForSuggestions.hasGeneralTemplate ) {\n\t\t\t\t\t\t\t\t\tonBack();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetShowSearchEntities( false );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Flex>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default AddCustomTemplateModalContent;\n"],
-  "mappings": "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",
-  "names": ["Text", "VStack"]
-}