In 1.9.6.1, I am trying to use the Accordion (Nestable) element, but it is failing to allow CSS grid when I set it on a class. If I use it at the ID level then it works fine, but not when a class is involved. I made a Facebook post about it first and it seems others have experienced this too.
To reproduce:
Add the Accordion (Nestable) element to a page.
On the “Content” Block under Accordion (Nestable) > Item, add a new CSS class.
Edit the CSS class and enable “grid” as the Display type. Set it to show “1fr 1fr” for example to show the content in two columns.
Add a few more elements to the “Content” block so we can see the way the editor & frontend display the content. Notice this does not show in the two columns as expected since CSS Grid is used on the CSS class. This is incorrect/unexpected behaviour.
Now remove the CSS class from the “Content” Block element and enable CSS Grid at the ID level instead of a CSS class. Notice this shows the content in the two columns as expected. This is expected behaviour.
As you can see, the CSS Grid does not take effect if it’s in a CSS class, it has to be at the ID level instead. Note: I’m not sure if this is related to 1.9.6.1 specifically or if this also occurred in a lower version.
Screenshots:
When grid is enabled on CSS class, notice there is no columns seen:
I’ve been able to temporarily work around this issue with the Accordion Nestable "Content’ Block by adding another Block element inside of the “Content” Block and dragging everything else inside of that new one. Using CSS Grid on a CSS class works fine on the new Block element inside of the “Content” Block element, so this issue seems specific to CSS classes on the “Content” Block of the Accordion Nestable element. This workaround also helps in keeping the accordions closed, as before if I enabled CSS Grid at the ID level of the “Content” Block element, it would keep them all open instead of closed by default. Unsure if that’s a second defect or not, but wanted to bring it up.
This is exactly the right way. The accordion content-wrapper is either hidden (display: none) or shown (display: block) using a style tag. Since the style tag has a higher specificity than your class, it does not work using a class.
However, it would also not work with styling on the ID, as the accordion would then no longer work as expected The same applies to the tabs element (1|2|3).
Thank you for confirming. I suppose this makes sense but this isn’t a great UX. It almost seems like the Content block then shouldn’t be editable at all, so perhaps the better UX is to keep those options hidden on the “Content” block?
I think there’s definitely room for improvement here to avoid people making those kinds of mistakes.
If the Accordion and Tab elements expect that the display mode is never changed from its defaults for example, then it would seem good to enforce it rather than allow for that customization, that would then prevent it from breaking in the first place and save a lot of time. Just my two cents at least.
The same applies to the tabs element (
Just my two cents at least.