javascript - Include Block Variation Within InnerBlocks

admin管理员组

文章数量:1134246

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'
            )
        }
    });
});

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'
            )
        }
    });
});

• javascript
• block-editor

Share Improve this question edited Sep 12, 2023 at 13:24 SteveT asked Sep 12, 2023 at 12:18 SteveTSteveT 322 bronze badges 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 ♦ Commented 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 Commented 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 ♦ Commented Sep 12, 2023 at 14:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptInclude Block Variation Within InnerBlocks