-
I want display the results of my Query either as a list or grid. It seems that this should be doable by using Tabs and changing the style of the Looper for each of the tabs.
I want to have a single (outer) Query block and two Looper blocks inside the respective tabs. But I can’t seem to add the Tab block inside the Query block. Using the new Query block from 2.0-beta6 version.
I do not want to have multiple Query blocks as I’m filtering the query using wp gridbuilder.
Is there a way to achieve this?
Happy to go the custom code snippets route if that’s the only/better way.
-
Here’s a potential solution / workaround. Can we recreate the Tabs functionality using regular containers?
The Query block allows you to add nested Container blocks. So you can recreate the tabs structure using containers.
I had a look and it seems that the Tabs block uses
roleandidHTML attributes to do it’s magic. But I haven’t figured out exactly the right structure (yet). -
Hi there,
Can you explain some more about what you want to achieve? is there an example for us to check?
The query block structure should not be changed, it might break the internal functions.
As for the tab block, it requires JavaScript to work, not only HTML or CSS. So you will need to write your own JS if you want to use containers to mimic the function of a tab.
-
I’ve been able to replicate the functionality of the Tabs block purely using Container blocks without any additional JS. It’s a matter of setting the right ids, classes and various aria elements. A bit cumbersome but it works just fine.
This way you can have a Query block inside the custom Tabs block and inside the custom Tab item containers multiple Looper blocks. So one tab displays the results of the Query in a grid layout while the other tab displays it as a list. It’s very easy to toggle between the two layout options now.
-
Cool, although I still don’t quite understand it, but glad it works!
-
Even though this works, it would be great if the Tabs block in the future would support adding a Query and Looper blocks inside of it. Now, it’s a lot of manual work to set things up.
What’s not yet clear @Ying? I can try to elaborate.
-
Can I see what you’ve done? I think that’s the easiest way for me to understand it.
- You must be logged in to reply to this topic.