Skip to content

Commit a52b951

Browse files
ryanwelcheraferciaMamadukarichtabor
authored
Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls (#58207)
* Add Per Page Controls to the Query Loop block. * Update changelog. * Update the max posts per page to match the toolbar control. * Wrap per page, offset, and max pages controls to Inspector controls inside a ToolsPanel and move them to the Inspector Controls for the block. * Remove per page, offset and pages controls from block toolbar. * Rename ToolsPanel to "Display" * Fix leftover for incorrect dropdownMenuProps value. * Convert RangeControl value to number. * Add missing value checks for perPage, offset, and max pages controls. * Update e2e test * Fix PHPCS * large and minor label tweak * "posts per page" Co-authored-by: ryanwelcher <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: justintadlock <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: t-hamano <[email protected]> * Add __nextHasNoMarginBottom to the Per Page RangeControl component. --------- Co-authored-by: Andrea Fercia <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Rich Tabor <[email protected]>
1 parent 6b0e498 commit a52b951

File tree

10 files changed

+245
-112
lines changed

10 files changed

+245
-112
lines changed

‎packages/block-library/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### New Feature
6+
7+
- Query Loop Block: Moves per page, offset, and pages controls into Inspector Controls. ([#58207](https://github.com/WordPress/gutenberg/pull/58207))
8+
59
## 9.4.0 (2024-07-24)
610

711
## 9.3.0 (2024-07-10)

‎packages/block-library/src/query/edit/inspector-controls/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import { TaxonomyControls } from './taxonomy-controls';
2727
import StickyControl from './sticky-control';
2828
import EnhancedPaginationControl from './enhanced-pagination-control';
2929
import CreateNewPostLink from './create-new-post-link';
30+
import PerPageControl from './per-page-control';
31+
import OffsetControl from './offset-controls';
32+
import PagesControl from './pages-control';
3033
import { unlock } from '../../../lock-unlock';
3134
import {
3235
usePostTypes,
@@ -47,7 +50,10 @@ export default function QueryInspectorControls( props ) {
4750
order,
4851
orderBy,
4952
author: authorIds,
53+
pages,
5054
postType,
55+
perPage,
56+
offset,
5157
sticky,
5258
inherit,
5359
taxQuery,
@@ -135,6 +141,16 @@ export default function QueryInspectorControls( props ) {
135141
showParentControl;
136142
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
137143

144+
const showPostCountControl = isControlAllowed(
145+
allowedControls,
146+
'postCount'
147+
);
148+
const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
149+
const showPagesControl = isControlAllowed( allowedControls, 'pages' );
150+
151+
const showDisplayPanel =
152+
showPostCountControl || showOffSetControl || showPagesControl;
153+
138154
return (
139155
<>
140156
{ !! postType && (
@@ -253,6 +269,47 @@ export default function QueryInspectorControls( props ) {
253269
/>
254270
</PanelBody>
255271
) }
272+
{ ! inherit && showDisplayPanel && (
273+
<ToolsPanel
274+
className="block-library-query-toolspanel__display"
275+
label={ __( 'Display' ) }
276+
resetAll={ () => {
277+
setQuery( {
278+
offset: 0,
279+
pages: 0,
280+
} );
281+
} }
282+
dropdownMenuProps={ dropdownMenuProps }
283+
>
284+
<ToolsPanelItem
285+
label={ __( 'Items' ) }
286+
hasValue={ () => perPage > 0 }
287+
>
288+
<PerPageControl
289+
perPage={ perPage }
290+
offset={ offset }
291+
onChange={ setQuery }
292+
/>
293+
</ToolsPanelItem>
294+
<ToolsPanelItem
295+
label={ __( 'Offset' ) }
296+
hasValue={ () => offset > 0 }
297+
onDeselect={ () => setQuery( { offset: 0 } ) }
298+
>
299+
<OffsetControl
300+
offset={ offset }
301+
onChange={ setQuery }
302+
/>
303+
</ToolsPanelItem>
304+
<ToolsPanelItem
305+
label={ __( 'Max Pages to Show' ) }
306+
hasValue={ () => pages > 0 }
307+
onDeselect={ () => setQuery( { pages: 0 } ) }
308+
>
309+
<PagesControl pages={ pages } onChange={ setQuery } />
310+
</ToolsPanelItem>
311+
</ToolsPanel>
312+
) }
256313
{ ! inherit && showFiltersPanel && (
257314
<ToolsPanel
258315
className="block-library-query-toolspanel__filters" // unused but kept for backward compatibility

‎packages/block-library/src/query/edit/inspector-controls/offset-controls.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
5+
import { __ } from '@wordpress/i18n';
6+
7+
const MIN_OFFSET = 0;
8+
const MAX_OFFSET = 100;
9+
10+
export const OffsetControl = ( { offset = 0, onChange } ) => {
11+
return (
12+
<NumberControl
13+
__next40pxDefaultSize
14+
label={ __( 'Offset' ) }
15+
value={ offset }
16+
min={ MIN_OFFSET }
17+
onChange={ ( newOffset ) => {
18+
if (
19+
isNaN( newOffset ) ||
20+
newOffset < MIN_OFFSET ||
21+
newOffset > MAX_OFFSET
22+
) {
23+
return;
24+
}
25+
onChange( { offset: newOffset } );
26+
} }
27+
/>
28+
);
29+
};
30+
31+
export default OffsetControl;

‎packages/block-library/src/query/edit/inspector-controls/order-control.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const orderOptions = [
2727
function OrderControl( { order, orderBy, onChange } ) {
2828
return (
2929
<SelectControl
30-
__nextHasNoMarginBottom
3130
__next40pxDefaultSize
3231
label={ __( 'Order by' ) }
3332
value={ `${ orderBy }/${ order }` }

‎packages/block-library/src/query/edit/inspector-controls/pages-control.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
5+
import { __ } from '@wordpress/i18n';
6+
7+
export const PagesControl = ( { pages, onChange } ) => {
8+
return (
9+
<NumberControl
10+
__next40pxDefaultSize
11+
label={ __( 'Max pages' ) }
12+
value={ pages }
13+
min={ 0 }
14+
onChange={ ( newPages ) => {
15+
if ( isNaN( newPages ) || newPages < 0 ) {
16+
return;
17+
}
18+
onChange( { pages: newPages } );
19+
} }
20+
help={ __(
21+
'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
22+
) }
23+
/>
24+
);
25+
};
26+
27+
export default PagesControl;

‎packages/block-library/src/query/edit/inspector-controls/per-page-control.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { RangeControl } from '@wordpress/components';
5+
import { __ } from '@wordpress/i18n';
6+
7+
const MIN_POSTS_PER_PAGE = 1;
8+
const MAX_POSTS_PER_PAGE = 100;
9+
10+
const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
11+
return (
12+
<RangeControl
13+
__next40pxDefaultSize
14+
__nextHasNoMarginBottom
15+
label={ __( 'Posts per page' ) }
16+
min={ MIN_POSTS_PER_PAGE }
17+
max={ MAX_POSTS_PER_PAGE }
18+
onChange={ ( newPerPage ) => {
19+
if (
20+
isNaN( newPerPage ) ||
21+
newPerPage < MIN_POSTS_PER_PAGE ||
22+
newPerPage > MAX_POSTS_PER_PAGE
23+
) {
24+
return;
25+
}
26+
onChange( { perPage: newPerPage, offset } );
27+
} }
28+
value={ parseInt( perPage, 10 ) }
29+
/>
30+
);
31+
};
32+
33+
export default PerPageControl;

‎packages/block-library/src/query/edit/query-toolbar.js‎

Lines changed: 1 addition & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import {
5-
ToolbarGroup,
6-
Dropdown,
7-
ToolbarButton,
8-
__experimentalNumberControl as NumberControl,
9-
} from '@wordpress/components';
4+
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
105
import { __ } from '@wordpress/i18n';
11-
import { settings } from '@wordpress/icons';
126

137
/**
148
* Internal dependencies
159
*/
1610
import { usePatterns } from '../utils';
1711

1812
export default function QueryToolbar( {
19-
attributes: { query },
20-
setQuery,
2113
openPatternSelectionModal,
2214
name,
2315
clientId,
@@ -26,87 +18,6 @@ export default function QueryToolbar( {
2618

2719
return (
2820
<>
29-
{ ! query.inherit && (
30-
<ToolbarGroup>
31-
<Dropdown
32-
contentClassName="block-library-query-toolbar__popover"
33-
renderToggle={ ( { onToggle } ) => (
34-
<ToolbarButton
35-
icon={ settings }
36-
label={ __( 'Display settings' ) }
37-
onClick={ onToggle }
38-
/>
39-
) }
40-
renderContent={ () => (
41-
<>
42-
<NumberControl
43-
__unstableInputWidth="60px"
44-
className="block-library-query-toolbar__popover-number-control"
45-
label={ __( 'Items per Page' ) }
46-
labelPosition="edge"
47-
min={ 1 }
48-
max={ 100 }
49-
onChange={ ( value ) => {
50-
if (
51-
isNaN( value ) ||
52-
value < 1 ||
53-
value > 100
54-
) {
55-
return;
56-
}
57-
setQuery( {
58-
perPage: value,
59-
} );
60-
} }
61-
step="1"
62-
value={ query.perPage }
63-
isDragEnabled={ false }
64-
/>
65-
<NumberControl
66-
__unstableInputWidth="60px"
67-
className="block-library-query-toolbar__popover-number-control"
68-
label={ __( 'Offset' ) }
69-
labelPosition="edge"
70-
min={ 0 }
71-
max={ 100 }
72-
onChange={ ( value ) => {
73-
if (
74-
isNaN( value ) ||
75-
value < 0 ||
76-
value > 100
77-
) {
78-
return;
79-
}
80-
setQuery( { offset: value } );
81-
} }
82-
step="1"
83-
value={ query.offset }
84-
isDragEnabled={ false }
85-
/>
86-
<NumberControl
87-
__unstableInputWidth="60px"
88-
className="block-library-query-toolbar__popover-number-control"
89-
label={ __( 'Max pages to show' ) }
90-
labelPosition="edge"
91-
min={ 0 }
92-
onChange={ ( value ) => {
93-
if ( isNaN( value ) || value < 0 ) {
94-
return;
95-
}
96-
setQuery( { pages: value } );
97-
} }
98-
step="1"
99-
value={ query.pages }
100-
isDragEnabled={ false }
101-
help={ __(
102-
'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
103-
) }
104-
/>
105-
</>
106-
) }
107-
/>
108-
</ToolbarGroup>
109-
) }
11021
{ hasPatterns && (
11122
<ToolbarGroup className="wp-block-template-part__block-control-group">
11223
<ToolbarButton onClick={ openPatternSelectionModal }>

‎packages/e2e-tests/plugins/observe-typing.php‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?php
2+
/**
3+
* Plugin Name: Gutenberg Test Observe Typing
4+
* Plugin URI: https://github.com/WordPress/gutenberg
5+
* Author: Gutenberg Team
6+
*
7+
* @package gutenberg-test-block-api
8+
*/
9+
10+
/**
11+
* Registers a custom script for the plugin.
12+
*/
13+
function enqueue_observe_typing_plugin_script() {
14+
wp_enqueue_script(
15+
'gutenberg-test-observe-typing',
16+
plugins_url( 'observe-typing/index.js', __FILE__ ),
17+
array(
18+
'wp-blocks',
19+
'wp-block-editor',
20+
'wp-components',
21+
'wp-element',
22+
),
23+
filemtime( plugin_dir_path( __FILE__ ) . 'observe-typing/index.js' ),
24+
true
25+
);
26+
}
27+
28+
add_action( 'init', 'enqueue_observe_typing_plugin_script' );

‎packages/e2e-tests/plugins/observe-typing/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
( function () {
2+
const { registerBlockType } = wp.blocks;
3+
const { useBlockProps, BlockControls } = wp.blockEditor;
4+
const { Dropdown, ToolbarButton, TextControl } = wp.components;
5+
const { createElement: el, useState } = wp.element;
6+
7+
registerBlockType( 'e2e-tests/observe-typing', {
8+
apiVersion: 3,
9+
title: 'Observe Typing',
10+
description: 'Observe Typing test block.',
11+
category: 'widgets',
12+
edit: function Edit() {
13+
const [ value, setValue ] = useState( '' );
14+
const blockProps = useBlockProps();
15+
16+
return el(
17+
'div',
18+
blockProps,
19+
el(
20+
BlockControls,
21+
{ group: 'block' },
22+
el( Dropdown, {
23+
renderToggle: ( { onToggle } ) =>
24+
el(
25+
ToolbarButton,
26+
{
27+
onClick: onToggle,
28+
},
29+
'Open Dropdown'
30+
),
31+
renderContent: () =>
32+
el( TextControl, {
33+
label: 'Dropdown field',
34+
value,
35+
onChange: setValue,
36+
__next40pxDefaultSize: true,
37+
} ),
38+
} )
39+
),
40+
el( 'p', {}, 'Hello Editor!' )
41+
);
42+
},
43+
save: () => null,
44+
} );
45+
} )();

0 commit comments

Comments
 (0)