Block / Column element

Hey,

wondering a bit that no thread is here about the new Block Element.

Want to add my thinkings to that here and also want to read your opinions.
Pls skip comments like “if you don’t like it - don’t use it”. They do not help anyone…

  1. I’m a bit confused about the communication. Where did the block come from so suddenly?
    I never saw any feature request (maybe my fault) and it does not appear on the roadmap.
    It’s quite unusual to include such surprise features in a RC. That’s what alpha and beta are for. Test new features and then only fix the bugs in the RCs.
    Perhaps there would have been less controversy about this if it had been communicated more transparently.

  2. Block / Column itself. I simply don’t like the concept behind. The naming is confusing and there is no relationship to a real html element. How could it be, they are only divs with enabled properties.
    What I don’t like about that idea:

a) it’s endless especially with css grid knocking at the door. If it is followed up consistently, we end up with a mass of predefined divs for flex / grid / sticky and so on.

b) It complicates trainings. I try hard to push my team to use semantically correct elements and then I have to explain that this blocks are divs but other divs same with container. A user in the facebook group hit the nail on the head because she “because she understood it now after Udoro’s diagram and explanation.” That’s the point! You need a diagram and a detailed explaination. With such a simple element this should simply not be necessary.

Ideas? Yes. I see the idea to give the user easy to understand tools and help beginners to get fast and great results. I would like to think it bigger. In the end I don’t want a basic element I want a basic layout. A section with one or two columns in it. A section with a grid layout in it and so on.
In oxygen + oxyninja you have a section with premade layouts. Two columns, three columns, different grid sections and so on. Here we’re able to use prestyled divs and get with one click the result we want a final result. The charme is that beginners but also pros have a real timesaver with that and we don’t clutter the basic blocks with a ton of basic elements.

I also liked the idea of give the div global options for disable “prestyling” one user in the fb group wrote. I see here some conflicts with Thomas approach for nested elements but I like the approach to keep the div a div and add simply some more controlelemtents to the element.
Additional here: The word “content” is misleading in the elementoptionspanel. It’s more like “element” or “element options” isn’t it?

How are your thinkings on that?

edit
I got Thomas wrong. That premade layouts part is already implemented.
But why not under the elements?
Please create a section “Helpers” or “premade layouts” put this “container” and “Block” together with the premade layouts in and let people get access from the + menu. Then everyone is fine. We would get a clear differentiation between layout and layout helpers… Also there is then a home for the later arriving grid layouts.

Here a quick draft

3 Likes

From the user in the Facebook group who likes the diagram and likes the elements Div and Block: there are multiple skill sets and perspectives using Bricks. I am relatively new to Wordpress (expertise in architecture, 3gl development, dba). I found the Wordpress architecture fairly convoluted and confining, until I found Bricks. My first exposure to flexbox was confusing until I found some diagrams. Diagrams are useful.

Keep the Div and Block elements as they are in 1.5RC. Some folks (including myself) find them useful.

If you’re able to read diagrams you’re also able to interpret a screenmockup correct? As you see your beloved elements are still there. I moved them only to a section were they belong to.

And of course diagrams are useful. Diagrams are tools.
But if you need a tool to define / explain another single tool the tool that will be explained is bad designed or poorly described and this is the case here.
It’s like using a saw to create a wooden architecture to explain a nail.

With a diagram for the whole flexboxpart or css grid is nothing wrong.
When a diagram is needed to explain the smallest single part of a layout everything is wrong. Not with the diagram but with the single tool.

The fix here is easy. The element needs it’s own section together with the premade layouts that is also open for the later arriving grid layouts. That’s it. The name still needs improvement but hey nothing is perfect.

Here some diagrams / infographics you’ll maybe like for your Bricks future. Especially grid will be become important for you if you dive deeper in the rabbit hole of web construction.


3 Likes

Although I know where to find the premade layouts(click more then you will find it). I agree with the layout helper you suggested might help more users to find it easier.

1 Like

Thank you for your perspective, and the diagram.

I find the current implementation by Bricks of the Section, Container, Block, and Div elements clear and easy to use. Adding a “helper” submenu (an Oxygen term/approach?) appears cluttered. And hiding elements I would use regularly (Container and Block) is very poor UX. I disagree with your categorization of the current implementation as a “problem” to be “fixed”.

its a massive problem that we now see such elements like a block in bricks. especially since they were not requested anywhere. and we couldn’t even vote for and this block element showed up out of nowhere. my biggest concern is what elements are we going to see next. hopefully we will get some clarification about this soon, and see more real UX optimizations.

1 Like

My understanding is that the additional Block element did not appear out of nowhere, but was created in response to discussions about the previous Div element.

where did you see that? there was nothing. or did you only hear about? i am still searching and can’t find anything on their roadmap. not to mention that gutenberg also uses the word block, which is some kind of missleading. now we got two div elements with minimal differences.

There is a long thread in Facebook in response to the 1.5 rc post by Thomas. I agree that the name of the element (block) may cause confusion. However, I find the element itself very useful. There have been a number of suggestions for a new name: such as box or column.

yes maybe, but it was already released with 1.5rc - i dont see any discussion before. and sorry i am not on fb. thats why i use this forum and the roadmap to get my infos and upvotes.

Here is one fb post from Udoro ‘Cracka’ Essien which I found interesting:

A CASE FOR THE NEW BLOCK ELEMENT: FASTER WORKFLOW

After carefully considering the decision and testing it, I believe introducing the blocks element will speed up workflow.

When divs were introduced, they were 100% width by default, opinions were divided on whether to make it auto or 100%. We asked for the option to set the default in the Theme Settings. We could have gotten that option, but I personally saw I would sometimes need div of 100% width, and sometimes need a div with auto width. Of course I could always change the settings, but introducing blocks solves this issue.

Block elements are just ordinary divs, but the type of divs you would typically use for most layout e.g. cards, multi-column layout etc., due to the default 100% width

Divs elements are still ordinary divs, but the type you’ll typically want to wrap around an image, short text, icon etc., due to the default auto width, hence it’s defualt display is set to block, which is the correct default for divs.

The section and container element continues to work as intended, so no issues here.

I think it was a good decision, because block is just a name given to a 100% div element, so it doesn’t break any fundamental html rule, neither does it add bloats. It will make things easier for those who don’t have a strong grasp of CSS layout.

hmm i am very sorry nora, this still doesnt answer my question where it was discussed pre 1.5rc. but thanks for the post i didnt request.

the thing is, i see a roadmap with 3000 upvotes on some features. but i cant see anything about a request for an extra div element beside the existing div element. sure, there always will be some voices on facebook finding something usefull. but since i am not there and relied on this forum + bricks roadmap, i am very worried now what will happen next.

I took the time to share information I found helpful which you said you did not have access to. I am saddened by your response.

Somehow I have the feeling that you still have not looked at the picture. There is nothing hidden.
But hey lets agree that we disagree Nora. That is ok.

I’d like presets made easier to access but the thing with predefined layouts is how do you define whether the parent section is full width or a contained width? A full-width section will not be used all the time, contained width sections have to be available as well with presets. Also, you can have 1/3-2/3, 1/4-3/4, 1/5-4/5, 1/6-5/6 splits etc. as well as the regular 1, 1/2s, 1/3s, 1/4s, 1/5s and 1/6s. You would have an awful lot of elements in the ‘layout helper’ to represent these.

The Block element should be retained but renamed to Column as many other page builders have column elements making moving to Bricks easier. Beginners will understand what a Column is from the name but not a DIV. Also, having Column and DIV as separate elements is ultimate flexibility, allowing you to set different theme settings for each.

For me, I’d like to see at the top of the Elements panel a Sections group instead of Layout which would have ‘Full width section’ and ‘Contained width section’ elements named like this to make it obvious what each does. When added to the page they are both empty and a layout pop-up is displayed showing the available predefined column layouts which would include ‘None’ so you could manually add columns/divs, and then various column presets (most users will add columns rather than DIVs). If you had chosen a full width section, then the contained column would also be available in the pop-up. If you wanted to add DIVs rather than columns, this could be an easy toggle switch in the pop-up. The forthcoming CSS Grid could also be added here as a toggle and various presets displayed.

The Elements panel would also have a Section Layout group under the Section group which would have ‘Contained’, Column and DIV elements along with a Presets element so you could manually add these. Clicking Presets would open the pop-up described above (if there were already columns, whatever was chosen would replace them). Again, CSS Grid could be added as an element in the future.

So:
Sections
Section Layouts
Basic Content

Just a slightly alternative idea.

1 Like

Block element addresses those who need a div with preset styling since some want the DIV to be unstyled, so Block element is a good option for those who need it.

Hey Simon, thanks for your answer. :slight_smile: There are different options.
In oxy Ninja you see the difference between full- and pagewidth in the icon and yes there are some of them. In Oxy you’re not limited to two icons for row so that worked there better out.
Bildschirmfoto 2022-08-03 um 06.47.43

For Bricks that would end in a large vertical scrolling element that would maybe not perfect.
In view of the coming css grid (minus the buttons in oxyninja screen) that are definitly some elements.

Here I see three choices in the moment (and first view none of them is perfect). A second click option for the element (example: You click on 2cols 50/50, it twists and you have two choices: full or page width. That adds much complexity for the ui were I don’t know if Thomas wants this.

Second and maybe most flexible: Add a section optionin the element options (now content) that gives you the option to set the section to “full width, page width, custom”.
I think that sould work in any case but ends with “not final predefined elements”.

Third: Add the ready styled layouts to the menu. That ends as you already wrote in a vertically heavy scrolling element.

Personally I think that options add value to each other and the vertically scrolling - well, take a look to “general”. I think that’s maybe work out.

I like your idea to rename the Block into column. That’s a far more understandable and functional way and work for grid and flex.

Your other ideas sound interesting too. You’d just have to mock them up to see if they increase complexity too much or improve UX/UI.

@jornes if I understand him correct he don’t have a problem with “block” as element. Only with the naming and personally I like the “column” idea because it fits to everything. Maybe not ideal for using it for cards (from name) but it should work and it’s definitly more understandable than the non-speaking and non-functional name “block”.

I just noticed this article. This is how Thomas explained the block element.

Ah, been waiting for the write up on section/container/block and div, thanks for linking it @jornes.

I think as you can set which layout element is used to create columns in theme settings, this should hopefully satisfy everyone! Perhaps the term ‘block’ is causing an issue as Sebastian says, Wordpress has blocks but these are Bricks elements so could be confusing. Not sure how to rename it now that you can set which element is used to create columns, it certainly can’t be renamed column now!

Thomas’ write up says to click on the column layout action icon to see predefined layouts. I’m not a fan of these as I find them too small, other things can get in the way of them and there are no tooltips for new users to Bricks so it is not obvious. As Sebastian says, a better/alternative way to select presets is needed. Perhaps there should be a Columns tab in the Edit panel for the layout elements, so next to Content and Style and this could have plenty of layout options. It could also allow you to switch as Sebastian says from full-width to contained-width etc. and eventually to a css grid instead.

Just as an aside, did you know that once you have selected a preset, if you then choose another preset for the same section, the columns are appended to the previous ones rather than replacing them. I didn’t know it did this. One thing that I will raise a bug on, is that if you have a full-width section and delete its container, then display the preset column layouts, the first one says 100 but it inserts a contained column rather than a full-width column (which would be 100%). I think it needs a contained option adding to the pop-up.

3 Likes