Skip to content

Commit

Permalink
Query: Refactor settings panel to use ToolsPanel (#68008)
Browse files Browse the repository at this point in the history 
Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
  • Loading branch information
@himanshupathak95 @t-hamano @fabiankaegy
4 people authored Jan 12, 2025
1 parent 2397525 commit fb3a6a0
Showing 1 changed file with 148 additions and 88 deletions.
236 changes: 148 additions & 88 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
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

0 comments on commit fb3a6a0

Please sign in to comment.