Section Block

Hey there,
I would like to start a general discussion about the Section Block.

The Section Block is composed of 2 containers:

  • main section wrapper
  • inner div container

Why is this a problem?

Well, in the Navigator you only see a single element. There is a lot confusion about this and there a frequently questions how this block actually works, because users simply get confused.
I think one would just expect a single container, this at least is what the Navigator suggests.

Another fact why one would think that way is the block designer.
There are no specific settings. Some properties apply to the main wrapper, the rest to the inner container.
Which setting is for which element?
Things getting more complicated when using pseudo classes or elements.

So not only that things might be not clear for some (or many) users, using the same Block designer panel for 2 actual elements also comes with limitations.
There are workarounds for some cases but for a normal user or even a beginner, the point where they are stuck has already been reached.

I also see potential issues with the default <section> tag. Semantic wise, but in particular accessibility wise.

My position is the following:
People who know how things work will select their own tags and anything which might be related, like attributes, ID’s, etc. anyway. The upcoming block defaults will improve things even more.
A beginner has no idea and a <div> tag is some kind of allrounder which in general causes the least “semantic damage”.

I think the idea of the Section Block is smart. But people need to understand it. The situation will get even worse since Cwicly seems to target beginners and average users now as well.
How can you get the idea when you don’t know the basics of HTML?

What are your experiences with the Section Block?
Do you even use it or are you building your sections with 2 Div Blocks for example?
I’d love to hear what you think it’s good and/or bad about the Section Block.
Do you have any suggestions to improve the experience /workflow?

Thanks.

I like how Bricks handles sections. When you insert a Section, it inserts both the section and inner container div.

1 Like

Sounds quite interesting.
One block but direct access and full control over both containers.

Yes, I see this too. A lot of people don’t really know what they’re doing and how HTML and CSS works. When there’s no section element, they think something’s missing and don’t realize you can build your own with simple divs and reassigning the tags.

This was prevalent in Bricks, where they had a really cool container block that could be whatever you wanted it to be, but a lot if people didn’t know how to use it and so Bricks made a div, a block, and a section to try to please everyone. I don’t really think we need to create a million similar blocks when we can just learn how to use the blocks we have.

I think it would be good to have the section block spit out both elements in the navigator though, so it makes styling easier, and teaches beginners what a section block actually is. For now we can use relative styling to style most things, but if you want to use custom classes, or something like Tailwind, it gets trickier.

It’s simple enough for us to create our own with two divs (section > div), but I think blocks like that should be built with the existing blocks when possible. It started annoying me how Bricks was trying to appease the beginners so much by building crutches for them instead of just educating them on how to use the tools. I think @Louis has a good grasp of how things can be both simple and complex so I like the direction Cwicly is headed much better.

You can’t please everyone, so it’s best to keep things simple and have good documentation I think. And that’s my novel of a response :sweat_smile:

2 Likes

I did not realize this. Where can I see this if the Section block does not reveal it in the Navigator?

You can’t see it inside the builder, it’s the code output:

When it comes to the basic Cwicly blocks, this is unique. In general, there are no extra wrappers, etc.
You’d just expect it’s a single element.
The styles you set inside the Section Block Design Panel are applied to either the main wrapper or the inner div.
No worries, it all makes sense what’s happening there, but as mentioned, it can get confusing, as well as limiting.

Your concern is my main point of this topic.

1 Like

Hopefully this approach will be implemented! Giving full control over the outer and inner wrapper.