0

I'm registering two block variations; one for query-loop (called carousel) and one for group (called dialog). Is it possible to include the variation for group/dialog inside the query-loop/carousel.

EDIT: Basically I want it so that when you insert the query variation, the post template starts/includes the group variation.

Code is something like below

wp.domReady( function() {
    
    wp.blocks.registerBlockVariation( 'core/group', {
        name: 'dialog',
        title: 'Dialog',
        attributes: { 
            tagName: 'dialog',
            className: 'carousel-modal',
            namespace: 'st/core-group-dialogmodal'
        },
        innerBlocks: [
            ['core/group', {}, [
                ['core/post-featured-image'],
                ['core/group', {}, 
                [
                    ['core/post-excerpt']
                ]
                ]
            ]]
        ],
        isActive: ({namespace, query}) => {
            return (
                namespace === 'st/core-group-dialogmodal'
            )
        }
    })
    
    wp.blocks.registerBlockVariation( 'core/query', {
        name: 'query-carousel',
        title: 'Query Loop - Carousel',
        description: 'A carousel component based on a query loop variation',
        isDefault: false,
        attributes: {
            className: 'carousel',
            namespace: 'st/core-query-carousel',
            query: {
                perPage: 8
            }
        },
        scope: ['inserter'],
        innerBlocks: [
            ['core/post-template', {},
            [
                ['core/post-featured-image'],
                ['core/group', 'st/core-group-dialogmodal'],
                ['core/group', {},
                    [   
                    
                        ['core/post-title'],
                        ['core/post-excerpt'],
                    ],
                ],
            ],
            ],
            ['core/query-pagination']
        ],
        isActive: ({namespace, query}) => {
            return (
                namespace === 'st/core-query-carousel'
            )
        }
    });
});
3
  • All variations of a block have the same block type, e.g. all embeds are core/embed regardless of their variation name, so the question doesn't make a lot of sense, declaring that core/group is allowed means all variations of that block are allowed because a variation isn't a new type of block it's just a variation, like red vs blue skittles are still skittles. Are you asking how to allow groups but only that specific variation in the inner blocks?
    – Tom J Nowell
    Sep 12, 2023 at 12:51
  • I'm wanting the core/query variation, when inserted in to the post/page, to include the core/group variation within the post template
    – SteveT
    Sep 12, 2023 at 13:23
  • then you would define the inner block template so that it contains the things that make that block your variation. E.g. if you had a core/embed block and it had a URL that lead ot youtube, WP would automatically present it as a Youtube block. There's no "variation" specific field to set because you were the one who chose which field makes a group block a "dialog" group block, aka namespace === 'st/core-group-dialogmodal', just add a group block with a namespace attribute that matches that, same way you'd define a paragraphs text or a title blocks classname
    – Tom J Nowell
    Sep 12, 2023 at 14:15

1 Answer 1

0

Block variations are not block types, you need to add a group block, and give it the necessary attributes.

As for what those attributes are, you're the one who chose them when you registered the block, and it looks like there's even a function that checks for it:

        attributes: { 
            tagName: 'dialog',
            className: 'carousel-modal',
            namespace: 'st/core-group-dialogmodal'
...
        isActive: ({namespace, query}) => {
            return (
                namespace === 'st/core-group-dialogmodal'
            )
        }

So specify the namespace attribute:

['core/group', { namespace: 'st/core-group-dialogmodal' } ],

Keep in mind though that the code in the question will result in 2 nested group blocks, it might have been better to create a carousel group block, then used its class names to style any direct dependents as slides. This way you could put a query block inside the carousel, or manually insert items, and they could be standard group blocks, not variations.

Importantly, instead of relying on .carousel-modal to style each slide in the carousel you would use the > selector e.g. .carousel > * would select any direct immediate descendents. This avoids all the problems with group blocks having controls that would mess up your styling, or being able to insert group blocks that don't fit your design, or how to add additional slides manually to the start or end of the carousel

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.