CODEWITHSUNDEEP
reactjswordpress-gutenberggutenberg-blocks
niklas
niklas

Reputation: 2991

Gutenberg InnerBlocks.Content in Editor

I have a block that uses <InnerBlocks />. I know that I can, in the backend import the InnerBlocks component, and it will render a block editor ontop of my block. In the save function of my block, I can use <InnerBlocks.Content /> and it will only render the contents of the block.

My goal is to have <InnerBlocks.Content /> i.e. an uneditable version of the inner blocks also in the backend. Its a state of my block where it will preview the edited settings. I can use 

<InnerBlocks templateLock="all" />

To get rid of all inserter points in the editor, making it impossible to add new blocks. However existing inner blocks will still be editable. Is there a block attribute or editor setting to disable editing of certain blocks totally? Or can I achive my goal in another way?

Asked differently: How can I get and display the content of any block (with content of inner blocks) in the editor?

Upvotes: 2

Views: 2477

Answers (1)

Mehmood Ahmad
Mehmood Ahmad

Reputation: 657

The current behavior of the blocks in your scenario is the expected behavior. That you can restrict user for making changes in the block means adding/removing blocks but the block itself and its sub blocks will remain configurable means changing color, font size etc.

You can use Block Filters to change the defaults of blocks the concept of this is same like WordPress hooks. Although you can change the behavior of core blocks by using this but it is not recommended from me as it can introduce complexities or can effect other blocks which depends on these (i.e. plugin blocks like WooCommerce). I will prefer to develop custom blocks in your scenario in which I can show or hide the inner blocks by using any attribute value.

If you interested in contributing on Gutenberg then I think this will be a nice addition on current blocks.

Upvotes: 2

Related Questions