Create a block variation of list elements
I would like to create a variation of a block that has a parent ul or ol element on it, depending on the block you click.
Is it possible to use Block Variations to change the parent html element? For example, can we apply the following concept in code, or is this a no-go? …
index.js
registerBlockType( metadata.name, {
//...other code here...
edit: Edit,
save,
variations: [
{
name: 'blachawk-blocks/list-block-ordered',
title: __( 'An ordered block' ),
icon: 'list-view',
attributes: {
listOrdered: true,
},
},
],
} );
edit.js
export default function Edit( props ) {
//...other innerBlocksProps code here...
//the focus of my question :
const { attributes } = props;
const { listOrdered } = attributes;
return listOrdered ? (
<ol { ...innerBlocksProps } />
) : (
<ul { ...innerBlocksProps } />
);
Obviously the code above is wrong. But I am trying to make an effort to learn here. Is this process possible?
If I am on the right track, how far off am I? So far when I run this in the browser, it gives me ul
for both block types, from my blocks list panel.
Leave an answer