From 556248227df7c6d0fdaab6bdf9f5ff74590fb2b0 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 19 Oct 2021 17:09:10 +0800
Subject: [PATCH] Fix missing titles in general areas (#35657)

* Fix general areas don't have names

* Switch to the new template part icon
---
 packages/block-library/src/template-part/variations.js     | 4 ++--
 .../navigation-sidebar/navigation-panel/constants.js       | 3 ++-
 .../template-part-converter/convert-to-template-part.js    | 7 ++++++-
 packages/edit-site/src/store/constants.js                  | 2 ++
 packages/editor/src/utils/get-template-part-icon.js        | 4 ++--
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/template-part/variations.js b/packages/block-library/src/template-part/variations.js
index da41d03f22339..ca862f5993ccc 100644
--- a/packages/block-library/src/template-part/variations.js
+++ b/packages/block-library/src/template-part/variations.js
@@ -7,7 +7,7 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
-	layout as layoutIcon,
+	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 
 /**
@@ -23,7 +23,7 @@ function getTemplatePartIcon( iconName ) {
 	} else if ( 'sidebar' === iconName ) {
 		return sidebarIcon;
 	}
-	return layoutIcon;
+	return symbolFilledIcon;
 }
 
 export function enhanceTemplatePartVariations( settings, name ) {
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
index ae97bb567f473..f601df39d6139 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
@@ -10,6 +10,7 @@ import {
 	TEMPLATE_PART_AREA_HEADER,
 	TEMPLATE_PART_AREA_FOOTER,
 	TEMPLATE_PART_AREA_SIDEBAR,
+	TEMPLATE_PART_AREA_GENERAL,
 } from '../../../store/constants';
 
 export const TEMPLATES_PRIMARY = [
@@ -101,7 +102,7 @@ export const TEMPLATE_PARTS_SUB_MENUS = [
 		title: __( 'sidebars' ),
 	},
 	{
-		area: 'uncategorized',
+		area: TEMPLATE_PART_AREA_GENERAL,
 		menu: MENU_TEMPLATE_PARTS_GENERAL,
 		title: __( 'general' ),
 	},
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
index c43bb4d77640b..7274344816f1f 100644
--- a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
+++ b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -33,6 +33,11 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '@wordpress/editor';
 import { check } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const instanceId = useInstanceId( ConvertToTemplatePart );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -40,7 +45,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const [ area, setArea ] = useState( 'uncategorized' );
+	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
 
 	const templatePartAreas = useSelect(
 		( select ) =>
diff --git a/packages/edit-site/src/store/constants.js b/packages/edit-site/src/store/constants.js
index ca1d0a659a80b..0d876e77bf223 100644
--- a/packages/edit-site/src/store/constants.js
+++ b/packages/edit-site/src/store/constants.js
@@ -13,9 +13,11 @@ export const STORE_NAME = 'core/edit-site';
 export const TEMPLATE_PART_AREA_HEADER = 'header';
 export const TEMPLATE_PART_AREA_FOOTER = 'footer';
 export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
+export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';
 
 export const TEMPLATE_PART_AREA_TO_NAME = {
 	[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
 	[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
 	[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
+	[ TEMPLATE_PART_AREA_GENERAL ]: __( 'General' ),
 };
diff --git a/packages/editor/src/utils/get-template-part-icon.js b/packages/editor/src/utils/get-template-part-icon.js
index 1e5c052b0e35d..6c37fc373fcfc 100644
--- a/packages/editor/src/utils/get-template-part-icon.js
+++ b/packages/editor/src/utils/get-template-part-icon.js
@@ -5,7 +5,7 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
-	layout as layoutIcon,
+	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 /**
  * Helper function to retrieve the corresponding icon by name.
@@ -22,5 +22,5 @@ export function getTemplatePartIcon( iconName ) {
 	} else if ( 'sidebar' === iconName ) {
 		return sidebarIcon;
 	}
-	return layoutIcon;
+	return symbolFilledIcon;
 }