@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

package/build-style/style.css

@@ -722,6 +722,12 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-radius: 2px;
 }
 
+.edit-site-typography-panel__full-width-control {
+  grid-column: 1/-1;
+  max-width: 100%;
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
   margin: 16px;
 }
@@ -741,6 +747,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  flex-shrink: 0;
 }
 
 .edit-site-global-styles-header__description,
@@ -770,10 +777,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   padding: 16px;
 }
 
-.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
-  padding: 16px;
-}
-
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
 }
@@ -798,6 +801,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles__color-indicator-wrapper {
   height: 24px;
+  flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .edit-site-header {
@@ -1001,14 +1011,13 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   padding-left: 6px;
   padding-right: 6px;
 }
+.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
+  content: none;
+}
 .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
   height: 36px;
-  padding: 0 6px;
-}
-.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle::after,
-.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
-  content: none;
+  padding: 0 8px;
 }
 .show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
   margin-left: 8px;
@@ -1490,30 +1499,36 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
-.edit-site-custom-template-modal__contents > div {
-  text-align: center;
-  cursor: pointer;
+.edit-site-custom-template-modal__contents > .components-button {
   padding: 24px;
-  border: 1px solid #ddd;
+  box-shadow: inset 0 0 0 1px #949494;
   border-radius: 2px;
   width: 256px;
+  height: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  align-items: center;
-  justify-content: center;
+  outline: 1px solid transparent;
+}
+.edit-site-custom-template-modal__contents > .components-button span:first-child {
+  color: #1e1e1e;
 }
-.edit-site-custom-template-modal__contents > div span {
+.edit-site-custom-template-modal__contents > .components-button span {
   color: #757575;
 }
-.edit-site-custom-template-modal__contents > div:hover {
-  border-color: var(--wp-admin-theme-color);
+.edit-site-custom-template-modal__contents > .components-button:hover {
+  color: var(--wp-admin-theme-color-darker-10);
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
 }
-.edit-site-custom-template-modal__contents > div:hover h5 {
+.edit-site-custom-template-modal__contents > .components-button:hover span:first-child {
   color: var(--wp-admin-theme-color);
 }
-.edit-site-custom-template-modal__contents > div:focus {
+.edit-site-custom-template-modal__contents > .components-button:focus {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 3px solid transparent;
+}
+.edit-site-custom-template-modal__contents > .components-button:focus span:first-child {
+  color: var(--wp-admin-theme-color);
 }
 .edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
   background: #fff;
@@ -1658,6 +1673,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-column: span 1;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
+  grid-column: 1/-1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;
@@ -1883,6 +1902,7 @@ html.wp-toolbar {
   position: relative;
   height: 100%;
   display: block;
+  overflow: hidden;
 }
 .edit-site-visual-editor iframe {
   display: block;
@@ -1944,11 +1964,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
   border-top: 1px solid #ccc;
 }
-.edit-site-template-details .edit-site-template-details__title {
-  margin: 0;
-}
 .edit-site-template-details .edit-site-template-details__description {
-  margin: 12px 0 0;
   color: #757575;
 }
 .edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas {
@@ -2188,40 +2204,31 @@ html.wp-toolbar {
   background: #fff;
 }
 
-body.appearance_page_gutenberg-edit-site,
 body.site-editor-php {
   background: #fff;
   /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
      Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
-body.appearance_page_gutenberg-edit-site #wpcontent,
 body.site-editor-php #wpcontent {
   padding-left: 0;
 }
-body.appearance_page_gutenberg-edit-site #wpbody-content,
 body.site-editor-php #wpbody-content {
   padding-bottom: 0;
 }
-body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta),
 body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
   display: none;
 }
-body.appearance_page_gutenberg-edit-site #wpfooter,
 body.site-editor-php #wpfooter {
   display: none;
 }
-body.appearance_page_gutenberg-edit-site .a11y-speak-region,
 body.site-editor-php .a11y-speak-region {
   left: -1px;
   top: -1px;
 }
-body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after,
-body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after,
 body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
 body.site-editor-php ul#adminmenu > li.current > a.current::after {
   border-right-color: #fff;
 }
-body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type,
 body.site-editor-php .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.10.0",
+	"version": "4.12.1-next.d6164808d3.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.13.0",
-		"@wordpress/api-fetch": "^6.10.0",
-		"@wordpress/block-editor": "^9.5.0",
-		"@wordpress/block-library": "^7.10.0",
-		"@wordpress/blocks": "^11.12.0",
-		"@wordpress/components": "^19.15.0",
-		"@wordpress/compose": "^5.11.0",
-		"@wordpress/core-data": "^4.11.0",
-		"@wordpress/data": "^6.13.0",
-		"@wordpress/deprecated": "^3.13.0",
-		"@wordpress/editor": "^12.12.0",
-		"@wordpress/element": "^4.11.0",
-		"@wordpress/hooks": "^3.13.0",
-		"@wordpress/html-entities": "^3.13.0",
-		"@wordpress/i18n": "^4.13.0",
-		"@wordpress/icons": "^9.4.0",
-		"@wordpress/interface": "^4.12.0",
-		"@wordpress/keyboard-shortcuts": "^3.11.0",
-		"@wordpress/keycodes": "^3.13.0",
-		"@wordpress/media-utils": "^4.4.0",
-		"@wordpress/notices": "^3.13.0",
-		"@wordpress/plugins": "^4.11.0",
-		"@wordpress/preferences": "^2.5.0",
-		"@wordpress/reusable-blocks": "^3.11.0",
-		"@wordpress/style-engine": "^0.12.0",
-		"@wordpress/url": "^3.14.0",
-		"@wordpress/viewport": "^4.11.0",
+		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
+		"@wordpress/block-editor": "^9.7.1-next.d6164808d3.0",
+		"@wordpress/block-library": "^7.12.2-next.d6164808d3.0",
+		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
+		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
+		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/core-data": "^4.14.1-next.d6164808d3.0",
+		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
+		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/editor": "^12.14.1-next.d6164808d3.0",
+		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
+		"@wordpress/interface": "^4.14.1-next.d6164808d3.0",
+		"@wordpress/keyboard-shortcuts": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/media-utils": "^4.6.1-next.d6164808d3.0",
+		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/plugins": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/preferences": "^2.7.1-next.d6164808d3.0",
+		"@wordpress/reusable-blocks": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/style-engine": "^0.14.1-next.d6164808d3.0",
+		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
+		"@wordpress/viewport": "^4.13.1-next.d6164808d3.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

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

@@ -11,7 +11,6 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
-	__experimentalHeading as Heading,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -26,34 +25,6 @@ import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
 
-function selectSuggestion( suggestion, onSelect, entityForSuggestions ) {
-	const {
-		labels,
-		slug,
-		config: { templateSlug, templatePrefix },
-	} = entityForSuggestions;
-	const title = sprintf(
-		// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a post type or taxonomy and %2$s is the name of the post or term, e.g. "Post: Hello, WordPress", "Category: shoes"
-		__( '%1$s: %2$s' ),
-		labels.singular_name,
-		suggestion.name
-	);
-	let newTemplateSlug = `${ templateSlug || slug }-${ suggestion.slug }`;
-	if ( templatePrefix ) {
-		newTemplateSlug = templatePrefix + newTemplateSlug;
-	}
-	const newTemplate = {
-		title,
-		description: sprintf(
-			// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Post: Hello, WordPress"
-			__( 'Template for %1$s' ),
-			title
-		),
-		slug: newTemplateSlug,
-	};
-	onSelect( newTemplate );
-}
-
 function SuggestionListItem( {
 	suggestion,
 	search,
@@ -70,7 +41,11 @@ function SuggestionListItem( {
 			{ ...composite }
 			className={ baseCssClass }
 			onClick={ () =>
-				selectSuggestion( suggestion, onSelect, entityForSuggestions )
+				onSelect(
+					entityForSuggestions.config.getSpecificTemplate(
+						suggestion
+					)
+				)
 			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
@@ -98,18 +73,16 @@ function useDebouncedInput() {
 }
 
 function useSearchSuggestions( entityForSuggestions, search ) {
-	const { config, postsToExclude } = entityForSuggestions;
+	const { config } = entityForSuggestions;
 	const query = useMemo(
 		() => ( {
 			order: 'asc',
-			_fields: 'id,name,title,slug,link',
 			context: 'view',
 			search,
-			orderBy: config.getOrderBy( { search } ),
-			exclude: postsToExclude,
 			per_page: search ? 20 : 10,
+			...config.queryArgs( search ),
 		} ),
-		[ search, config, postsToExclude ]
+		[ search, config ]
 	);
 	const { records: searchResults, hasResolved: searchHasResolved } =
 		useEntityRecords(
@@ -145,19 +118,26 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		debouncedSearch
 	);
 	const { labels } = entityForSuggestions;
+	const [ showSearchControl, setShowSearchControl ] = useState( false );
+	if ( ! showSearchControl && suggestions?.length > 9 ) {
+		setShowSearchControl( true );
+	}
 	return (
 		<>
-			<SearchControl
-				onChange={ setSearch }
-				value={ search }
-				label={ labels.search_items }
-				placeholder={ labels.search_items }
-			/>
+			{ showSearchControl && (
+				<SearchControl
+					onChange={ setSearch }
+					value={ search }
+					label={ labels.search_items }
+					placeholder={ labels.search_items }
+				/>
+			) }
 			{ !! suggestions?.length && (
 				<Composite
 					{ ...composite }
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
+					aria-label={ __( 'Suggestions list' ) }
 				>
 					{ suggestions.map( ( suggestion ) => (
 						<SuggestionListItem
@@ -210,15 +190,25 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 					>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
-								const { slug, title, description } =
-									entityForSuggestions.template;
-								onSelect( { slug, title, description } );
+								const {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} = entityForSuggestions.template;
+								onSelect( {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.all_items }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// 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.
@@ -228,13 +218,14 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 						</FlexItem>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
 								setShowSearchEntities( true );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.singular_name }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// 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.

package/src/components/add-new-template/new-template.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -26,7 +28,7 @@ import {
 	tag,
 	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -36,13 +38,9 @@ import AddCustomTemplateModal from './add-custom-template-modal';
 import {
 	useExistingTemplates,
 	useDefaultTemplateTypes,
-	entitiesConfig,
-	usePostTypes,
-	usePostTypePage,
-	useTaxonomies,
-	useTaxonomyCategory,
-	useTaxonomyTag,
-	useExtraTemplates,
+	useTaxonomiesMenuItems,
+	usePostTypeMenuItems,
+	useAuthorMenuItem,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -90,12 +88,25 @@ export default function NewTemplate( { postType } ) {
 
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
-			const { title, description, slug } = template;
+			const { title, description, slug, templatePrefix } = template;
+			let templateContent = template.content;
+			// Try to find fallback content from existing templates.
+			if ( ! templateContent ) {
+				const fallbackTemplate = await apiFetch( {
+					path: addQueryArgs( '/wp/v2/templates/lookup', {
+						slug,
+						is_custom: ! isWPSuggestion,
+						template_prefix: templatePrefix,
+					} ),
+				} );
+				templateContent = fallbackTemplate.content;
+			}
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -105,6 +116,7 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
+					content: templateContent,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
 					is_wp_suggestion: isWPSuggestion,
 				},
@@ -119,8 +131,16 @@ export default function NewTemplate( { postType } ) {
 				postId: newTemplate.id,
 				postType: newTemplate.type,
 			} );
-
-			// TODO: Add a success notice?
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
@@ -225,19 +245,11 @@ function useMissingTemplates(
 	setEntityForSuggestions,
 	setShowCustomTemplateModal
 ) {
-	const postTypes = usePostTypes();
-	const pagePostType = usePostTypePage();
-	const taxonomies = useTaxonomies();
-	const categoryTaxonomy = useTaxonomyCategory();
-	const tagTaxonomy = useTaxonomyTag();
-
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
-
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
 		( { slug } ) => slug
 	);
-
 	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
 		( template ) =>
 			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
@@ -247,33 +259,27 @@ function useMissingTemplates(
 		setShowCustomTemplateModal( true );
 		setEntityForSuggestions( _entityForSuggestions );
 	};
-	// TODO: find better names for these variables. `useExtraTemplates` returns an array of items.
-	const categoryMenuItem = useExtraTemplates(
-		categoryTaxonomy,
-		entitiesConfig.category,
-		onClickMenuItem
-	);
-	const tagMenuItem = useExtraTemplates(
-		tagTaxonomy,
-		entitiesConfig.tag,
-		onClickMenuItem
-	);
-	const pageMenuItem = useExtraTemplates(
-		pagePostType,
-		entitiesConfig.page,
-		onClickMenuItem
-	);
 	// We need to replace existing default template types with
 	// the create specific template functionality. The original
 	// info (title, description, etc.) is preserved in the
-	// `useExtraTemplates` hook.
+	// used hooks.
 	const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
-	[ categoryMenuItem, tagMenuItem, pageMenuItem ].forEach( ( menuItem ) => {
-		if ( ! menuItem?.length ) {
+	const { defaultTaxonomiesMenuItems, taxonomiesMenuItems } =
+		useTaxonomiesMenuItems( onClickMenuItem );
+	const { defaultPostTypesMenuItems, postTypesMenuItems } =
+		usePostTypeMenuItems( onClickMenuItem );
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].forEach( ( menuItem ) => {
+		if ( ! menuItem ) {
 			return;
 		}
 		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-			( template ) => template.slug === menuItem[ 0 ].slug
+			( template ) => template.slug === menuItem.slug
 		);
 		// Some default template types might have been filtered above from
 		// `missingDefaultTemplates` because they only check for the general
@@ -281,13 +287,9 @@ function useMissingTemplates(
 		// with the check if it has available specific item to create a
 		// template for.
 		if ( matchIndex > -1 ) {
-			enhancedMissingDefaultTemplateTypes.splice(
-				matchIndex,
-				1,
-				menuItem[ 0 ]
-			);
+			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
 		} else {
-			enhancedMissingDefaultTemplateTypes.push( menuItem[ 0 ] );
+			enhancedMissingDefaultTemplateTypes.push( menuItem );
 		}
 	} );
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
@@ -297,20 +299,10 @@ function useMissingTemplates(
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
 		);
 	} );
-	const extraPostTypeTemplates = useExtraTemplates(
-		postTypes,
-		entitiesConfig.postType,
-		onClickMenuItem
-	);
-	const extraTaxonomyTemplates = useExtraTemplates(
-		taxonomies,
-		entitiesConfig.taxonomy,
-		onClickMenuItem
-	);
 	const missingTemplates = [
 		...enhancedMissingDefaultTemplateTypes,
-		...extraPostTypeTemplates,
-		...extraTaxonomyTemplates,
+		...postTypesMenuItems,
+		...taxonomiesMenuItems,
 	];
 	return missingTemplates;
 }

package/src/components/add-new-template/style.scss

@@ -12,33 +12,45 @@
 
 .edit-site-custom-template-modal {
 	&__contents {
-		> div {
-			text-align: center;
-			cursor: pointer;
+		> .components-button {
 			padding: $grid-unit-30;
-			border: 1px solid $gray-300;
+			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
 			width: 256px;
+			height: auto;
 			display: flex;
 			flex-direction: column;
 			gap: $grid-unit;
-			align-items: center;
-			justify-content: center;
+
+			// Show the boundary of the button, in High Contrast Mode.
+			outline: 1px solid transparent;
+
+			span:first-child {
+				color: $gray-900;
+			}
 
 			span {
 				color: $gray-700;
 			}
 
 			&:hover {
-				border-color: var(--wp-admin-theme-color);
+				color: var(--wp-admin-theme-color-darker-10);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
 
-				h5 {
+				span:first-child {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 3px solid transparent;
+
+				span:first-child {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}