Search code examples
wordpressblockwordpress-gutenberg

InnerBlocks templateLock="all" issue on WordPress 6.1.1


I have a custom block that creates a 3 column template with InnerBlocks and a templateLock="all" attribute to avoid that users move/remove or add something in the template. It used to properly work on WordPress 6.0.3 (and bellow) but then when I updated to 6.1.1 it had issues. Instead of locking the template and showing the columns in which I should be able to add other blocks, it hides the newly inserted columns so that they are unselectable in the editor.

Here is how I create the innerBlocks

<window.wp.blockEditor.InnerBlocks
    template={new Array(3).fill(['core/column', {}])}
    templateLock="all"
/>

Here is what I have when I copy the block

<!-- wp:attest/grid-columns {"numColumnsStr":"3"} -->
<div class="grid grid--columns-3"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:attest/grid-columns -->

I've tried to look at the changes since WordPress 6.0.3 but couldn't find something useful.

Thanks for you help.


Solution

  • In fact child blocks inherits from parent's templateLock attribute so the columns were present, they were just locked and as they are newly inserted, they were empty thus rendered invisible. So the idea is to unlock the core/column block and its (future) child blocks by default. Here is my updated code

    <window.wp.editor.InnerBlocks
        template={new Array(numColumns).fill(['core/column', {templateLock: false, lock: {move: false, remove: false}}])}
        templateLock='all'
    />