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

'core/list' with 'core/list-items' not loading correctly as innerblocks #61578

Open
Dotfly-fwiegand opened this issue May 10, 2024 · 1 comment
Labels
[Block] List Affects the List Block [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P Needs Testing Needs further testing to be confirmed. [Type] Bug An existing feature does not function as intended

Comments

@Dotfly-fwiegand
Copy link

Description

While creating Custom Blocks for our client, we came across this unexpected behaviour.
A Block with a list as innerblocks is only loading the content of the list-items which have a entry in the list_template.
To Clarify, if we create this list template:

const LIST_TEMPLATE = [
		['core/list', {},
			[
				['core/list-item', {placeholder: "add entry"}],
				['core/list-item', {placeholder: "add entry"}]
			]
		],
	];

and the editor adds more list-items, only the content of the first 2 is loaded after editor-reload, even though everything is saved to the database correctly. That leads to overwriting the desired list-items after the editor is reloaded without the correct content.
For Example:
Save 4 list-items -> reload page, only 2 are loaded correctly -> safe again and the other 2 get deleted, overwritten

This behaviour only occurred with list/list-items. We used the same code with different behaviour on "core/buttons" "core/button" and other core blocks.

Step-by-step reproduction instructions

Create a new Block with this edit JS

import {useBlockProps, InnerBlocks} from '@wordpress/block-editor';

import './editor.scss';

/**
 * @return {Element} Element to render.
 */
export default function Edit( {attributes, setAttributes}) {

	const ALLOWED_BLOCKS = [ 'core/list', 'core/list-item' ];
	const LIST_TEMPLATE = [
		['core/list', {},
			[
				['core/list-item', {placeholder: "add entry"}],
				['core/list-item', {placeholder: "add entry"}]
			]
		],
	];

	return (
		<>
			{/* Begin Main Block Zone */}
			<div {...useBlockProps()}>
				<div className="wp-block-dotfly-takeaway__list e-link">
					<InnerBlocks
						allowedBlocks={ALLOWED_BLOCKS}
						template={LIST_TEMPLATE}
						templateLock="all"
					/>
				</div>
			</div>
			{/* End Main Block Zone */}
		</>
	)
}

Build Plugin,

Screenshots, screen recording, code snippet

No response

Environment info

Tested in different environments (Docker / Orbstack, Debian Server) with Wordpress 6.5.3 and different Browsers (Arc, Chrome, Firefox, Safari). Tested with a clean installation without any other plugins active

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@Dotfly-fwiegand Dotfly-fwiegand added the [Type] Bug An existing feature does not function as intended label May 10, 2024
@Mamaduka Mamaduka added Needs Testing Needs further testing to be confirmed. [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Block] List Affects the List Block labels May 10, 2024
@Mamaduka
Copy link
Member

Thanks for reporting the issue, @Dotfly-fwiegand!

Could you share a code example for the core/buttons|core/button block that works correctly?

I see that the shared example uses the templateLock="all", which should prevent adding more list items, but it seems it's not working correctly for the List block.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P Needs Testing Needs further testing to be confirmed. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants