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 1 commit
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
Jul 31, 2024
af64535
"posts per page"
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
Prev Previous commit
Next Next commit
Wrap per page, offset, and max pages controls to Inspector controls i… 
…nside a ToolsPanel and move them to the Inspector Controls for the block.
  • Loading branch information
@ryanwelcher @afercia
ryanwelcher authored and afercia committed Jul 5, 2024
commit 728d3ed28b9b1881f3758ec822979c5f49905db7
64 changes: 55 additions & 9 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 @@ -27,6 +27,8 @@ 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 @@ -47,6 +49,7 @@ export default function QueryInspectorControls( props ) {
order,
orderBy,
author: authorIds,
pages,
postType,
perPage,
offset,
Expand Down Expand Up @@ -104,8 +107,6 @@ export default function QueryInspectorControls( props ) {
const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
const showPostTypeControl =
! inherit && isControlAllowed( allowedControls, 'postType' );
const showPostCountControl =
! inherit && isControlAllowed( allowedControls, 'postCount' );
const showColumnsControl = false;
const showOrderControl =
! inherit && isControlAllowed( allowedControls, 'order' );
Expand Down Expand Up @@ -135,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 @@ -169,13 +180,7 @@ export default function QueryInspectorControls( props ) {
) }
/>
) }
{ showPostCountControl && (
<PerPageControl
perPage={ perPage }
offset={ offset }
onChange={ setQuery }
/>
) }

{ showColumnsControl && (
<>
<RangeControl
Expand Down Expand Up @@ -223,6 +228,47 @@ export default function QueryInspectorControls( props ) {
/>
</PanelBody>
) }
{ ! inherit && showDisplayPanel && (
<ToolsPanel
className="block-library-query-toolspanel__display"
label={ __( 'Display Settings' ) }
resetAll={ () => {
setQuery( {
offset: 0,
pages: 0,
} );
} }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
>
<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;