Template Locking: readonly / disable editing attributes

[ellatrix]

Description

This PR adds an option to the <InnerBlocks> templateLock prop to disable all editing inside a template (block attributes).

Unfortunately there is already an option all, which doesn't really locks all editing. It only disables block inserting, moving and removing.

I'm not 100% sure if adding another option is the best thing. Perhaps we should have a prop that allows an array of allowed (or disallowed) operations. Something like lock = [ 'insert', 'delete', 'move', 'attributes' ] where lock = true disables all operations. Thoughts?

The way the attributes are locked is by using the save function instead of the edit function. Decided to use edit, so it's guaranteed to exist. A prop isReadOnly will be passed down, so a block could disable attribute editing controls. Block controls that we provide, such as RichText, PlainText, Placeholder etc. will be disabled by default. The block toolbar and inspector are aso disabled. To ensure so attributes get update by a block, setAttributes will not do anything.

How has this been tested?

Enable the CPT Locking test plugin. You should not be able to edit anything.

For further testing (with content) you could alter e.g. the group block's edit function and adjust InnerBlocks.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[chrisvanpatten]

Yes yes yes!

I'm not 100% sure if adding another option is the best thing. Perhaps we should have a prop that allows an array of allowed (or disallowed) operations. Something like lock = [ 'insert', 'delete', 'move', 'attributes' ] where lock = true disables all operations. Thoughts?

I agree completely! I actually have a few random proposals for this over in #8112. I think a more versatile option for templateLocking would be wildly useful.

[ellatrix]

@chrisvanpatten Nice, I think that's what we should do then.

[chrisvanpatten]

@ellatrix Is there anything I can do to help unblock/move this forward?

[ellatrix]

Review? 🙂

[ellatrix]

I'll rebase the PR, but would be good to know if this is a good direction. Cc @mtias @epiqueras @mcsf.

[epiqueras]

Yes, I think this array form of templateLock is much better and I like how we are still able to keep backwards compatibility with the string form and have our components infer the lock from their context.

[mcsf]

Suggested change

	- `'move'` — prevents blocks form being moved.
	- `'move'` — prevents blocks from being moved.

[mcsf]

I'll rebase the PR, but would be good to know if this is a good direction

I think so, @ellatrix.

[richrd]

This would be great to have! I'm prototyping a slider block which needs to disable editing of the inner blocks when the slider is in preview mode. I tried templateLock: "all" but that still allows tabbing into the blocks within the slides. That causes all the edit controls to appear which breaks the slider layout.

I haven't found a solution yet but it looks like this PR would solve my problem 👍

[guarani]

Looks like this needs to be rebased with master and conflicts resolved to be testable on mobile since this PR pre-dates the monorepo changes.