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

Query: Refactor settings panel to use ToolsPanel #68008

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Query: Refactor settings panel to use ToolsPanel #68008

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 148 additions & 88 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 @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import {
PanelBody,
TextControl,
SelectControl,
RangeControl,
Expand Down Expand Up @@ -187,110 +186,171 @@ export default function QueryInspectorControls( props ) {
return (
<>
{ showSettingsPanel && (
<PanelBody title={ __( 'Settings' ) }>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setQuery( {
postType: 'post',
order: 'desc',
orderBy: 'date',
sticky: '',
inherit: true,
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
{ showInheritControl && (
<ToggleGroupControl
__next40pxDefaultSize
__nextHasNoMarginBottom
<ToolsPanelItem
hasValue={ () => ! inherit }
label={ __( 'Query type' ) }
isBlock
onChange={ ( value ) => {
setQuery( { inherit: value === 'default' } );
} }
help={
inherit
? __(
'Display a list of posts or custom post types based on the current template.'
)
: __(
'Display a list of posts or custom post types based on specific criteria.'
)
}
value={ !! inherit ? 'default' : 'custom' }
onDeselect={ () => setQuery( { inherit: true } ) }
isShownByDefault
>
<ToggleGroupControlOption
value="default"
label={ __( 'Default' ) }
/>
<ToggleGroupControlOption
value="custom"
label={ __( 'Custom' ) }
/>
</ToggleGroupControl>
) }
{ showPostTypeControl &&
( postTypesSelectOptions.length > 2 ? (
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
options={ postTypesSelectOptions }
value={ postType }
label={ postTypeControlLabel }
onChange={ onPostTypeChange }
help={ postTypeControlHelp }
/>
) : (
<ToggleGroupControl
__nextHasNoMarginBottom
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Query type' ) }
isBlock
value={ postType }
label={ postTypeControlLabel }
onChange={ onPostTypeChange }
help={ postTypeControlHelp }
onChange={ ( value ) => {
setQuery( {
inherit: value === 'default',
} );
} }
help={
inherit
? __(
'Display a list of posts or custom post types based on the current template.'
)
: __(
'Display a list of posts or custom post types based on specific criteria.'
)
}
value={ !! inherit ? 'default' : 'custom' }
>
{ postTypesSelectOptions.map( ( option ) => (
<ToggleGroupControlOption
key={ option.value }
value={ option.value }
label={ option.label }
/>
) ) }
<ToggleGroupControlOption
value="default"
label={ __( 'Default' ) }
/>
<ToggleGroupControlOption
value="custom"
label={ __( 'Custom' ) }
/>
</ToggleGroupControl>
) ) }
</ToolsPanelItem>
) }

{ showColumnsControl && (
<>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
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 }
{ showPostTypeControl && (
<ToolsPanelItem
hasValue={ () => postType !== 'post' }
label={ postTypeControlLabel }
onDeselect={ () => onPostTypeChange( 'post' ) }
isShownByDefault
>
{ postTypesSelectOptions.length > 2 ? (
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
options={ postTypesSelectOptions }
value={ postType }
label={ postTypeControlLabel }
onChange={ onPostTypeChange }
help={ postTypeControlHelp }
/>
) : (
<ToggleGroupControl
__nextHasNoMarginBottom
__next40pxDefaultSize
isBlock
value={ postType }
label={ postTypeControlLabel }
onChange={ onPostTypeChange }
help={ postTypeControlHelp }
>
{ __(
'This column count exceeds the recommended amount and may cause visual breakage.'
{ postTypesSelectOptions.map(
( option ) => (
<ToggleGroupControlOption
key={ option.value }
value={ option.value }
label={ option.label }
/>
)
) }
</Notice>
</ToggleGroupControl>
) }
</>
</ToolsPanelItem>
) }

{ showColumnsControl && (
<ToolsPanelItem
hasValue={ () => displayLayout?.columns !== 2 }
label={ __( 'Columns' ) }
onDeselect={ () =>
setDisplayLayout( { columns: 2 } )
}
isShownByDefault
>
<>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
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>
) }
</>
</ToolsPanelItem>
) }

{ showOrderControl && (
<OrderControl
{ ...{ order, orderBy } }
onChange={ setQuery }
/>
<ToolsPanelItem
hasValue={ () =>
order !== 'desc' || orderBy !== 'date'
}
label={ __( 'Order by' ) }
onDeselect={ () =>
setQuery( { order: 'desc', orderBy: 'date' } )
}
isShownByDefault
>
<OrderControl
{ ...{ order, orderBy } }
onChange={ setQuery }
/>
</ToolsPanelItem>
) }

{ showStickyControl && (
<StickyControl
value={ sticky }
onChange={ ( value ) =>
setQuery( { sticky: value } )
}
/>
<ToolsPanelItem
hasValue={ () => !! sticky }
label={ __( 'Sticky posts' ) }
onDeselect={ () => setQuery( { sticky: '' } ) }
isShownByDefault
>
<StickyControl
value={ sticky }
onChange={ ( value ) =>
setQuery( { sticky: value } )
}
/>
</ToolsPanelItem>
) }
</PanelBody>
</ToolsPanel>
) }
{ ! inherit && showDisplayPanel && (
<ToolsPanel
Expand Down
Loading