TemplateLock does not effect nested blocks

[flod-1]

Bug Description
I created two custom blocks for Gutenberg, which are nested.

Level 1 Block: "Milestone":
--> only allows the Level 2 Block "Milestone Element"

Level 2 Block: "Milestone Element":
--> Uses core blocks within a template. In addition "templateLock" is set to "all".

As expected, "Milestone Element" is now locked.
Unfortunately, when the focus switches to a nested (core) block, these blocks are not locked.
The current behavior is what I'd expect when using the option "false" (see doc: https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/inner-blocks) on nested block level.

As described in documentation, in any other cases (option "false" not set) it should inherit the value from the parent (here: "Milestone element") block to the children (here: "core/image", "core/paragraph", ...) block.

Edit function of Level 1 "Milestone":

edit: function (props) {
    return (
        el('div', { className: props.className },
            el(InnerBlocks, {
                className: 'milestones',
                allowedBlocks: ['sbt/milestone']
            })
        )
    )
},

Edit function of Level 2 "Milestone element":

edit: function (props) {
    return (
        el('div', { className: props.className },
            el(InnerBlocks, {
                className: 'milestone',
                template: [
                    ['core/columns', [], [
                        ['core/column', [], [
                            ['core/heading', {
                                placeholder: 'Add Milestone Name',
                                level: 3
                            }],
                            ['core/paragraph', {
                                placeholder: 'Add Milestone Description'
                            }]
                        ]],
                        ['core/column', [], [
                            ['core/image', []]
                        ]]
                    ]]
                ],
            templateLock: 'all'
            })
        )
    )
},

To Reproduce
Steps to reproduce the behavior:

1. Create Level 1 block "milestone".
2. Create level 2 block "milestone element".
3. Add them into a page.
4. Try to change blocks ... the will not be locked ... (see error)

Expected behavior
The nested blocks should be locked as well, when the paling block (milestone element) is locked. See inheritance described above / in documentation.

[jorgefilipecosta]

Hi @floriandagge thank you for submitting this issue.

I did some tests, and it seems the locking inheritance is working as specified in the documentation.
I used the following test code:

( function() {
	var registerBlockType = wp.blocks.registerBlockType;
	var el = wp.element.createElement;
	var InnerBlocks = wp.editor.InnerBlocks;

	registerBlockType( 'test/parent', {
		title: 'Test Parent',
		icon: 'cart',
		category: 'common',

		edit: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( 'span', {}, 'Parent' ),
				el(
					InnerBlocks,
					{
						template:  [
							[ 'test/child' ],
						],
						templateLock: 'all',
					}
				)
			);
		},

		save: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( InnerBlocks.Content, {} )
			);
		},
	} );

	registerBlockType( 'test/child', {
		title: 'Test Child',
		icon: 'cart',
		category: 'common',
		parent: [ 'test/parent' ],

		edit: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( 'span', {}, 'Child' ),
				el(
					InnerBlocks,
					{
						template:  [
							[ 'core/image' ],
							[ 'core/list' ],
                            [ 'core/audio' ],
                            [ 'test/grandchild' ],
						],
					}
				)
			);
		},

		save: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( InnerBlocks.Content, {} )
			);
		},
    } );
    
    registerBlockType( 'test/grandchild', {
		title: 'Test Grandchild',
		icon: 'product',
		category: 'common',
		parent: [ 'test/child' ],

		edit: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( 'span', {}, 'Grandchild' ),
				el(
					InnerBlocks,
					{
						template:  [
							[ 'core/video' ],
							[ 'core/paragraph' ],
							[ 'core/audio' ],
						],
					}
				)
			);
		},

		save: function() {
			return el( 'div', { style: { outline: '1px solid gray', padding: 5 } },
				el( InnerBlocks.Content, {} )
			);
		},
	} );
} )();

I checked that I add the test parent block, the test child block and test grandchild were added.
The test child and test grandchild blocks don't specify any locking, but as we can see in the tests, they are locked because they inherited the locking all from the test parent block.

I think the problem you are facing where the column block does not inherit the locking is because the core column block explicitly sets the teamplateLock value to false to avoid inheritance. Column blocks need to do it otherwise it would always get the locking all set by the columns block. And columns block needs a locking all; otherwise, the user would be able to drag single columns out, delete columns using the UI, etc. and we want column management to be done using only the slider.

I'm closing the issue for now if you need additional information feel free to reopen the issue and we can look further into the problem.