1

It seems like the only thing you can put inside a list item is text (including links), inline images, and lists. But I would like to insert a whole group of blocks inside a list item.

I was able to do it by switching to the code editor but then when I go back to the visual editor I get errors (This block contains unexpected or invalid content). Besides the error, it displays properly but doesn't allow modifications.

I have a lot of things to add to this page and HTML isn't going to cut it. Besides using HTML, is there a way to make it work? I'm thinking a group with a CSS class that makes it display an item number or bullet. Not sure how to to achieve that but I'm open to your input.

1
  • this isn't something the list block supports right now, it can only contain richtext content and bullet points, perhaps in the future it will instead be a block that can contain other blocks. What would doing this solve for you? There are likely other ways to achieve your original goal that don't involve doing this
    – Tom J Nowell
    Commented Dec 6, 2022 at 22:29

3 Answers 3

0

My solution is to use CSS to simulate numbers (or bullets) on a group (which is a <div>). So I first created groups within groups, and then I added CSS class on the topmost group:

.numbered-list {
    counter-reset: item;
}

And for each item, the group has this class:

.numbered-list-item {
}
.numbered-list-item:before {
    content: counter(item) "";
    counter-increment: item;
    line-height: 1;
    display: block;
}

Now the groups behave just like a numbered list, and they can contain anything.

0

You'd have to create your own "list" block with InnerBlocks component for each list item. Since InnerBlocks can't be nested, you'd have to build also parent - child block structure where parent block also has InnerBlocks, and in this component are inserted just list items.

Parent (with Innerblocks component) -> Child (also with InnerBlocks). Now, to avoid one div nesting, it would be even better to use new hook useInnerBlocksProps instead of Innerblocks component.

This probably will not make much sense if you are not skilled in block editor development.

0

Yes, it is possible to insert a group of blocks inside a list item in the WordPress block editor (Gutenberg). One way to do this is by using a "Group" block as a container for the other blocks.

To do this, you can follow these steps:

1- Add a "List" block to your page or post.

2- Inside the list item, click the "+" icon to add a new block.

3- From the "Common Blocks" category, select the "Group" block.

4- Inside the Group block, you can add the other blocks that you want to include in the list item.

This will create a container for the other blocks that you can style as needed using CSS. You can also add a custom CSS class to the Group block, which you can then use to apply specific styles to the group of blocks.

To add a custom CSS class to the Group block, click the "Advanced" tab in the block settings and enter the class name in the "Additional CSS Class" field. You can then use this class in your stylesheet to apply styles to the group of blocks.

I hope this helps! Let me know if you have any further questions or need additional assistance.

1
  • That is incorrect. Step 2 will not bring the block selection. It will add a sub-list.
    – Emmanuel
    Commented Jan 4, 2023 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.