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

[Dotfly-fwiegand]

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

[Mamaduka]

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.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[cristianobaptista]

Hi, I can confirm that this is still relevant for at least WordPress 6.4 and above.

All you need to reproduce this issue is to have a custom block that:

1. Has the templateLock attribute so that you can lock it via the UI.
2. Is using the <InnerBlocks> component to output its inner blocks
3. The <InnerBlocks> component is receiving the template prop with X amount of top-level blocks
4. The <InnerBlocks> component is receiving the templateLock prop value from the block attributes.

Then, while on the block editor, the steps to reproduce are:

1. You update the number of inner blocks to something higher than the aforementioned X amount of the template prop.
2. The templateLock attribute is updated to a non-empty value (e.g. "all" or "contentOnly")
3. You persist these changes and reload the page
4. The block is now only showing X amount of inner blocks instead of all the blocks you just added in step 1
5. The post_content in the database shows that at this point all the inner blocks you added are actually there, but if you save the post again, you will lose all the inner blocks currently not being displayed.

(EDIT: the following proposed workaround doesn't actually work)

The work around I found was to use useInnerBlocksProps() instead of the <InnerBlocks> component.

Here is an example that should work correctly, based on the description of this issue:

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

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"}]
            ]
        ],
    ];

    const { children, ...blockProps } = useInnerBlockProps(
        useBlockProps(),
        {
            allowedBlocks: ALLOWED_BLOCKS,
            template: LIST_TEMPLATE,
            templateLock: attributes.templateLock
        }
    )
    
    return (
        <>
            <div { ...blockProps }>
                <div className="wp-block-dotfly-takeaway__list e-link">
                    { children }
                </div>
            </div>
        </>
    )
}

[cristianobaptista]

Hi, I've spent some more time with this issue and realized that my previously mentioned workaround doesn't really work. Not sure what led me to that mistake. Sorry for the confusion.

I've tested with WordPress 6.0, 6.1, 6.2, 6.3, 6.4 and 6.5, and all showed the same behavior, even with 6.0 where you actually need to manually set the templateLock attribute using the Code Editor mode, as the Locking UI doesn't yet allow you to do it.

A workaround that actually worked for me was to first check if the block currently has any inner blocks, and if it does, I won't pass the block template to the template prop for the inner blocks component, but obviously this doesn't make sense, as the template should always just be there as a default state for the block.

Once again, based on the issue description, here is an example of what worked for me:

import { useSelect } from "@wordpress/data";
import { useBlockProps, useInnerBlockProps } from '@wordpress/block-editor';

export default function Edit( {clientId, 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"}]
            ]
        ],
    ];

    const hasInnerBlocks = useSelect(
        select => select( 'core/block-editor' ).getBlocks( clientId ).length > 0,
        []
    );

    const { children, ...blockProps } = useInnerBlockProps(
        useBlockProps(),
        {
            allowedBlocks: ALLOWED_BLOCKS,
            template: hasInnerBlocks ? null : LIST_TEMPLATE,
            templateLock: attributes.templateLock
        }
    )
    
    return (
        <>
            <div { ...blockProps }>
                <div className="wp-block-dotfly-takeaway__list e-link">
                    { children }
                </div>
            </div>
        </>
    )
}

[carolinmoll]

I can confirm this behavour. It's a severe problem for us. Any updates on that?