How can I dynamically wrap <InnerBlocks > in a Gutenberg block?

admin管理员组

文章数量:1023065

I have created a custom list block that should behave just like the core one, but instead of handling the list items itself, it abstracts that responsability to inner listItem blocks. I want wrap the <innerBlocks/> element in either a <ul> or a <ol> tag depending on a attribute.

Everything is fine and dandy. Except that if I conditionally render different <innerBlocks/> from a array like the following, after switching from a ordered list to a unordered one or the other way around, I am no longer able to edit the content of my list block.

...

const templates = [
   <ul className={wrapperClassName}>
       <InnerBlocks allowedBlocks={allowedBlocks}/>
   </ul>,
   <ol className={wrapperClassName}>
       <InnerBlocks allowedBlocks={allowedBlocks}/>
   </ol>
]

...

return([
    <BlockControls>
    ...
    </BlockControls>,
    templates[type] // Where type is an attribute of my block
])

I really need to have this block working because I need a list with title, paragraph and a custom index of sorts. I can't use the core list block since it is very limited. Of course I could create two separate blocks, but this would go completly against the DRY principle.

I supose I could create two React components for each type of lists without having the Gutenberg framework as a man in the middle, but I am concerned about compatibility, if I choose this route. If there's no issues in this front, then I'm all about ditching the Gutenberg API and working directly with the React one.

Can any one give me an insight into how to dynimically wrap the <InnerBlocks /> element?

Edit I:

I am able to do something similar inside the return() of the save() method, however I suppose I should be able to do the same in the edit() method.

    <Fragment>
        {(ListType == 'ul') ? 
            <ul className={wrapperClassName} >
                <InnerBlocks.Content />
            </ul>
        :
            <ol className={wrapperClassName} >
                <InnerBlocks.Content />
            </ol>
        }
    </Fragment>

I have created a custom list block that should behave just like the core one, but instead of handling the list items itself, it abstracts that responsability to inner listItem blocks. I want wrap the <innerBlocks/> element in either a <ul> or a <ol> tag depending on a attribute.

Everything is fine and dandy. Except that if I conditionally render different <innerBlocks/> from a array like the following, after switching from a ordered list to a unordered one or the other way around, I am no longer able to edit the content of my list block.

...

const templates = [
   <ul className={wrapperClassName}>
       <InnerBlocks allowedBlocks={allowedBlocks}/>
   </ul>,
   <ol className={wrapperClassName}>
       <InnerBlocks allowedBlocks={allowedBlocks}/>
   </ol>
]

...

return([
    <BlockControls>
    ...
    </BlockControls>,
    templates[type] // Where type is an attribute of my block
])

I really need to have this block working because I need a list with title, paragraph and a custom index of sorts. I can't use the core list block since it is very limited. Of course I could create two separate blocks, but this would go completly against the DRY principle.

I supose I could create two React components for each type of lists without having the Gutenberg framework as a man in the middle, but I am concerned about compatibility, if I choose this route. If there's no issues in this front, then I'm all about ditching the Gutenberg API and working directly with the React one.

Can any one give me an insight into how to dynimically wrap the <InnerBlocks /> element?

Edit I:

I am able to do something similar inside the return() of the save() method, however I suppose I should be able to do the same in the edit() method.

    <Fragment>
        {(ListType == 'ul') ? 
            <ul className={wrapperClassName} >
                <InnerBlocks.Content />
            </ul>
        :
            <ol className={wrapperClassName} >
                <InnerBlocks.Content />
            </ol>
        }
    </Fragment>

本文标签： How can I dynamically wrap ltInnerBlocks gt in a Gutenberg block