Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InnerBlocks template causes extra blocks to disappear on editor reload #9349

Closed
felixarntz opened this issue Aug 25, 2018 · 4 comments
Closed
Labels
[Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P

Comments

@felixarntz
Copy link
Member

Describe the bug
I'm using the InnerBlocks component in a block in which I want to allow only a single specific block type to be used as children, however as many times as necessary. Gutenberg's own columns block is similar in the way that only the core/column block is allowed as child, however different as in that there is a template set that must not be changed (via templateLock set to 'all').

As I understand from the documentation, the templateLock prop sets whether/how the template can be modified. And when I set it to false, I can duplicate blocks, add new blocks, remove blocks as expected. However, when reloading the editor, it only shows the (number of) blocks that the original template would allow.

To Reproduce
Create a block such as the following:

const { Fragment } = wp.element;
const {
	InnerBlocks,
} = wp.editor;
const { __ } = wp.i18n;

const ALLOWED_BLOCKS = [ 'core/image' ];
const TEMPLATE = [
	[ 'core/image' ],
	[ 'core/image' ],
	[ 'core/image' ],
];

export const name = 'myplugin/test';

export const settings = {
	title: __( 'Test', 'textdomain' ),
	category: 'layout',
	icon: 'grid-view',
	attributes: {},
	edit: () => {
		return (
			<Fragment>
				<div className="my-blocks-container">
					<InnerBlocks
						allowedBlocks={ ALLOWED_BLOCKS }
						template={ TEMPLATE }
						templateLock={ false }
					/>
				</div>
			</Fragment>
		);
	},
	save: () => {
		return (
			<div className="my-blocks-container">
				<InnerBlocks.Content />
			</div>
		);
	},
};

As you can see, by default three image blocks are placed inside the outer block. You can add further ones, and they will save correctly. They will show up on the frontend too. However, when you reload the editor window, you will only see the first three inner blocks as before, as for some reason it always sets back to the template. The properties of them will still be in place, but the extra blocks will simply have vanished. And after saving again, of course they're then no longer present in the frontend as well.

Note that removing blocks is not an issue, they will be gone as expected. Only additional blocks are affected.

Expected behavior
When a template is given and templateLock is set to false, additional blocks should show up as expected when reloading the editor.

Additional context

  • WordPress 4.9.8
  • Gutenberg 3.6.2
@felixarntz felixarntz added the [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P label Aug 25, 2018
@chrisvanpatten
Copy link
Member

I think this is a duplicate of #8901. Can you check @felixarntz?

@felixarntz
Copy link
Member Author

@chrisvanpatten Is the issue number you referred to as intended? I don't see any relationship to this issue tbh :)

@chrisvanpatten
Copy link
Member

@felixarntz argh! My bad, sorry! 🙈 I meant #8109!

@felixarntz
Copy link
Member Author

@chrisvanpatten Ah, indeed! I'll close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P
Projects
None yet
Development

No branches or pull requests

2 participants