Create a block variation of list elements

Since I am working with block attributes, I had to also define my attribute within my block.json file…

block.json

    "attributes": {
        "listOrdered": {
            "type": "boolean",
            "default": false
        }

Now with that set in place, I can now run npm start, and see my block variant working well in wp-admin edit page. It allows me a pick either an ordered or unordered list version of my block.

Since my custom block also includes the use of innerBlocks, my final variation in index.js looked something like this…

    variations: [
        {
            name: 'blachawk-blocks/list-block-ordered',
            title: __( 'List Block Ordered' ),
            icon: {
                src: 'list-view',
                background: '#4682b4',
                foreground: '#fff',
            },
            keywords: [ 'blachawk', 'lists', 'list', 'unordered', 'item' ],
            attributes: {
                listOrdered: true,
            },
            innerBlocks: [ [ 'blachawk-blocks/list-block-item' ] ],
        },
    ],

Finally, I also made sure the registerBlockType() for my list-block-item, has two parents in its own index.js file like so…

registerBlockType( 'blachawk-blocks/list-block-item', {

 //...code

    //lets make sure each li item is associated to either the ul or ol variation...
    parent: [
        'blachawk-blocks/list-block',
        'blachawk-blocks/list-block-unordered',
    ],

  //...more code
}