Skip to content
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

Add menu_order sorting option to Query Loop block #68781

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Add menu_order sorting option to Query Loop block #68781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f0c3039
Add support for menu order
kasparsd Jan 20, 2025
11fca2e
Add the menu order option
kasparsd Jan 20, 2025
681186c
Two more copy-paste location
kasparsd Jan 20, 2025
27dd5a1
Match the order
kasparsd Jan 20, 2025
a50362f
Update labels per discussion
kasparsd Jan 21, 2025
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
10 changes: 10 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/order-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,16 @@ const orderOptions = [
label: __( 'Z → A' ),
value: 'title/desc',
},
{
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These options should be available only to post types that support page attributes. Where and how do we add that logic? Here is a reference to how the "order" setting is decided at the page settings three-dots:

gutenberg/packages/editor/src/dataviews/store/private-actions.ts

Lines 156 to 158 in be5ce8a

postTypeConfig.supports?.[ 'page-attributes' ]
? reorderPage
: undefined,

Copy link
Contributor

@carolinan carolinan Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I don't know if it helps but there is a PageAttributesCheck, that you can take inspiration from:
https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/page-attributes/check.js
A check for the post type support should probably go in the block's utils.js file.

/* 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 } ) {
return (
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/query-controls/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,16 @@ const options = [
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(
Expand Down
52 changes: 32 additions & 20 deletions packages/components/src/query-controls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,37 @@ export function QueryControls( {
// but instead are destructured inline where necessary.
...props
}: QueryControlsProps ) {
const orderByList = [
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The name here matches the props.categoriesList convention used below with orderBy being the feature.

{
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 (
<VStack spacing="4" className="components-query-controls">
{ [
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/query-controls/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export type AuthorSelectProps = Pick<
};

type Order = 'asc' | 'desc';
type OrderBy = 'date' | 'title';
type OrderBy = 'date' | 'title' | 'menu_order';

type BaseQueryControlsProps = {
/**
Expand Down
Loading