Template Parts: Return a stable reference for the defined 'area' (#53675

)

* Template Parts: Return a stable reference for the defined 'area'
* Move the HTML element description map outside of the component

packages/block-library/src/template-part/edit/advanced-controls.js

@@ -12,6 +12,27 @@ import { useSelect } from '@wordpress/data';
  */
 import { TemplatePartImportControls } from './import-controls';
 
+const htmlElementMessages = {
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+	article: __(
+		'The <article> element should represent a self-contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+};
+
 export function TemplatePartAdvancedControls( {
 	tagName,
 	setAttributes,
@@ -34,41 +55,19 @@ export function TemplatePartAdvancedControls( {
 		templatePartId
 	);
 
-	const { areaOptions } = useSelect( ( select ) => {
+	const definedAreas = useSelect( ( select ) => {
 		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
 		// Blocks can be loaded into a *non-post* block editor.
-		/* eslint-disable @wordpress/data-no-store-string-literals */
-		const definedAreas =
-			select( 'core/editor' ).__experimentalGetDefaultTemplatePartAreas();
-		/* eslint-enable @wordpress/data-no-store-string-literals */
-		return {
-			areaOptions: definedAreas.map( ( { label, area: _area } ) => ( {
-				label,
-				value: _area,
-			} ) ),
-		};
+		/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
+		return select(
+			'core/editor'
+		).__experimentalGetDefaultTemplatePartAreas();
 	}, [] );
 
-	const htmlElementMessages = {
-		header: __(
-			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-		),
-		main: __(
-			'The <main> element should be used for the primary content of your document only. '
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		article: __(
-			'The <article> element should represent a self-contained, syndicatable portion of the document.'
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-		footer: __(
-			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-		),
-	};
+	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
+		label,
+		value: _area,
+	} ) );
 
 	return (
 		<InspectorControls group="advanced">