From f0c3039ce8be2f10187dd0674d299ffd0b25fa4c Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 20 Jan 2025 10:45:11 +0200 Subject: [PATCH 01/26] Add support for menu order --- packages/components/src/query-controls/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index eb004bf8215b0a..91807e006c7c78 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -45,7 +45,7 @@ export type AuthorSelectProps = Pick< }; type Order = 'asc' | 'desc'; -type OrderBy = 'date' | 'title'; +type OrderBy = 'date' | 'title' | 'menu_order'; type BaseQueryControlsProps = { /** From 11fca2eb793d7082b31463df54bfbe8c0522c5c8 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 20 Jan 2025 10:45:22 +0200 Subject: [PATCH 02/26] Add the menu order option --- .../components/src/query-controls/index.tsx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 452dd303c778bb..e6518fc44cc947 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -75,6 +75,37 @@ export function QueryControls( { // but instead are destructured inline where necessary. ...props }: QueryControlsProps ) { + const orderByList = [ + { + label: __( 'Newest to oldest' ), + value: 'date/desc', + }, + { + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order descending' ), + value: 'menu_order/desc', + }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order ascending' ), + value: 'menu_order/desc', + }, + ]; + return ( { [ @@ -89,26 +120,7 @@ export function QueryControls( { ? undefined : `${ orderBy }/${ order }` } - options={ [ - { - label: __( 'Newest to oldest' ), - value: 'date/desc', - }, - { - label: __( 'Oldest to newest' ), - value: 'date/asc', - }, - { - /* translators: Label for ordering posts by title in ascending order. */ - label: __( 'A → Z' ), - value: 'title/asc', - }, - { - /* translators: Label for ordering posts by title in descending order. */ - label: __( 'Z → A' ), - value: 'title/desc', - }, - ] } + options={ orderByList } onChange={ ( value ) => { if ( typeof value !== 'string' ) { return; From 681186c03c93c520dc9cdada5f517397cfb53ab2 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 20 Jan 2025 11:53:14 +0200 Subject: [PATCH 03/26] Two more copy-paste location --- .../src/query/edit/inspector-controls/order-control.js | 10 ++++++++++ packages/components/src/query-controls/index.native.js | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index 23802f844359d7..5bf49e4eae0b10 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -23,6 +23,16 @@ const orderOptions = [ label: __( 'Z → A' ), value: 'title/desc', }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order descending' ), + value: 'menu_order/desc', + }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order ascending' ), + value: 'menu_order/asc', + }, ]; function OrderControl( { order, orderBy, onChange } ) { return ( diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js index 4e687f4af09d57..119748a307b753 100644 --- a/packages/components/src/query-controls/index.native.js +++ b/packages/components/src/query-controls/index.native.js @@ -33,6 +33,16 @@ const options = [ label: __( 'Z → A' ), value: 'title/desc', }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order descending' ), + value: 'menu_order/desc', + }, + { + /* translators: Label for ordering posts by menu order in descending order. */ + label: __( 'Menu order ascending' ), + value: 'menu_order/asc', + }, ]; const QueryControls = memo( From 27dd5a149de4083fa86aac7cfad92f32cc7e3183 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 20 Jan 2025 11:53:32 +0200 Subject: [PATCH 04/26] Match the order --- packages/components/src/query-controls/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index e6518fc44cc947..356d0e1175f5ca 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -102,7 +102,7 @@ export function QueryControls( { { /* translators: Label for ordering posts by menu order in descending order. */ label: __( 'Menu order ascending' ), - value: 'menu_order/desc', + value: 'menu_order/asc', }, ]; From a50362f9238cc5c0eafb0d9836cb795a76bebeb6 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Tue, 21 Jan 2025 15:01:21 +0200 Subject: [PATCH 05/26] Update labels per discussion --- .../query/edit/inspector-controls/order-control.js | 12 ++++++------ .../components/src/query-controls/index.native.js | 12 ++++++------ packages/components/src/query-controls/index.tsx | 12 ++++++------ 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index 5bf49e4eae0b10..f233f7b2878ecb 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -24,14 +24,14 @@ const orderOptions = [ value: 'title/desc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order descending' ), - value: 'menu_order/desc', + /* translators: Label for ordering posts by ascending menu order. */ + label: __( 'Ascending by order' ), + value: 'menu_order/asc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order ascending' ), - value: 'menu_order/asc', + /* translators: Label for ordering posts by descending menu order. */ + label: __( 'Descending by order' ), + value: 'menu_order/desc', }, ]; function OrderControl( { order, orderBy, onChange } ) { diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js index 119748a307b753..d6c9c35b23d5d2 100644 --- a/packages/components/src/query-controls/index.native.js +++ b/packages/components/src/query-controls/index.native.js @@ -34,14 +34,14 @@ const options = [ value: 'title/desc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order descending' ), - value: 'menu_order/desc', + /* translators: Label for ordering posts by ascending menu order. */ + label: __( 'Ascending by order' ), + value: 'menu_order/asc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order ascending' ), - value: 'menu_order/asc', + /* translators: Label for ordering posts by descending menu order. */ + label: __( 'Descending by order' ), + value: 'menu_order/desc', }, ]; diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 356d0e1175f5ca..ee0c84c8424739 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -95,14 +95,14 @@ export function QueryControls( { value: 'title/desc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order descending' ), - value: 'menu_order/desc', + /* translators: Label for ordering posts by ascending menu order. */ + label: __( 'Ascending by order' ), + value: 'menu_order/asc', }, { - /* translators: Label for ordering posts by menu order in descending order. */ - label: __( 'Menu order ascending' ), - value: 'menu_order/asc', + /* translators: Label for ordering posts by descending menu order. */ + label: __( 'Descending by order' ), + value: 'menu_order/desc', }, ]; From 6def53a875b61fa7039ea27c1ec52e893596a818 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:15:39 +0200 Subject: [PATCH 06/26] Helper for resolving order by options for a post type --- packages/block-library/src/query/utils.js | 55 +++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 9aabf05bae37cd..69bd6b30b1820a 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -6,6 +6,7 @@ import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; +import { __ } from '@wordpress/i18n'; import { cloneBlock, getBlockSupport, @@ -186,6 +187,60 @@ export function useIsPostTypeHierarchical( postType ) { ); } +/** + * List of avaiable options to order by. + * + * @param {string} postType The post type to check. + * @return {Object[]} List of order options. + */ +export function useOrderByOptions( postType ) { + const supportsCustomOrder = useSelect( + ( select ) => { + const type = select( coreStore ).getPostType( postType ); + return !! type?.supports?.[ 'page-attributes' ]; + }, + [ postType ] + ); + + const orderByOptions = [ + { + label: __( 'Newest to oldest' ), + value: 'date/desc', + }, + { + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, + ]; + + if ( supportsCustomOrder ) { + orderByOptions.push( + { + /* translators: Label for ordering posts by ascending menu order. */ + label: __( 'Ascending by order' ), + value: 'menu_order/asc', + }, + { + /* translators: Label for ordering posts by descending menu order. */ + label: __( 'Descending by order' ), + value: 'menu_order/desc', + } + ); + } + + return orderByOptions; +} + /** * Hook that returns the query properties' names defined by the active * block variation, to determine which block's filters to show. From 0ed2ac01d74860d9527b6de0f52ef9f0a00d9493 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:19:56 +0200 Subject: [PATCH 07/26] Add the option type --- packages/components/src/query-controls/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index 91807e006c7c78..f142c094da40fa 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -46,6 +46,7 @@ export type AuthorSelectProps = Pick< type Order = 'asc' | 'desc'; type OrderBy = 'date' | 'title' | 'menu_order'; +type OrderByOptions = Object[]; type BaseQueryControlsProps = { /** @@ -99,6 +100,10 @@ type BaseQueryControlsProps = { * The meta key by which to order posts. */ orderBy?: OrderBy; + /** + * List of available menu_order options. + */ + orderByOptions?: OrderByOptions; /** * The selected author ID. */ From 066e3e3bee964feab16c22a328c409e85bf1a8e0 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:20:11 +0200 Subject: [PATCH 08/26] Pass in the options --- .../block-library/src/latest-posts/edit.js | 3 +- .../src/latest-posts/edit.native.js | 3 +- .../query/edit/inspector-controls/index.js | 4 ++- .../edit/inspector-controls/order-control.js | 34 ++---------------- .../src/query-controls/index.native.js | 34 ++---------------- .../components/src/query-controls/index.tsx | 36 ++----------------- .../components/src/query-controls/types.ts | 14 +++++++- 7 files changed, 27 insertions(+), 101 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 82f0661d04e40f..36f8c1461255c3 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -81,6 +81,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { postsToShow, order, orderBy, + orderByOptions, categories, selectedAuthor, displayFeaturedImage, @@ -372,7 +373,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { setAttributes( { order: value } ) diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 632efa149313f6..d2c1a533992ac4 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -148,6 +148,7 @@ class LatestPostsEdit extends Component { addLinkToFeaturedImage, order, orderBy, + orderByOptions, postsToShow, categories, } = attributes; @@ -215,7 +216,7 @@ class LatestPostsEdit extends Component { diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index f233f7b2878ecb..64e104ed546e90 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -4,44 +4,14 @@ import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -const orderOptions = [ - { - label: __( 'Newest to oldest' ), - value: 'date/desc', - }, - { - label: __( 'Oldest to newest' ), - value: 'date/asc', - }, - { - /* translators: Label for ordering posts by title in ascending order. */ - label: __( 'A → Z' ), - value: 'title/asc', - }, - { - /* translators: Label for ordering posts by title in descending order. */ - label: __( 'Z → A' ), - value: 'title/desc', - }, - { - /* translators: Label for ordering posts by ascending menu order. */ - label: __( 'Ascending by order' ), - value: 'menu_order/asc', - }, - { - /* translators: Label for ordering posts by descending menu order. */ - label: __( 'Descending by order' ), - value: 'menu_order/desc', - }, -]; -function OrderControl( { order, orderBy, onChange } ) { +function OrderControl( { order, orderBy, onChange, orderByOptions } ) { return ( { const [ newOrderBy, newOrder ] = value.split( '/' ); onChange( { order: newOrder, orderBy: newOrderBy } ); diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js index d6c9c35b23d5d2..b9c3d9b19e5044 100644 --- a/packages/components/src/query-controls/index.native.js +++ b/packages/components/src/query-controls/index.native.js @@ -14,37 +14,6 @@ import CategorySelect from './category-select'; const DEFAULT_MIN_ITEMS = 1; const DEFAULT_MAX_ITEMS = 100; -const options = [ - { - label: __( 'Newest to oldest' ), - value: 'date/desc', - }, - { - label: __( 'Oldest to newest' ), - value: 'date/asc', - }, - { - /* translators: Label for ordering posts by title in ascending order. */ - label: __( 'A → Z' ), - value: 'title/asc', - }, - { - /* translators: Label for ordering posts by title in descending order. */ - label: __( 'Z → A' ), - value: 'title/desc', - }, - { - /* translators: Label for ordering posts by ascending menu order. */ - label: __( 'Ascending by order' ), - value: 'menu_order/asc', - }, - { - /* translators: Label for ordering posts by descending menu order. */ - label: __( 'Descending by order' ), - value: 'menu_order/desc', - }, -]; - const QueryControls = memo( ( { categoriesList, @@ -52,6 +21,7 @@ const QueryControls = memo( numberOfItems, order, orderBy, + orderByOptions, maxItems = DEFAULT_MAX_ITEMS, minItems = DEFAULT_MIN_ITEMS, onCategoryChange, @@ -78,7 +48,7 @@ const QueryControls = memo( diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index ee0c84c8424739..6a3d7ac43c295d 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -40,7 +40,7 @@ function isMultipleCategorySelection( * ```jsx * const MyQueryControls = () => ( * { * updateQuery( { orderBy: newOrderBy } ) * } @@ -65,6 +65,7 @@ export function QueryControls( { numberOfItems, order, orderBy, + orderByOptions, maxItems = DEFAULT_MAX_ITEMS, minItems = DEFAULT_MIN_ITEMS, onAuthorChange, @@ -75,37 +76,6 @@ export function QueryControls( { // but instead are destructured inline where necessary. ...props }: QueryControlsProps ) { - const orderByList = [ - { - label: __( 'Newest to oldest' ), - value: 'date/desc', - }, - { - label: __( 'Oldest to newest' ), - value: 'date/asc', - }, - { - /* translators: Label for ordering posts by title in ascending order. */ - label: __( 'A → Z' ), - value: 'title/asc', - }, - { - /* translators: Label for ordering posts by title in descending order. */ - label: __( 'Z → A' ), - value: 'title/desc', - }, - { - /* translators: Label for ordering posts by ascending menu order. */ - label: __( 'Ascending by order' ), - value: 'menu_order/asc', - }, - { - /* translators: Label for ordering posts by descending menu order. */ - label: __( 'Descending by order' ), - value: 'menu_order/desc', - }, - ]; - return ( { [ @@ -120,7 +90,7 @@ export function QueryControls( { ? undefined : `${ orderBy }/${ order }` } - options={ orderByList } + options={ orderByOptions } onChange={ ( value ) => { if ( typeof value !== 'string' ) { return; diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index f142c094da40fa..834143a4caaf1b 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -46,7 +46,19 @@ export type AuthorSelectProps = Pick< type Order = 'asc' | 'desc'; type OrderBy = 'date' | 'title' | 'menu_order'; -type OrderByOptions = Object[]; +type OrderByOptions = ( { + /** + * The label to be shown to the user. + */ + label: string; + /** + * Option value passed to `onChange` when the option is selected. + */ + value: string; +} & Omit< + React.OptionHTMLAttributes< HTMLOptionElement >, + 'label' | 'value' +> )[]; type BaseQueryControlsProps = { /** From f40d2b674eff9c07cf9adce5d3b30424026c0eb4 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:45:39 +0200 Subject: [PATCH 09/26] Restrict the values to only known values --- packages/components/src/query-controls/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index 834143a4caaf1b..15f87e312c28d8 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -54,7 +54,7 @@ type OrderByOptions = ( { /** * Option value passed to `onChange` when the option is selected. */ - value: string; + value: `${ OrderBy }/${ Order }`; } & Omit< React.OptionHTMLAttributes< HTMLOptionElement >, 'label' | 'value' From 777debfe99082306212e90c41eba9d8661b82d1a Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:46:31 +0200 Subject: [PATCH 10/26] Keep the order --- .../src/query/edit/inspector-controls/order-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index 64e104ed546e90..82006e9ae05dfd 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -4,7 +4,7 @@ import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -function OrderControl( { order, orderBy, onChange, orderByOptions } ) { +function OrderControl( { order, orderBy, orderByOptions, onChange } ) { return ( Date: Mon, 17 Feb 2025 14:57:59 +0200 Subject: [PATCH 11/26] Define the type for just the option --- packages/components/src/query-controls/types.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index 15f87e312c28d8..74b9ce32f7e85d 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -46,7 +46,7 @@ export type AuthorSelectProps = Pick< type Order = 'asc' | 'desc'; type OrderBy = 'date' | 'title' | 'menu_order'; -type OrderByOptions = ( { +type OrderByOption = { /** * The label to be shown to the user. */ @@ -55,10 +55,7 @@ type OrderByOptions = ( { * Option value passed to `onChange` when the option is selected. */ value: `${ OrderBy }/${ Order }`; -} & Omit< - React.OptionHTMLAttributes< HTMLOptionElement >, - 'label' | 'value' -> )[]; +} & Omit< React.OptionHTMLAttributes< HTMLOptionElement >, 'label' | 'value' >; type BaseQueryControlsProps = { /** @@ -113,9 +110,9 @@ type BaseQueryControlsProps = { */ orderBy?: OrderBy; /** - * List of available menu_order options. + * List of available ordering options. */ - orderByOptions?: OrderByOptions; + orderByOptions?: OrderByOption[]; /** * The selected author ID. */ From 016c83e36ce7aca932fe2470409cf2f50872f13e Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:58:48 +0200 Subject: [PATCH 12/26] Document the updated fields --- packages/components/src/query-controls/README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md index 3eb6d507c9ccd6..4b73706f59f577 100644 --- a/packages/components/src/query-controls/README.md +++ b/packages/components/src/query-controls/README.md @@ -213,7 +213,14 @@ The order in which to retrieve posts. - Required: No - Platform: Web -#### `orderBy`: `'date' | 'title'` +#### `orderBy`: `'date' | 'title' | 'menu_order'` + +The meta key by which to order posts. + +- Required: No +- Platform: Web + +#### `orderByOptions`: `OrderByOption[]` The meta key by which to order posts. From 568fd9dcfe873d68746d29cd278c30121a8427c5 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 14:59:39 +0200 Subject: [PATCH 13/26] Update the examples --- .../components/src/query-controls/README.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md index 4b73706f59f577..fa3213a1c8747b 100644 --- a/packages/components/src/query-controls/README.md +++ b/packages/components/src/query-controls/README.md @@ -32,11 +32,21 @@ const QUERY_DEFAULTS = { numberOfItems: 10, order: 'asc', orderBy: 'title', + orderByOptions: [ + { + label: 'Title Ascending', + value: 'title/asc', + }, + { + label: 'Title Descending', + value: 'title/desc', + }, + ], }; const MyQueryControls = () => { const [ query, setQuery ] = useState( QUERY_DEFAULTS ); - const { category, categories, maxItems, minItems, numberOfItems, order, orderBy } = query; + const { category, categories, maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } = query; const updateQuery = ( newQuery ) => { setQuery( { ...query, ...newQuery } ); @@ -44,7 +54,7 @@ const MyQueryControls = () => { return ( updateQuery( { orderBy: newOrderBy } ) } onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) } categoriesList={ categories } @@ -108,7 +118,7 @@ const MyQueryControls = () => { return ( updateQuery( { orderBy: newOrderBy } ) } onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) } categorySuggestions={ categories } @@ -253,4 +263,4 @@ The selected category for the `categoriesList` prop. Start opting into the larger default height that will become the default size in a future version. - Required: No -- Default: `false` \ No newline at end of file +- Default: `false` From f6af1ec8d4d0fccc287fea3f97c6b2696ede75d6 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 15:10:54 +0200 Subject: [PATCH 14/26] Reference the type --- packages/block-library/src/query/utils.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 69bd6b30b1820a..2d482b5859a5f9 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -14,6 +14,7 @@ import { } from '@wordpress/blocks'; /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ +/** @typedef {import('@wordpress/components/build-types/query-controls/types').OrderByOption} OrderByOption */ /** * @typedef IHasNameAndId @@ -191,7 +192,7 @@ export function useIsPostTypeHierarchical( postType ) { * List of avaiable options to order by. * * @param {string} postType The post type to check. - * @return {Object[]} List of order options. + * @return {OrderByOption[]} List of order options. */ export function useOrderByOptions( postType ) { const supportsCustomOrder = useSelect( From 27a3c606f5355ae4116ca6adf32a195c52fc68ab Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Mon, 17 Feb 2025 15:18:43 +0200 Subject: [PATCH 15/26] This is really required for the drop-down component, keep it simple here --- packages/components/src/query-controls/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index 74b9ce32f7e85d..feef9ed9c58edf 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -55,7 +55,7 @@ type OrderByOption = { * Option value passed to `onChange` when the option is selected. */ value: `${ OrderBy }/${ Order }`; -} & Omit< React.OptionHTMLAttributes< HTMLOptionElement >, 'label' | 'value' >; +}; type BaseQueryControlsProps = { /** From a6c408ac2068cde29b6cbbdd06fe9ff2048f7675 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 10:37:45 +0200 Subject: [PATCH 16/26] Add back the default options to prevent breaking changes --- .../edit/inspector-controls/order-control.js | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index 82006e9ae05dfd..a54a490a7ab667 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -4,7 +4,33 @@ import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -function OrderControl( { order, orderBy, orderByOptions, onChange } ) { +const orderByOptionsDefault = [ + { + label: __( 'Newest to oldest' ), + value: 'date/desc', + }, + { + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, +]; + +function OrderControl( { + order, + orderBy, + orderByOptions = orderByOptionsDefault, + onChange, +} ) { return ( Date: Fri, 28 Feb 2025 10:45:02 +0200 Subject: [PATCH 17/26] Use memo to avoid rebuilding the list of options --- packages/block-library/src/query/utils.js | 68 ++++++++++++----------- 1 file changed, 35 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 2d482b5859a5f9..3f87a1c86ad014 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -203,43 +203,45 @@ export function useOrderByOptions( postType ) { [ postType ] ); - const orderByOptions = [ - { - label: __( 'Newest to oldest' ), - value: 'date/desc', - }, - { - label: __( 'Oldest to newest' ), - value: 'date/asc', - }, - { - /* translators: Label for ordering posts by title in ascending order. */ - label: __( 'A → Z' ), - value: 'title/asc', - }, - { - /* translators: Label for ordering posts by title in descending order. */ - label: __( 'Z → A' ), - value: 'title/desc', - }, - ]; - - if ( supportsCustomOrder ) { - orderByOptions.push( + return useMemo( () => { + const orderByOptions = [ { - /* translators: Label for ordering posts by ascending menu order. */ - label: __( 'Ascending by order' ), - value: 'menu_order/asc', + label: __( 'Newest to oldest' ), + value: 'date/desc', }, { - /* translators: Label for ordering posts by descending menu order. */ - label: __( 'Descending by order' ), - value: 'menu_order/desc', - } - ); - } + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, + ]; + + if ( supportsCustomOrder ) { + orderByOptions.push( + { + /* translators: Label for ordering posts by ascending menu order. */ + label: __( 'Ascending by order' ), + value: 'menu_order/asc', + }, + { + /* translators: Label for ordering posts by descending menu order. */ + label: __( 'Descending by order' ), + value: 'menu_order/desc', + } + ); + } - return orderByOptions; + return orderByOptions; + }, [ supportsCustomOrder ] ); } /** From 1becd191cbe59742084ca5d0d71d4beab9d58ab9 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 10:54:18 +0200 Subject: [PATCH 18/26] Add back the defaults to avoid breaking changes --- .../src/query-controls/index.native.js | 23 +++++++++++++++++- .../components/src/query-controls/index.tsx | 24 ++++++++++++++++++- .../components/src/query-controls/types.ts | 3 ++- 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js index b9c3d9b19e5044..262fa0581b6086 100644 --- a/packages/components/src/query-controls/index.native.js +++ b/packages/components/src/query-controls/index.native.js @@ -14,6 +14,27 @@ import CategorySelect from './category-select'; const DEFAULT_MIN_ITEMS = 1; const DEFAULT_MAX_ITEMS = 100; +const defaultOrderByOptions = [ + { + label: __( 'Newest to oldest' ), + value: 'date/desc', + }, + { + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, +]; + const QueryControls = memo( ( { categoriesList, @@ -21,7 +42,7 @@ const QueryControls = memo( numberOfItems, order, orderBy, - orderByOptions, + orderByOptions = defaultOrderByOptions, maxItems = DEFAULT_MAX_ITEMS, minItems = DEFAULT_MIN_ITEMS, onCategoryChange, diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 6a3d7ac43c295d..649aa60cc9b690 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -16,6 +16,7 @@ import type { QueryControlsProps, QueryControlsWithMultipleCategorySelectionProps, QueryControlsWithSingleCategorySelectionProps, + OrderByOption, } from './types'; const DEFAULT_MIN_ITEMS = 1; @@ -34,6 +35,27 @@ function isMultipleCategorySelection( return 'categorySuggestions' in props; } +const defaultOrderByOptions: OrderByOption[] = [ + { + label: __( 'Newest to oldest' ), + value: 'date/desc', + }, + { + label: __( 'Oldest to newest' ), + value: 'date/asc', + }, + { + /* translators: Label for ordering posts by title in ascending order. */ + label: __( 'A → Z' ), + value: 'title/asc', + }, + { + /* translators: Label for ordering posts by title in descending order. */ + label: __( 'Z → A' ), + value: 'title/desc', + }, +]; + /** * Controls to query for posts. * @@ -65,7 +87,7 @@ export function QueryControls( { numberOfItems, order, orderBy, - orderByOptions, + orderByOptions = defaultOrderByOptions, maxItems = DEFAULT_MAX_ITEMS, minItems = DEFAULT_MIN_ITEMS, onAuthorChange, diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts index feef9ed9c58edf..8ac7ca54e6719d 100644 --- a/packages/components/src/query-controls/types.ts +++ b/packages/components/src/query-controls/types.ts @@ -46,7 +46,8 @@ export type AuthorSelectProps = Pick< type Order = 'asc' | 'desc'; type OrderBy = 'date' | 'title' | 'menu_order'; -type OrderByOption = { + +export type OrderByOption = { /** * The label to be shown to the user. */ From 27c04ea429a629f0e4b16d250317cc0ebf0fcf0a Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 10:55:14 +0200 Subject: [PATCH 19/26] Keep the default as prefix to match the rest of coding style --- .../src/query/edit/inspector-controls/order-control.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js index a54a490a7ab667..d5111c4a1ebdfd 100644 --- a/packages/block-library/src/query/edit/inspector-controls/order-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js @@ -4,7 +4,7 @@ import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -const orderByOptionsDefault = [ +const defaultOrderByOptions = [ { label: __( 'Newest to oldest' ), value: 'date/desc', @@ -28,7 +28,7 @@ const orderByOptionsDefault = [ function OrderControl( { order, orderBy, - orderByOptions = orderByOptionsDefault, + orderByOptions = defaultOrderByOptions, onChange, } ) { return ( From 924364c1979e36b85d5c92ce3ad51bb2dd12faa5 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 10:57:29 +0200 Subject: [PATCH 20/26] Rely on the default orderby options for now --- packages/components/src/query-controls/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md index fa3213a1c8747b..1530c4e74de3d3 100644 --- a/packages/components/src/query-controls/README.md +++ b/packages/components/src/query-controls/README.md @@ -46,7 +46,7 @@ const QUERY_DEFAULTS = { const MyQueryControls = () => { const [ query, setQuery ] = useState( QUERY_DEFAULTS ); - const { category, categories, maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } = query; + const { category, categories, maxItems, minItems, numberOfItems, order, orderBy } = query; const updateQuery = ( newQuery ) => { setQuery( { ...query, ...newQuery } ); @@ -54,7 +54,7 @@ const MyQueryControls = () => { return ( updateQuery( { orderBy: newOrderBy } ) } onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) } categoriesList={ categories } @@ -118,7 +118,7 @@ const MyQueryControls = () => { return ( updateQuery( { orderBy: newOrderBy } ) } onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) } categorySuggestions={ categories } From 2cca836afa5b481685a812b9013710e78739325a Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 11:07:19 +0200 Subject: [PATCH 21/26] Remove for now --- packages/components/src/query-controls/README.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md index 1530c4e74de3d3..e7429417e90590 100644 --- a/packages/components/src/query-controls/README.md +++ b/packages/components/src/query-controls/README.md @@ -32,16 +32,6 @@ const QUERY_DEFAULTS = { numberOfItems: 10, order: 'asc', orderBy: 'title', - orderByOptions: [ - { - label: 'Title Ascending', - value: 'title/asc', - }, - { - label: 'Title Descending', - value: 'title/desc', - }, - ], }; const MyQueryControls = () => { From d7e34aaba1f32d5e7a5253b9d4cfc2bfbd06510f Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 11:20:18 +0200 Subject: [PATCH 22/26] Resolve the options via the helper instead --- packages/block-library/src/latest-posts/edit.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index bfcfb318bd8084..4652bfa0905494 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -54,6 +54,7 @@ import { DEFAULT_EXCERPT_LENGTH, } from './constants'; import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; +import { useOrderByOptions } from '../query/utils'; /** * Module Constants @@ -87,7 +88,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { postsToShow, order, orderBy, - orderByOptions, categories, selectedAuthor, displayFeaturedImage, @@ -161,6 +161,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { ] ); + const orderByOptions = useOrderByOptions( 'post' ); + // If a user clicks to a link prevent redirection and show a warning. const { createWarningNotice } = useDispatch( noticeStore ); const showRedirectionPreventedNotice = ( event ) => { From ca99bbd0e88c469288c5d6128b3f2c7f7e4cae85 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 11:38:22 +0200 Subject: [PATCH 23/26] =?UTF-8?q?Latest=20posts=20list=20only=20posts=20wh?= =?UTF-8?q?ich=20don=E2=80=99t=20support=20custom=20menu=20order=20for=20s?= =?UTF-8?q?orting=20so=20we=20don=E2=80=99t=20attempt=20to=20resolve=20it?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/block-library/src/latest-posts/edit.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index d2c1a533992ac4..632efa149313f6 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -148,7 +148,6 @@ class LatestPostsEdit extends Component { addLinkToFeaturedImage, order, orderBy, - orderByOptions, postsToShow, categories, } = attributes; @@ -216,7 +215,7 @@ class LatestPostsEdit extends Component { Date: Fri, 28 Feb 2025 11:50:52 +0200 Subject: [PATCH 24/26] Add our changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f425baae726172..df79cc27570b90 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancement - `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). +- `QueryControls`: Add menu_order sorting option if supported by the post type. ([#68781](https://github.com/WordPress/gutenberg/pull/68781)). ### Internal From 7cc05e857e1834cd1173f9c9ba2eb76c9410d829 Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 11:51:19 +0200 Subject: [PATCH 25/26] Formatting --- packages/components/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index df79cc27570b90..205df52ecd256e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,8 +3,9 @@ ## Unreleased ### Enhancement + - `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). -- `QueryControls`: Add menu_order sorting option if supported by the post type. ([#68781](https://github.com/WordPress/gutenberg/pull/68781)). +- `QueryControls`: Add menu_order sorting option if supported by the post type. ([#68781](https://github.com/WordPress/gutenberg/pull/68781)). ### Internal From 4c6a316ea32498675b0651821f18dcf0b169bccd Mon Sep 17 00:00:00 2001 From: Kaspars Dambis Date: Fri, 28 Feb 2025 11:57:32 +0200 Subject: [PATCH 26/26] Document the change --- 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 b988f7d107fa6c..cd02f194c59902 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Query Loop Block: Enable custom order or `menu_order` ordering option for post types that support it. ([#68781](https://github.com/WordPress/gutenberg/pull/68781)) + ## 9.18.0 (2025-02-12) ## 9.17.0 (2025-01-29)