From 97e1803bb9cc9502929d94c9828aba44f5521513 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 18 Jan 2024 23:11:08 +0100
Subject: [PATCH 1/4] Template Part & Query: avoid server requests on mount

---
 .../query/edit/inspector-controls/index.js    | 283 +++++++++---------
 .../src/query/edit/query-content.js           |  16 +-
 .../template-part/edit/advanced-controls.js   |   5 +-
 .../src/template-part/edit/index.js           |  19 +-
 4 files changed, 159 insertions(+), 164 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 398016728c499..eb5abe9c24d98 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -12,10 +12,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	InspectorControls,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
@@ -138,156 +135,150 @@ export default function QueryInspectorControls( props ) {
 				<CreateNewPostLink { ...props } />
 			</BlockInfo>
 			{ showSettingsPanel && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						{ showInheritControl && (
-							<ToggleControl
-								__nextHasNoMarginBottom
-								label={ __( 'Inherit query from template' ) }
-								help={ __(
-									'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-								) }
-								checked={ !! inherit }
-								onChange={ ( value ) =>
-									setQuery( { inherit: !! value } )
-								}
-							/>
-						) }
-						{ showPostTypeControl && (
-							<SelectControl
+				<PanelBody title={ __( 'Settings' ) }>
+					{ showInheritControl && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Inherit query from template' ) }
+							help={ __(
+								'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
+							) }
+							checked={ !! inherit }
+							onChange={ ( value ) =>
+								setQuery( { inherit: !! value } )
+							}
+						/>
+					) }
+					{ showPostTypeControl && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							options={ postTypesSelectOptions }
+							value={ postType }
+							label={ __( 'Post type' ) }
+							onChange={ onPostTypeChange }
+							help={ __(
+								'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+							) }
+						/>
+					) }
+					{ showColumnsControl && (
+						<>
+							<RangeControl
 								__nextHasNoMarginBottom
-								options={ postTypesSelectOptions }
-								value={ postType }
-								label={ __( 'Post type' ) }
-								onChange={ onPostTypeChange }
-								help={ __(
-									'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
-								) }
-							/>
-						) }
-						{ showColumnsControl && (
-							<>
-								<RangeControl
-									__nextHasNoMarginBottom
-									label={ __( 'Columns' ) }
-									value={ displayLayout.columns }
-									onChange={ ( value ) =>
-										setDisplayLayout( {
-											columns: value,
-										} )
-									}
-									min={ 2 }
-									max={ Math.max( 6, displayLayout.columns ) }
-								/>
-								{ displayLayout.columns > 6 && (
-									<Notice
-										status="warning"
-										isDismissible={ false }
-									>
-										{ __(
-											'This column count exceeds the recommended amount and may cause visual breakage.'
-										) }
-									</Notice>
-								) }
-							</>
-						) }
-						{ showOrderControl && (
-							<OrderControl
-								{ ...{ order, orderBy } }
-								onChange={ setQuery }
-							/>
-						) }
-						{ showStickyControl && (
-							<StickyControl
-								value={ sticky }
+								label={ __( 'Columns' ) }
+								value={ displayLayout.columns }
 								onChange={ ( value ) =>
-									setQuery( { sticky: value } )
+									setDisplayLayout( {
+										columns: value,
+									} )
 								}
+								min={ 2 }
+								max={ Math.max( 6, displayLayout.columns ) }
 							/>
-						) }
-						<EnhancedPaginationControl
-							enhancedPagination={ enhancedPagination }
-							setAttributes={ setAttributes }
-							clientId={ clientId }
+							{ displayLayout.columns > 6 && (
+								<Notice
+									status="warning"
+									isDismissible={ false }
+								>
+									{ __(
+										'This column count exceeds the recommended amount and may cause visual breakage.'
+									) }
+								</Notice>
+							) }
+						</>
+					) }
+					{ showOrderControl && (
+						<OrderControl
+							{ ...{ order, orderBy } }
+							onChange={ setQuery }
+						/>
+					) }
+					{ showStickyControl && (
+						<StickyControl
+							value={ sticky }
+							onChange={ ( value ) =>
+								setQuery( { sticky: value } )
+							}
 						/>
-					</PanelBody>
-				</InspectorControls>
+					) }
+					<EnhancedPaginationControl
+						enhancedPagination={ enhancedPagination }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</PanelBody>
 			) }
 			{ ! inherit && showFiltersPanel && (
-				<InspectorControls>
-					<ToolsPanel
-						className="block-library-query-toolspanel__filters"
-						label={ __( 'Filters' ) }
-						resetAll={ () => {
-							setQuery( {
-								author: '',
-								parents: [],
-								search: '',
-								taxQuery: null,
-							} );
-							setQuerySearch( '' );
-						} }
-						dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
-					>
-						{ showTaxControl && (
-							<ToolsPanelItem
-								label={ __( 'Taxonomies' ) }
-								hasValue={ () =>
-									Object.values( taxQuery || {} ).some(
-										( terms ) => !! terms.length
-									)
-								}
-								onDeselect={ () =>
-									setQuery( { taxQuery: null } )
-								}
-							>
-								<TaxonomyControls
-									onChange={ setQuery }
-									query={ query }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ showAuthorControl && (
-							<ToolsPanelItem
-								hasValue={ () => !! authorIds }
-								label={ __( 'Authors' ) }
-								onDeselect={ () => setQuery( { author: '' } ) }
-							>
-								<AuthorControl
-									value={ authorIds }
-									onChange={ setQuery }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ showSearchControl && (
-							<ToolsPanelItem
-								hasValue={ () => !! querySearch }
+				<ToolsPanel
+					className="block-library-query-toolspanel__filters"
+					label={ __( 'Filters' ) }
+					resetAll={ () => {
+						setQuery( {
+							author: '',
+							parents: [],
+							search: '',
+							taxQuery: null,
+						} );
+						setQuerySearch( '' );
+					} }
+					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				>
+					{ showTaxControl && (
+						<ToolsPanelItem
+							label={ __( 'Taxonomies' ) }
+							hasValue={ () =>
+								Object.values( taxQuery || {} ).some(
+									( terms ) => !! terms.length
+								)
+							}
+							onDeselect={ () => setQuery( { taxQuery: null } ) }
+						>
+							<TaxonomyControls
+								onChange={ setQuery }
+								query={ query }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showAuthorControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! authorIds }
+							label={ __( 'Authors' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showSearchControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								__nextHasNoMarginBottom
 								label={ __( 'Keyword' ) }
-								onDeselect={ () => setQuerySearch( '' ) }
-							>
-								<TextControl
-									__nextHasNoMarginBottom
-									label={ __( 'Keyword' ) }
-									value={ querySearch }
-									onChange={ setQuerySearch }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ showParentControl && (
-							<ToolsPanelItem
-								hasValue={ () => !! parents?.length }
-								label={ __( 'Parents' ) }
-								onDeselect={ () => setQuery( { parents: [] } ) }
-							>
-								<ParentControl
-									parents={ parents }
-									postType={ postType }
-									onChange={ setQuery }
-								/>
-							</ToolsPanelItem>
-						) }
-					</ToolsPanel>
-				</InspectorControls>
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showParentControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! parents?.length }
+							label={ __( 'Parents' ) }
+							onDeselect={ () => setQuery( { parents: [] } ) }
+						>
+							<ParentControl
+								parents={ parents }
+								postType={ postType }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			) }
 		</>
 	);
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 4d9b8885cb15e..77f9fb211e335 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -112,13 +112,15 @@ export default function QueryContent( {
 				setAttributes={ setAttributes }
 				clientId={ clientId }
 			/>
-			<QueryInspectorControls
-				attributes={ attributes }
-				setQuery={ updateQuery }
-				setDisplayLayout={ updateDisplayLayout }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
+			<InspectorControls>
+				<QueryInspectorControls
+					attributes={ attributes }
+					setQuery={ updateQuery }
+					setDisplayLayout={ updateDisplayLayout }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
 			<BlockControls>
 				<QueryToolbar
 					name={ name }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index 8ad4b4bdbeb1d..44562c472dd4f 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -4,7 +4,6 @@
 import { useEntityProp } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -70,7 +69,7 @@ export function TemplatePartAdvancedControls( {
 	} ) );
 
 	return (
-		<InspectorControls group="advanced">
+		<>
 			{ isEntityAvailable && (
 				<>
 					<TextControl
@@ -124,6 +123,6 @@ export function TemplatePartAdvancedControls( {
 					setAttributes={ setAttributes }
 				/>
 			) }
-		</InspectorControls>
+		</>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 888f767635924..ec92996978bd6 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -9,6 +9,7 @@ import {
 	store as blockEditorStore,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
+	InspectorControls,
 } from '@wordpress/block-editor';
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -159,14 +160,16 @@ export default function TemplatePartEdit( {
 	return (
 		<>
 			<RecursionProvider uniqueId={ templatePartId }>
-				<TemplatePartAdvancedControls
-					tagName={ tagName }
-					setAttributes={ setAttributes }
-					isEntityAvailable={ isEntityAvailable }
-					templatePartId={ templatePartId }
-					defaultWrapper={ areaObject.tagName }
-					hasInnerBlocks={ innerBlocks.length > 0 }
-				/>
+				<InspectorControls group="advanced">
+					<TemplatePartAdvancedControls
+						tagName={ tagName }
+						setAttributes={ setAttributes }
+						isEntityAvailable={ isEntityAvailable }
+						templatePartId={ templatePartId }
+						defaultWrapper={ areaObject.tagName }
+						hasInnerBlocks={ innerBlocks.length > 0 }
+					/>
+				</InspectorControls>
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
 						<TemplatePartPlaceholder

From b78d18747cffcc9f514e9a9fa921c164f2e2f6f5 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 18 Jan 2024 23:39:31 +0100
Subject: [PATCH 2/4] Also EditTemplatePartMenuItem

---
 .../edit-site/src/hooks/template-part-edit.js | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/hooks/template-part-edit.js b/packages/edit-site/src/hooks/template-part-edit.js
index e60b7945448e7..cc5d2fc411cf3 100644
--- a/packages/edit-site/src/hooks/template-part-edit.js
+++ b/packages/edit-site/src/hooks/template-part-edit.js
@@ -52,16 +52,14 @@ function EditTemplatePartMenuItem( { attributes } ) {
 	}
 
 	return (
-		<BlockControls group="other">
-			<ToolbarButton
-				{ ...linkProps }
-				onClick={ ( event ) => {
-					linkProps.onClick( event );
-				} }
-			>
-				{ __( 'Edit' ) }
-			</ToolbarButton>
-		</BlockControls>
+		<ToolbarButton
+			{ ...linkProps }
+			onClick={ ( event ) => {
+				linkProps.onClick( event );
+			} }
+		>
+			{ __( 'Edit' ) }
+		</ToolbarButton>
 	);
 }
 
@@ -74,7 +72,9 @@ export const withEditBlockControls = createHigherOrderComponent(
 			<>
 				<BlockEdit { ...props } />
 				{ isDisplayed && (
-					<EditTemplatePartMenuItem attributes={ attributes } />
+					<BlockControls group="other">
+						<EditTemplatePartMenuItem attributes={ attributes } />
+					</BlockControls>
 				) }
 			</>
 		);

From 027341142cf4ea9fc52e9dda031028dcc0e69614 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Fri, 19 Jan 2024 09:25:12 +0100
Subject: [PATCH 3/4] Avoid BlockControls mount for all blocks

---
 packages/edit-site/src/hooks/template-part-edit.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/hooks/template-part-edit.js b/packages/edit-site/src/hooks/template-part-edit.js
index cc5d2fc411cf3..234a2ba356ee1 100644
--- a/packages/edit-site/src/hooks/template-part-edit.js
+++ b/packages/edit-site/src/hooks/template-part-edit.js
@@ -68,14 +68,16 @@ export const withEditBlockControls = createHigherOrderComponent(
 		const { attributes, name } = props;
 		const isDisplayed = name === 'core/template-part' && attributes.slug;
 
+		if ( ! isDisplayed ) {
+			return <BlockEdit { ...props } />;
+		}
+
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ isDisplayed && (
-					<BlockControls group="other">
-						<EditTemplatePartMenuItem attributes={ attributes } />
-					</BlockControls>
-				) }
+				<BlockControls group="other">
+					<EditTemplatePartMenuItem attributes={ attributes } />
+				</BlockControls>
 			</>
 		);
 	},

From b20a1146f2c0e1235e5904a2c5a1fdfcff4e818e Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Fri, 19 Jan 2024 11:14:33 +0100
Subject: [PATCH 4/4] Address remounting concern

---
 packages/edit-site/src/hooks/template-part-edit.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/hooks/template-part-edit.js b/packages/edit-site/src/hooks/template-part-edit.js
index 234a2ba356ee1..1c5c47a68fbfb 100644
--- a/packages/edit-site/src/hooks/template-part-edit.js
+++ b/packages/edit-site/src/hooks/template-part-edit.js
@@ -68,16 +68,14 @@ export const withEditBlockControls = createHigherOrderComponent(
 		const { attributes, name } = props;
 		const isDisplayed = name === 'core/template-part' && attributes.slug;
 
-		if ( ! isDisplayed ) {
-			return <BlockEdit { ...props } />;
-		}
-
 		return (
 			<>
-				<BlockEdit { ...props } />
-				<BlockControls group="other">
-					<EditTemplatePartMenuItem attributes={ attributes } />
-				</BlockControls>
+				<BlockEdit key="edit" { ...props } />
+				{ isDisplayed && (
+					<BlockControls group="other">
+						<EditTemplatePartMenuItem attributes={ attributes } />
+					</BlockControls>
+				) }
 			</>
 		);
 	},