Open Dotfly-fwiegand opened 5 months ago
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.
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.
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:
templateLock
attribute so that you can lock it via the UI.<InnerBlocks>
component to output its inner blocks<InnerBlocks>
component is receiving the template
prop with X amount of top-level blocks<InnerBlocks>
component is receiving the templateLock
prop value from the block attributes.Then, while on the block editor, the steps to reproduce are:
template
prop.templateLock
attribute is updated to a non-empty value (e.g. "all" or "contentOnly")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>
</>
)
}
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>
</>
)
}
I can confirm this behavour. It's a severe problem for us. Any updates on that?
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:
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
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