Skip to content

Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls #58207

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

Merged
ryanwelcher merged 16 commits into from
Aug 6, 2024
Merged

Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls #58207

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b9daa7b
Add Per Page Controls to the Query Loop block.
ryanwelcher Jan 24, 2024
b75431f
Update changelog.
ryanwelcher Jan 24, 2024
9395aca
Update the max posts per page to match the toolbar control.
ryanwelcher Jan 24, 2024
728d3ed
Wrap per page, offset, and max pages controls to Inspector controls i…
ryanwelcher Jan 24, 2024
5b36598
Remove per page, offset and pages controls from block toolbar.
ryanwelcher Jan 24, 2024
402acb3
Rename ToolsPanel to "Display"
ryanwelcher Jan 24, 2024
b1eaf83
Fix leftover for incorrect dropdownMenuProps value.
afercia Jul 5, 2024
44c61da
Convert RangeControl value to number.
afercia Jul 5, 2024
fe9857e
Merge branch 'trunk' into feature/add-post-count-controls-to-query-lo…
ryanwelcher Jul 16, 2024
d6b5f8a
Add missing value checks for perPage, offset, and max pages controls.
ryanwelcher Jul 16, 2024
f5b43e2
Update e2e test
Mamaduka Jul 24, 2024
02c4579
Fix PHPCS
Mamaduka Jul 24, 2024
1dd54df
large and minor label tweak
richtabor Jul 31, 2024
af64535
"posts per page"
richtabor Jul 31, 2024
7b6e79c
Merge branch 'trunk' into feature/add-post-count-controls-to-query-lo…
ryanwelcher Aug 6, 2024
49ff394
Add __nextHasNoMarginBottom to the Per Page RangeControl component.
ryanwelcher Aug 6, 2024
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
4 changes: 4 additions & 0 deletions packages/block-library/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### New Feature

- Query Loop Block: Moves per page, offset, and pages controls into Inspector Controls. ([#58207](https://github.com/WordPress/gutenberg/pull/58207))

## 9.2.0 (2024-06-26)

## 9.1.0 (2024-06-15)
Expand Down
58 changes: 58 additions & 0 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 @@ -26,6 +26,9 @@ import { TaxonomyControls } from './taxonomy-controls';
import StickyControl from './sticky-control';
import EnhancedPaginationControl from './enhanced-pagination-control';
import CreateNewPostLink from './create-new-post-link';
import PerPageControl from './per-page-control';
import OffsetControl from './offset-controls';
import PagesControl from './pages-control';
import { unlock } from '../../../lock-unlock';
import {
usePostTypes,
Expand All @@ -46,7 +49,10 @@ export default function QueryInspectorControls( props ) {
order,
orderBy,
author: authorIds,
pages,
postType,
perPage,
offset,
sticky,
inherit,
taxQuery,
Expand Down Expand Up @@ -130,6 +136,16 @@ export default function QueryInspectorControls( props ) {
showParentControl;
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const showPostCountControl = isControlAllowed(
allowedControls,
'postCount'
);
const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
const showPagesControl = isControlAllowed( allowedControls, 'pages' );

const showDisplayPanel =
showPostCountControl || showOffSetControl || showPagesControl;

return (
<>
{ !! postType && (
Expand Down Expand Up @@ -164,6 +180,7 @@ export default function QueryInspectorControls( props ) {
) }
/>
) }

{ showColumnsControl && (
<>
<RangeControl
Expand Down Expand Up @@ -211,6 +228,47 @@ export default function QueryInspectorControls( props ) {
/>
</PanelBody>
) }
{ ! inherit && showDisplayPanel && (
<ToolsPanel
className="block-library-query-toolspanel__display"
label={ __( 'Display' ) }
resetAll={ () => {
setQuery( {
offset: 0,
pages: 0,
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Items' ) }
hasValue={ () => perPage > 0 }
>
<PerPageControl
perPage={ perPage }
offset={ offset }
onChange={ setQuery }
/>
Comment on lines +288 to +292
Copy link
Member

@Mamaduka Mamaduka Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit (non-blocking): There is probably no need to create wrappers for simple components like - PerPageControl, OffsetControl and PagesControl.

This is mostly my personal preference. Feel free to ignore it :)

Copy link
Contributor Author

@ryanwelcher ryanwelcher Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went with wrappers to reduce the size of the index.js for this section. I guess its number of files vs lines of code. I'm happy either way, but if these components get more complicated, it would be nice to abstract that out of the main file.

</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Offset' ) }
hasValue={ () => offset > 0 }
onDeselect={ () => setQuery( { offset: 0 } ) }
>
<OffsetControl
offset={ offset }
onChange={ setQuery }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Max Pages to Show' ) }
hasValue={ () => pages > 0 }
onDeselect={ () => setQuery( { pages: 0 } ) }
>
<PagesControl pages={ pages } onChange={ setQuery } />
</ToolsPanelItem>
</ToolsPanel>
) }
{ ! inherit && showFiltersPanel && (
<ToolsPanel
className="block-library-query-toolspanel__filters"
Expand Down
20 changes: 20 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/offset-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* WordPress dependencies
*/
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export const OffsetControl = ( { offset = 0, onChange } ) => {
return (
<NumberControl
label={ __( 'Offset' ) }
value={ offset }
min={ 0 }
onChange={ ( newOffset ) => {
onChange( { offset: newOffset } );
} }
/>
);
};

export default OffsetControl;
23 changes: 23 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/pages-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* WordPress dependencies
*/
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export const PagesControl = ( { pages, onChange } ) => {
return (
<NumberControl
label={ __( 'Max Pages to Show' ) }
value={ pages }
min={ 0 }
onChange={ ( newPages ) => {
onChange( { pages: newPages } );
} }
help={ __(
'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
) }
/>
);
};

export default PagesControl;
24 changes: 24 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/per-page-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* WordPress dependencies
*/
import { RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const MIN_POSTS_PER_PAGE = 1;
const MAX_POSTS_PER_PAGE = 100;

const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
return (
<RangeControl
label={ __( 'Posts Per Page' ) }
min={ MIN_POSTS_PER_PAGE }
max={ MAX_POSTS_PER_PAGE }
onChange={ ( newPerPage ) => {
onChange( { perPage: newPerPage, offset } );
} }
value={ parseInt( perPage, 10 ) }
Copy link
Member

@Mamaduka Mamaduka Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the perPage value can be null, resulting in NaN.

Copy link
Contributor

@afercia afercia Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the perPage value can be null, resulting in NaN.

Yes, I noticed in the current implementation on trunk these values do have checks for null and 'out of range' values. But this applies to all the three settings. Not sure why those checks have been removed in this PR but yes they should likely be added back, maybe by using an helper function.

More work for next week 🍹

Copy link
Contributor Author

@ryanwelcher ryanwelcher Jul 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added these back now.

/>
);
};

export default PerPageControl;
91 changes: 1 addition & 90 deletions packages/block-library/src/query/edit/query-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
/**
* WordPress dependencies
*/
import {
ToolbarGroup,
Dropdown,
ToolbarButton,
__experimentalNumberControl as NumberControl,
} from '@wordpress/components';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { settings } from '@wordpress/icons';

/**
* Internal dependencies
*/
import { usePatterns } from '../utils';

export default function QueryToolbar( {
attributes: { query },
setQuery,
openPatternSelectionModal,
name,
clientId,
Expand All @@ -26,87 +18,6 @@ export default function QueryToolbar( {

return (
<>
{ ! query.inherit && (
<ToolbarGroup>
<Dropdown
contentClassName="block-library-query-toolbar__popover"
renderToggle={ ( { onToggle } ) => (
<ToolbarButton
icon={ settings }
label={ __( 'Display settings' ) }
onClick={ onToggle }
/>
) }
renderContent={ () => (
<>
<NumberControl
__unstableInputWidth="60px"
className="block-library-query-toolbar__popover-number-control"
label={ __( 'Items per Page' ) }
labelPosition="edge"
min={ 1 }
max={ 100 }
onChange={ ( value ) => {
if (
isNaN( value ) ||
value < 1 ||
value > 100
) {
return;
}
setQuery( {
perPage: value,
} );
} }
step="1"
value={ query.perPage }
isDragEnabled={ false }
/>
<NumberControl
__unstableInputWidth="60px"
className="block-library-query-toolbar__popover-number-control"
label={ __( 'Offset' ) }
labelPosition="edge"
min={ 0 }
max={ 100 }
onChange={ ( value ) => {
if (
isNaN( value ) ||
value < 0 ||
value > 100
) {
return;
}
setQuery( { offset: value } );
} }
step="1"
value={ query.offset }
isDragEnabled={ false }
/>
<NumberControl
__unstableInputWidth="60px"
className="block-library-query-toolbar__popover-number-control"
label={ __( 'Max pages to show' ) }
labelPosition="edge"
min={ 0 }
onChange={ ( value ) => {
if ( isNaN( value ) || value < 0 ) {
return;
}
setQuery( { pages: value } );
} }
step="1"
value={ query.pages }
isDragEnabled={ false }
help={ __(
'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
) }
/>
</>
) }
/>
</ToolbarGroup>
) }
{ hasPatterns && (
<ToolbarGroup className="wp-block-template-part__block-control-group">
<ToolbarButton onClick={ openPatternSelectionModal }>
Expand Down