Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Template Part & Query: avoid server requests on mount #57987

Merged
merged 4 commits into from
Jan 19, 2024
Merged

Template Part & Query: avoid server requests on mount #57987

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97e1803
Template Part & Query: avoid server requests on mount
ellatrix Jan 18, 2024
b78d187
Also EditTemplatePartMenuItem
ellatrix Jan 18, 2024
0273411
Avoid BlockControls mount for all blocks
ellatrix Jan 19, 2024
b20a114
Address remounting concern
ellatrix Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
283 changes: 137 additions & 146 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
) }
</>
);
Expand Down
16 changes: 9 additions & 7 deletions packages/block-library/src/query/edit/query-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/template-part/edit/advanced-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -70,7 +69,7 @@ export function TemplatePartAdvancedControls( {
} ) );

return (
<InspectorControls group="advanced">
<>
{ isEntityAvailable && (
<>
<TextControl
Expand Down Expand Up @@ -124,6 +123,6 @@ export function TemplatePartAdvancedControls( {
setAttributes={ setAttributes }
/>
) }
</InspectorControls>
</>
);
}
19 changes: 11 additions & 8 deletions packages/block-library/src/template-part/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down