Query loop block variation with orderBy menu_order and CPT

  • Resolved jakemc

    (@jakemc)


    2 months, 2 weeks ago

    Hello.

    I’m trying to build a variation of the query block that displays items of a custom post type ordered by menu_order. I found this: https://www.ads-software.com/support/topic/query-loop-block-sort-by-menu_order/ and used the very helpful https://developer.www.ads-software.com/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/ to create a Query block variation. On the front end it works fine.

    However, in the block editor, it won’t display the posts. The block appears, but the loading icon isn’t replaced by the relevant CPT items.

    Is this a bug? Am I doing something wrong? I’ve tried this on a bare WordPress install with the Twentytwentyfour theme and only a plugin to register the custom post type. Here’s my code:

    import { registerBlockVariation } from '@wordpress/blocks';

    const MY_VARIATION_NAME = 'myblockvariation/query/ordered-by-menu-order';

    registerBlockVariation('core/query', {

    name: MY_VARIATION_NAME,

    title: 'Query ordered by menu_order',

    description: 'Displays a list of posts ordered as you choose in the WordPress admin.',

    isActive: ({ namespace, query }) => {

    return (

    namespace === MY_VARIATION_NAME

    && query.postType === 'person'

    );

    },

    icon: 'book',

    attributes: {

    namespace: MY_VARIATION_NAME,

    query: {

    postType: 'person',

    perPage: 3,

    pages: 0,

    offset: 0,

    orderBy: 'menu_order',

    order: 'asc',

    author: '',

    search: '',

    exclude: [],

    sticky: '',

    inherit: false,

    },

    },

    scope: ['inserter'],

    innerBlocks: [

    [

    "core/group",

    {

    "align": "wide",

    "layout": { "inherit": false }

    },

    [

    [

    "core/post-template",

    {

    "layout": {

    "type": "grid",

    "columnCount": 3

    }

    },

    [

    [

    "core/group",

    {

    "style": {

    "spacing": {

    "padding": {

    "top": "30px",

    "right": "30px",

    "bottom": "30px",

    "left": "30px"

    }

    }

    },

    "layout": { "inherit": false }

    },

    [

    ["core/post-featured-image", { "isLink": true }],

    ["core/post-terms", { "term": "category", "separator": " | " }],

    ["core/spacer", { "height": "20px" }],

    ["core/post-title", { "level": 3, "isLink": true }],

    ["core/post-excerpt", {}],

    ["core/separator", { "className": "is-style-default" }]

    ]

    ]

    ]

    ]

    ]

    ],

    ['core/query-pagination'],

    ['core/query-no-results']

    ],

    }

    );

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jakemc

    (@jakemc)

    Can anyone tell me where I would report this as a bug?

    Hi @jakemc,

    This is being looked at?here and you may follow along and/or add further thoughts. If you believe your issue is different from the one in the shared link, feel free to create a new issue.

    Thread Starter jakemc

    (@jakemc)

    Thank you, Helena. I think my issue is different: the issue you’ve linked to appears to be about one query block variation’s parameters affecting other queries on the front-end whereas my query block variation sits happily on the front end with other queries from other query block variations all with the desired output. The problem is that it’s not working in the block editor: the block appears but the results of the query are not displayed, just the block loading gif. No console errors are displayed either.

    Please let me know if I’ve misunderstood, otherwise I’ll raise the issue on Github.

    Thanks again.

    Thread Starter jakemc

    (@jakemc)

    If it helps anyone else, I discovered almost by chance that the problem was fixed by ensuring that my CPT supported “page-attributes” (which I’d assumed wouldn’t be necessary since it was defined as “hierarchical”).

    So, changing
    'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail', 'revisions' ),
    to
    'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail', 'revisions', 'page-attributes' ),
    fixed the display problem for my query block variation in the block editor.

    Not sure if this counts as a Gutenberg bug. I’ll be happy to submit it to Github if someone thinks it is…

    Hi @jakemc,

    Thanks for sharing the solution here!

    I’d recommend submitting this as a Gutenberg bug so the triage team can ensure it gets to the right hands.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.