Accordions in Nested Repeaters Exhibiting strange behaviour

There are multiple instances where having a repeater nested within a repeater, or within a query loop causes interactive elements to break. Namely the slider and the accordion.

There’s a number of different issues I’ve run into, and just haven’t had the time to post here.

Nested repeater as accordion outputs code that gets picked up on front-end as well as by my SEO plugin for some reason. This is whether it’s a repeater within a repeater, or repeater within a query.

Typically regenerating Block CSS fixes it. But any edits (to posts, to pages, FAQs, SEO info) causes it to break again.

Typical front-end looks like this:

It is supposed to look like this:

This isn’t from the same page, it’s happened on multiple pages.

SEOPress is pulling in the code for the placeholder meta descriptions as well:

In trying to isolate the cause, I spun up a fresh install, and just added what I needed to recreate. It’s still happening. I also simply used the repeater without nesting and still getting the code printed in SEOPress:

Hello @owynter,

Thanks for reporting the issue you’re experiencing.

You mention quite a few things, so the best thing is to take this step by step, as I cannot reproduce the issue you initially mention mention: markers being output on the frontend.

First of all, can you please confirm that you do not see these markers on the following page: Hello world! – cwiclydemo

Once done, please feel free to edit that same post and see if you can replicate the frontend issue, this should not take more than a minute of your time, I have set everything up: https://app.instawp.io/wordpress-auto-login?site=$2y$10$179MeyMsEFHknUNiqikSaeKc9ttPRDsv0gDtzqqowF/NuNXe9Jg3e

Thanks in advance.

Hi Louis,

Thanks for taking the time to check into it. And you are right, there are multiple issues.

No, I don’t see the issue with what you’ve set up. It looks as it should.
I’m also not able to fully recreate the conditions that have caused the issue since I can’t install any other plugins.

There is one issue I have had that is present even now, however, which might start us down the right path.

If you check the test page here, I have created a query to pull in multiple FAQ posts, each of which has a repeater block with an accordion. The accordions have been Linked.

However, if you check the first set of FAQs, the accordions are not demonstrating the linked behaviour. The second set, however, are.

As for the other issue, I’m unsure how to replicate. If you’re able, I can grant access to my test build to see if there’s something about my environment that’s causing this.

Hello @owynter,

Thank you for setting the FAQ section up.

I can confirm an issue with the IDs of the blocks within a Query / Repeater not being properly unique (context isn’t being passed down), resulting in the accordion link not applying to the first query. We’ll have this fixed in the next update.

As a side note, there is no need to nest the Accordion block inside an Accordions block. Setting a group inside the Accordion block does exactly the same thing (the Accordions block will be useful when your content isn’t repeated and you don’t want to have to set a group for every Accordion block) as explained in our docs:

This means that if you want to link multiple accordion blocks, you simply assemble them in an accordions block and link them in one click, instead of having to link them separately using their individual Settings tabs.

I cannot reproduce the issue with markers appearing on the frontend, suggesting this is an issue with your particular instances. If you can send me temporary access info, that would be great. To keep things secure and private, kindly send (through support or by PM) the details using: https://paste.cwicly.com/

Finally, SEOPress is displaying the markup before it’s processed for frontend view. This does not suggest an issue for me as this is a placeholder, and not information that will be used as a Meta description.

Cheers,

@owynter & @Louis The only time we have seen markers appear on the front-end is when we were copying new section/container blocks from one website into a different website that uses deprecated section blocks.

@StrangeTech, indeed, since the Container block is not supported on those deprecated section installations.

Exactly. Perhaps this could be a similar scenario, where something in the markup is not in sync with the settings?

The site was older, before the new Container block was added. We also never used the Section block and preferred to roll our own.

Right, not suggesting it is identical, just positing it could be caused by something similar.

Blockquote
Great! Thanks for taking a look at it.

Blockquote

I actually don’t, typically, and do it as you’ve said.

Will send access details.

This has been fixed in 1.2.9.9.1.

@owynter, I’ll await your access details to address issues that are specifically happening on your installation(s).

Cheers,