Options to remove some unnecessary query block wrappers

Hi,

After playing a bit with queries, here a few wrappers I could live without:

  • main query wrapper
  • query item inner wrapper
  • post content

For the post content block, I guess a block option to remove the wrapper could be nice and easy to add.
(In the meantime I use get_the_content() in a code block, but I hate to see those Gutenberg comments!)

As for the others, I don’t know the inner mechanics of Cwicly query block, but in my opinion they should be removable as well.

image

2 Likes

I have also been wondering about this. Most other users probably haven’t noticed this, but as I am a bit of a perfectionist, I want to have control over every line of code and make it as clean as possible.
I have a problem with “cc-query-item” which I cannot control. Meaning, I cannot add my own class to it or change its HTML tag (for example, using “article” instead of “div”).
I was also wondering if it would be possible to merge the query and query template together, instead of having them as two separate wrappers in the frontend. I am not sure if it is possible with the current setup. Probably not because we cannot forget about pagination as well which should be under query but outside query-template.
Ok, maybe at least an option to remove IDs for query and query-template when they are disabled in particular block settings?
In an ideal world, I would like the query to look like this.

<div class="query custom-class" data-query_id="94">
 <div class="query-template custom-class">
   <article class="cc-query-item custom-class">
     Post item content whatever it is...
   </article>
 </div>
</div>

But upon looking at your code, @yankiara, you should check your query setup. The two additional divs marked in red after “cc-query-item” are probably caused by you, as there is nothing outputted by the query after “cc-query-item” besides the content you generated. At least, that is the case for me.

5 Likes

Totally agree with you for cc-query-item control.

And that’s exactly why I have div wrapper inside it.

I posted some generic screenshot, but the div is actually needed to customize item container TAG (for instance article, like you mentionned) or to make it a LINK, which doesn’t seem possible with cc-query-item.

As for the last div wrapper in red, it’s not from me but like I tried to explain from the post content block :wink:
And I’d like it to be removable as well.

2 Likes

Love it, thanks for bringing this up and sharing your thoughts @yankiara and @krievinshj.
This definitely should be addressed somehow.

:100:

Hi,

Found other wrappers to remove.

ACF repeater

image

Terms block (2 nested wrappers!)

image

1 Like

I think this ties in nicely with this feature request:

2 Likes

I love Cwicly more than anything in WordPress right now, particularly because of the clean code it outputs. However, the query has actually become one of my biggest pain points lately.

When I first wrote about it, I was wondering if the query HTML output could be cleaner, but now I’ve had a few situations where the query block output is actually limiting me, and I’m forced to use a code block with my own custom query.

A real-life example I had recently: I needed an unordered list with post items where the first <li> is static and the rest are query items. The structure is pretty straightforward:

<ul class="my-query">
 <li>static item</li>
 <li>query-item</li>
 <li>query-item</li>
 <li>query-item</li>
</ul>

It seemed like an easy task, but no. Since we cannot change the tag for “querytemplate” and “cc-query-item”, the desired layout cannot be achieved. Of course, I can visually make it look the way I want, but the HTML is definitely not what I want.

Another situation I had recently involved a query that needed to be laid out as a table, with a static table header and query items as rows. Again, I failed with Cwicly’s query block to achieve the proper HTML layout, and I had to create my own custom query, which is a bit of shame because my goal for “no-code” approach is the main reason I use Cwicly in the first place.

So, I wish there was more flexibility in this regard, specifically the option to apply the desired tags and classes for “querytemplate” and “cc-query-item”.

I actually really like Bricks’ approach, where any div can be turned into a query without any extra wrappers - so you get exactly what you made. For testing purposes, I tried both of my cases in Bricks and easily accomplished them with their query solution.

I hope @Louis takes a look at this and provides more flexibility with the query block in the future.

5 Likes

I feel exactly the same regarding flexibility. A bit like with the section implementation!

The kind of details which are not details for everyone, especially when you work all day with these tools for professional projects that require customization. Sadly Cwicly feels a bit cheap in some parts now that I use it for all new projects, but it is also the “least worse” for now to me because I can easily work with custom blocks or PHP/CSS to replace flawed elements :wink:

And like you say, Bricks did a great job with this, listening to our feedbacks, and providing us with very flexible and ergonomic solution for both query output and section element.

That said, I’m pretty confident that Cwicly’s dev philosophy and cycle can fix all this :slight_smile:

Hello everyone,

Thank you for your contributions to this discussion.

I do acknowledge that there is room for improvement in the Query and Section blocks, and we plan to make refinements to these blocks after we release the Nav block.

While comparisons are a valid aspect of product development, it is important to consider the respective release dates of the products when making such comparisons, as well as the features included within.

7 Likes

Hi! Any updates about this @Louis ?

I am also waiting for this enhancement. In the query template block and repeater block, the unnecessary block wrapper. I am not sure if there were any other blocks.

Yes. I noticed the same too, when I was doing something with repeater block.

@Louis, Thank you for the excellent recent updates.

Regarding the following item in Cwicly 1.3.4.2:

I just want to check what the migration process will be. I’m wondering whether you will add a toggle setting in the deprecated section for this, as we have some current workarounds for styling inner blocks that might break if the structure was changed without preparation - for example:

I’m sure you have this covered, I am just planning ahead for what we will need to change after this has been completed.

1 Like

I also need this Query Item Wrapper removed. :100:
It’s not possible to create my own nav > ul > li from a queried list of custom posts because of this wrapper. :frowning:

3 Likes

Coming from Bricks, this is a bit concerning. I already see how annoying it will be.

Yes. I wanted to create my portfolio site with Cwicly, I ended up went with Bricks because Bricks is more flexible in this area. I hope removing unwanted div from Cwicly Query Template Block is happening soon. Or it’s already being removed?

So here am I, stuck because of the wrappers generated by the query.

Yes, I can do some more custom code but it’s too bad because Tailwind divide-y and divide-x are so handy.

Hopefully, they will be removed soon. :crossed_fingers:

Update : I succeeded to create the correct structure with the other Query element (it’s actually pretty confusing to know the difference between “Query” or “Query loop” for a Cwicly noob like me) it’s actually divide-y that doesn’t seem to work…

In your query loop, is that unnecessary wrapper still there?

All Cwicly blocks have the Cwicly logo in their block icon, so you can more easily identify them at a glance.

Screenshot 2024-03-02 at 16.47.53

2 Likes

Thanks! I think I should take rest on the weekend as I am not seeing clearly at this point… :persevere:

1 Like