From b9daa7b8e2f7164c79e967e4415f4ad617b715d0 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 10:42:53 -0500 Subject: [PATCH 01/14] Add Per Page Controls to the Query Loop block. --- .../query/edit/inspector-controls/index.js | 12 ++++++++++ .../inspector-controls/per-page-control.js | 24 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 packages/block-library/src/query/edit/inspector-controls/per-page-control.js diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index e71b2d09af4b8..4c67231561c67 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -26,6 +26,7 @@ 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 { unlock } from '../../../lock-unlock'; import { usePostTypes, @@ -47,6 +48,8 @@ export default function QueryInspectorControls( props ) { orderBy, author: authorIds, postType, + perPage, + offset, sticky, inherit, taxQuery, @@ -101,6 +104,8 @@ 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' ); @@ -164,6 +169,13 @@ export default function QueryInspectorControls( props ) { ) } /> ) } + { showPostCountControl && ( + + ) } { showColumnsControl && ( <> { + return ( + { + onChange( { perPage: newPerPage, offset } ); + } } + value={ perPage } + /> + ); +}; + +export default PerPageControl; From b75431f1677efb2cb9b8eb7e039cacebecc32715 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 10:51:26 -0500 Subject: [PATCH 02/14] Update changelog. --- packages/block-library/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 8c5e3320c99b2..214ac31b72d45 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -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) From 9395aca45137da014ef2989b510046643ad8699f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 11:24:34 -0500 Subject: [PATCH 03/14] Update the max posts per page to match the toolbar control. --- .../src/query/edit/inspector-controls/per-page-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index e348e3c7003e2..7091b870bb3e8 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -5,7 +5,7 @@ import { RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const MIN_POSTS_PER_PAGE = 1; -const MAX_POSTS_PER_PAGE = 50; +const MAX_POSTS_PER_PAGE = 100; const PerPageControl = ( { perPage, offset = 0, onChange } ) => { return ( From 728d3ed28b9b1881f3758ec822979c5f49905db7 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 14:06:15 -0500 Subject: [PATCH 04/14] Wrap per page, offset, and max pages controls to Inspector controls inside a ToolsPanel and move them to the Inspector Controls for the block. --- .../query/edit/inspector-controls/index.js | 64 ++++++++++++++++--- .../inspector-controls/offset-controls.js | 20 ++++++ .../edit/inspector-controls/pages-control.js | 23 +++++++ 3 files changed, 98 insertions(+), 9 deletions(-) create mode 100644 packages/block-library/src/query/edit/inspector-controls/offset-controls.js create mode 100644 packages/block-library/src/query/edit/inspector-controls/pages-control.js diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 4c67231561c67..c6c15608071b9 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -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, @@ -47,6 +49,7 @@ export default function QueryInspectorControls( props ) { order, orderBy, author: authorIds, + pages, postType, perPage, offset, @@ -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' ); @@ -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 && ( @@ -169,13 +180,7 @@ export default function QueryInspectorControls( props ) { ) } /> ) } - { showPostCountControl && ( - - ) } + { showColumnsControl && ( <> ) } + { ! inherit && showDisplayPanel && ( + { + setQuery( { + offset: 0, + pages: 0, + } ); + } } + dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS } + > + perPage > 0 } + > + + + offset > 0 } + onDeselect={ () => setQuery( { offset: 0 } ) } + > + + + pages > 0 } + onDeselect={ () => setQuery( { pages: 0 } ) } + > + + + + ) } { ! inherit && showFiltersPanel && ( { + return ( + { + onChange( { offset: newOffset } ); + } } + /> + ); +}; + +export default OffsetControl; diff --git a/packages/block-library/src/query/edit/inspector-controls/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js new file mode 100644 index 0000000000000..80f20d43f7bc1 --- /dev/null +++ b/packages/block-library/src/query/edit/inspector-controls/pages-control.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export const PagesControl = ( { pages, onChange } ) => { + return ( + { + 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; From 5b3659872fb18d0c3ac12520b39e8fcc89a694a2 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 14:08:18 -0500 Subject: [PATCH 05/14] Remove per page, offset and pages controls from block toolbar. --- .../src/query/edit/query-toolbar.js | 91 +------------------ 1 file changed, 1 insertion(+), 90 deletions(-) diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index ff670d7c001a6..cc2d62a54d529 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -1,14 +1,8 @@ /** * 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 @@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons'; import { usePatterns } from '../utils'; export default function QueryToolbar( { - attributes: { query }, - setQuery, openPatternSelectionModal, name, clientId, @@ -26,87 +18,6 @@ export default function QueryToolbar( { return ( <> - { ! query.inherit && ( - - ( - - ) } - renderContent={ () => ( - <> - { - if ( - isNaN( value ) || - value < 1 || - value > 100 - ) { - return; - } - setQuery( { - perPage: value, - } ); - } } - step="1" - value={ query.perPage } - isDragEnabled={ false } - /> - { - if ( - isNaN( value ) || - value < 0 || - value > 100 - ) { - return; - } - setQuery( { offset: value } ); - } } - step="1" - value={ query.offset } - isDragEnabled={ false } - /> - { - 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).' - ) } - /> - - ) } - /> - - ) } { hasPatterns && ( From 402acb3fed8ce355491fa66e81c18e63a05ee65c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 24 Jan 2024 14:09:24 -0500 Subject: [PATCH 06/14] Rename ToolsPanel to "Display" --- .../block-library/src/query/edit/inspector-controls/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index c6c15608071b9..358549e0ce36b 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -231,7 +231,7 @@ export default function QueryInspectorControls( props ) { { ! inherit && showDisplayPanel && ( { setQuery( { offset: 0, From b1eaf832a838deea454322ca9132dc6db37e7ff8 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 5 Jul 2024 12:28:30 +0200 Subject: [PATCH 07/14] Fix leftover for incorrect dropdownMenuProps value. --- .../block-library/src/query/edit/inspector-controls/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 358549e0ce36b..ac8fbb78b77d9 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -238,7 +238,7 @@ export default function QueryInspectorControls( props ) { pages: 0, } ); } } - dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS } + dropdownMenuProps={ dropdownMenuProps } > Date: Fri, 5 Jul 2024 14:47:53 +0200 Subject: [PATCH 08/14] Convert RangeControl value to number. --- .../src/query/edit/inspector-controls/per-page-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index 7091b870bb3e8..8870f1f7f1e0d 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -16,7 +16,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => { onChange={ ( newPerPage ) => { onChange( { perPage: newPerPage, offset } ); } } - value={ perPage } + value={ parseInt( perPage, 10 ) } /> ); }; From d6b5f8a8894796caa56734c832e32c86d43189f7 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jul 2024 14:10:25 -0400 Subject: [PATCH 09/14] Add missing value checks for perPage, offset, and max pages controls. --- .../query/edit/inspector-controls/offset-controls.js | 12 +++++++++++- .../query/edit/inspector-controls/pages-control.js | 3 +++ .../edit/inspector-controls/per-page-control.js | 9 ++++++++- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/offset-controls.js b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js index 2b1f25090fb16..3c3560316ccff 100644 --- a/packages/block-library/src/query/edit/inspector-controls/offset-controls.js +++ b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js @@ -4,13 +4,23 @@ import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +const MIN_OFFSET = 0; +const MAX_OFFSET = 100; + export const OffsetControl = ( { offset = 0, onChange } ) => { return ( { + if ( + isNaN( newOffset ) || + newOffset < MIN_OFFSET || + newOffset > MAX_OFFSET + ) { + return; + } onChange( { offset: newOffset } ); } } /> diff --git a/packages/block-library/src/query/edit/inspector-controls/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js index 80f20d43f7bc1..7e3aad7754690 100644 --- a/packages/block-library/src/query/edit/inspector-controls/pages-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/pages-control.js @@ -11,6 +11,9 @@ export const PagesControl = ( { pages, onChange } ) => { value={ pages } min={ 0 } onChange={ ( newPages ) => { + if ( isNaN( newPages ) || newPages < 0 ) { + return; + } onChange( { pages: newPages } ); } } help={ __( diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index 8870f1f7f1e0d..e1ada9f4b47c6 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -10,10 +10,17 @@ const MAX_POSTS_PER_PAGE = 100; const PerPageControl = ( { perPage, offset = 0, onChange } ) => { return ( { + if ( + isNaN( newPerPage ) || + newPerPage < MIN_POSTS_PER_PAGE || + newPerPage > MAX_POSTS_PER_PAGE + ) { + return; + } onChange( { perPage: newPerPage, offset } ); } } value={ parseInt( perPage, 10 ) } From f5b43e2a45d3fc4daf4b1f54b6fca7f786cf7f83 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 24 Jul 2024 20:42:31 +0400 Subject: [PATCH 10/14] Update e2e test --- packages/e2e-tests/plugins/observe-typing.php | 28 ++++++++++++ .../e2e-tests/plugins/observe-typing/index.js | 45 +++++++++++++++++++ .../specs/editor/various/is-typing.spec.js | 40 ++++++++--------- 3 files changed, 92 insertions(+), 21 deletions(-) create mode 100644 packages/e2e-tests/plugins/observe-typing.php create mode 100644 packages/e2e-tests/plugins/observe-typing/index.js diff --git a/packages/e2e-tests/plugins/observe-typing.php b/packages/e2e-tests/plugins/observe-typing.php new file mode 100644 index 0000000000000..1cdf94e2e9915 --- /dev/null +++ b/packages/e2e-tests/plugins/observe-typing.php @@ -0,0 +1,28 @@ + + el( + ToolbarButton, + { + onClick: onToggle, + }, + 'Open Dropdown' + ), + renderContent: () => + el( TextControl, { + label: 'Dropdown field', + value, + onChange: setValue, + __next40pxDefaultSize: true, + } ), + } ) + ), + el( 'p', {}, 'Hello Editor!' ) + ); + }, + save: () => null, + } ); +} )(); diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js index e2c65f01928e0..da4492a89bef3 100644 --- a/test/e2e/specs/editor/various/is-typing.spec.js +++ b/test/e2e/specs/editor/various/is-typing.spec.js @@ -4,10 +4,18 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'isTyping', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-observe-typing' ); + } ); + test.beforeEach( async ( { admin } ) => { await admin.createNewPost(); } ); + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( 'gutenberg-test-observe-typing' ); + } ); + test( 'should hide the toolbar when typing', async ( { editor, page } ) => { // Enter to reach paragraph block. await page.keyboard.press( 'Enter' ); @@ -42,33 +50,23 @@ test.describe( 'isTyping', () => { page, } ) => { // Add a block with a dropdown in the toolbar that contains an input. - await editor.insertBlock( { name: 'core/query' } ); - - await editor.canvas - .getByRole( 'document', { name: 'Block: Query Loop' } ) - .getByRole( 'button', { name: 'Start blank' } ) - .click(); - - await editor.canvas - .getByRole( 'button', { name: 'Title & Date' } ) - .click(); - - await editor.openDocumentSettingsSidebar(); - await page.getByLabel( 'Inherit query from template' ).click(); + await editor.insertBlock( { name: 'e2e-tests/observe-typing' } ); // Moving the mouse shows the toolbar. await editor.showBlockToolbar(); // Open the dropdown. - const displaySettings = page.getByRole( 'button', { - name: 'Display settings', + await page + .getByRole( 'button', { + name: 'Open Dropdown', + } ) + .click(); + + const textControl = page.getByRole( 'textbox', { + name: 'Dropdown field', } ); - await displaySettings.click(); - const itemsPerPageInput = page.getByLabel( 'Items per Page' ); - // Make sure we're where we think we are - await expect( itemsPerPageInput ).toBeFocused(); // Type inside the dropdown's input - await page.keyboard.type( '00' ); + await textControl.pressSequentially( 'Hello' ); // The input should still be visible. - await expect( itemsPerPageInput ).toBeVisible(); + await expect( textControl ).toBeVisible(); } ); } ); From 02c4579b284fccdf760fb4594159eadfc65c1362 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 24 Jul 2024 20:46:26 +0400 Subject: [PATCH 11/14] Fix PHPCS --- packages/e2e-tests/plugins/observe-typing.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/plugins/observe-typing.php b/packages/e2e-tests/plugins/observe-typing.php index 1cdf94e2e9915..a9152bc79684c 100644 --- a/packages/e2e-tests/plugins/observe-typing.php +++ b/packages/e2e-tests/plugins/observe-typing.php @@ -18,7 +18,7 @@ function enqueue_observe_typing_plugin_script() { 'wp-blocks', 'wp-block-editor', 'wp-components', - 'wp-element' + 'wp-element', ), filemtime( plugin_dir_path( __FILE__ ) . 'observe-typing/index.js' ), true From 1dd54df551675677e65968be2925a38f1ded5456 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 31 Jul 2024 16:39:56 -0400 Subject: [PATCH 12/14] large and minor label tweak --- .../src/query/edit/inspector-controls/offset-controls.js | 1 + .../src/query/edit/inspector-controls/order-control.js | 1 - .../src/query/edit/inspector-controls/pages-control.js | 3 ++- .../src/query/edit/inspector-controls/per-page-control.js | 3 ++- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/offset-controls.js b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js index 3c3560316ccff..ff755c95f8b0a 100644 --- a/packages/block-library/src/query/edit/inspector-controls/offset-controls.js +++ b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js @@ -10,6 +10,7 @@ const MAX_OFFSET = 100; export const OffsetControl = ( { offset = 0, onChange } ) => { return ( { return ( { diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index e1ada9f4b47c6..97e3291927ca3 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -10,7 +10,8 @@ const MAX_POSTS_PER_PAGE = 100; const PerPageControl = ( { perPage, offset = 0, onChange } ) => { return ( { From af64535ed27154313afad58aa252d053034d1060 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 31 Jul 2024 16:40:14 -0400 Subject: [PATCH 13/14] "posts per page" --- .../src/query/edit/inspector-controls/per-page-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index 97e3291927ca3..9865cf1264c6d 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -11,7 +11,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => { return ( { From 49ff39404bc3195cd59b2ca4f8166cf58ea5526a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 6 Aug 2024 09:27:15 -0400 Subject: [PATCH 14/14] Add __nextHasNoMarginBottom to the Per Page RangeControl component. --- .../src/query/edit/inspector-controls/per-page-control.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js index 9865cf1264c6d..3e0dfbf50b70b 100644 --- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js @@ -11,6 +11,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => { return (