Handle cases when a post type has no published entities

packages/edit-site/src/components/add-new-template/new-template.js

@@ -38,15 +38,15 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import AddCustomTemplateModal from './add-custom-template-modal';
-import { usePostTypes } from './utils';
+import { usePostTypes, usePostTypesHaveEntities } from './utils';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 // TODO: check why we need info from `__experimentalGetDefaultTemplateTypes` and here in js..
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	// TODO: Info about this need to be change from `post` to make it clear we are creating `single` template.
-	// 'single',
+	'single',
 	'page',
 	'index',
 	'archive',
@@ -78,6 +78,7 @@ const TEMPLATE_ICONS = {
 export default function NewTemplate( { postType } ) {
 	const history = useHistory();
 	const postTypes = usePostTypes();
+	const postTypesHaveEntities = usePostTypesHaveEntities();
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] = useState(
 		false
 	);
@@ -150,8 +151,6 @@ export default function NewTemplate( { postType } ) {
 			! includes( existingTemplateSlugs, template.slug )
 	);
 
-	// TODO: we might need to check if there are `posts` from the $postType as,
-	// it would show a search with no posts available..
 	// TODO: make all strings translatable.
 	const extraTemplates = ( postTypes || [] ).reduce(
 		( accumulator, _postType ) => {
@@ -164,12 +163,16 @@ export default function NewTemplate( { postType } ) {
 			const hasGeneralTemplate = existingTemplateSlugs?.includes(
 				`single-${ slug }`
 			);
-			accumulator.push( {
+			const hasEntities = postTypesHaveEntities?.[ slug ];
+			const menuItem = {
 				slug: `single-${ slug }`,
 				title: `Single ${ singularName }`,
 				description: `Displays a single ${ singularName }.`,
 				icon,
-				onClick: ( template ) => {
+			};
+			// We have a different template creation flow only if they have entities.
+			if ( hasEntities ) {
+				menuItem.onClick = ( template ) => {
 					const slugsWithTemplates = (
 						existingTemplates || []
 					).reduce( ( _accumulator, existingTemplate ) => {
@@ -190,8 +193,13 @@ export default function NewTemplate( { postType } ) {
 						template,
 						slugsWithTemplates,
 					} );
-				},
-			} );
+				};
+			}
+			// We don't need to add the menu item if there are no
+			// entities and the general template exists.
+			if ( ! hasGeneralTemplate || hasEntities ) {
+				accumulator.push( menuItem );
+			}
 			// Add conditionally the `archive-$post_type` item.
 			// `post` is a special post type and doesn't have `archive-post`.
 			if (

packages/edit-site/src/components/add-new-template/utils.js

@@ -23,6 +23,32 @@ export const usePostTypes = () => {
 	return filteredPostTypes;
 };
 
+export const usePostTypesHaveEntities = () => {
+	const postTypes = usePostTypes();
+	const postTypesHaveEntities = useSelect(
+		( select ) => {
+			return postTypes?.reduce( ( accumulator, { slug } ) => {
+				accumulator[ slug ] = !! select( coreStore ).getEntityRecords(
+					'postType',
+					slug,
+					{
+						per_page: 1,
+						_fields: 'id',
+						context: 'view',
+					}
+				)?.length;
+				return accumulator;
+			}, {} );
+		},
+		// It's important to use `length` as a dependency because `usePostTypes`
+		// returns a new array every time and will triger a rerender.
+		// We can't avoid that because `post types` endpoint doesn't allow filtering
+		// with `viewable` prop right now.
+		[ postTypes?.length ]
+	);
+	return postTypesHaveEntities;
+};
+
 export const useExistingEntitiesToExclude = ( entityForSuggestions ) => {
 	const { slugsWithTemplates, type, slug } = entityForSuggestions;
 	const { results, hasResolved } = useSelect( ( select ) => {