When we use nestable elements (ie the nestable accordion, tabs, slider or any custom nestable element) inside of a component, it prevents elements inside those nestable elements from reliably being output in the builder. (Specifically those elements rendered with PHP in the builder, not using x-template).
It becomes more obvious when adding multiple instances of the same component to the page, where it’ll only output the element in one component instance, but is missing from the rest.
Steps to reproduce…
- Add section > container > nestable accordion to a blank page.
- Inside the accordion element, add an image element and populate it with an image
- Make the container into a component.
- Add multiple instances of this component to the page.
- Refresh the builder, notice the image inside of the accordion isn’t being output most of the time. Usually, it will appear in only one component instance. (it’s not just invisible it’s missing from the DOM)
Video recording showing steps and issue - Elements not output inside components in the builder when inside nestable element
Extra info -
- Moving the accordion items (the block element) outside of the accordion makes all the inner element output correctly. It only happens when inside of nestable elements.
- Replace the accordion for slider or other nestable elements and it’s the same issue.
- Replace the image for something like video element, nav menu, icon element etc (anything element not using x-template for rendering in the builder) and it’s the same issue.
Similar to this bug I reported a while back, but back then it was related to adding properties. Here we’re not using any properties, the elements just aren’t being added to the page at all.