Question 268383 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Gutenberg core/query block missing Grid View option in custom variation

I’m encountering an issue with a custom block variation of the core/query block in Gutenberg. Specifically, I’m missing the Grid View option in my custom block variation.

Here’s my variation registration code:

const VARIATION_NAME = 'custom_variation_query_loop';

registerBlockVariation('core/query', {
    name: custom_variation_query_loop,
    title: 'Custom Variation Query Loop',
    description: 'Variation (Custom)',
    usesContext: ["query", "displayLayout"],
    isActive: ( blockAttributes ) =>
        blockAttributes.namespace === VARIATION_NAME,
    icon: 'admin-links',
    attributes: {
        namespace: VARIATION_NAME,
        displayLayout: {
            type: 'flex',
            columns: 2,
        },
        query: {
            postType: 'destination',
            orderBy: 'title',
            perPage: 12,
            offset: 0,
        },
    },
    innerBlocks: [
        [
            'hwrdp/post-template-id-filter',
            {},
            [
                ['core/post-title', { level: 0, isLink: true, fontSize: 'large' }],
            ],
        ],
        ['core/query-no-results'],
    ],
    scope: [ 'block', 'inserter' ],
});

Everything else in the custom variation works as expected. However, the Grid View option just isn’t available.

Has anyone encountered a similar issue? Any pointers on what might be causing this and how to fix it?

  1. Registered a custom block variation for core/query using registerBlockVariation.
  2. Provided necessary attributes including the displayLayout with a flex layout and 2 columns.
  3. Checked and ensured that the theme, WordPress, and all related plugins are updated.
  4. Verified the PHP side to make sure there’s no interference, and it seems unrelated to the problem
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If anyone else encounters a similar issue, here's the solution I found:

    The Grid/Post view wasn't displaying as expected. Upon investigation, it was revealed that the editor did not display posts within the query loop, which was due to the use of a custom post type and the modified query.

    To address this:

    1. Use the rest_{$this->post_type}_query filter. This ensures the posts are displayed correctly within the editor when using a custom post type.
    2. Once the above filter is applied, you should see the grid view display as expected.

    Additionally, a big shoutout to @S.Walsh for pointing out naming and recommending the explicit mention of layout: grid. Appreciate the insight


  2. 0

    I tested your variation code and the grid option appears as expected when you select the Post Template of your Custom Variation Query Loop:
    Custom Variation Query Loop > Post Template

    I would try using the default post template to rule out any potential issues with the custom [hwrdp/post-template-id-filter] block, eg:

    innerBlocks: [
        [
            'core/post-template',
            {
                'layout': {
                    type: 'grid',
                    columnCount: 2
                }
            },
           [['core/post-title', { level: 0, isLink: true, fontSize: 'large' }]],
        ],
        ['core/query-no-results'],
    ],
...

    Other than that, the only issue I can see is a potential typo for the value of name, I would expect it to be:

    registerBlockVariation('core/query', {
    name: VARIATION_NAME,
...
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search