Ultimate Gutenberg Blocks’s very first example, the Post Grid block above. shows that Brainstorm has used some of its best PageBuilder features and stylings. Within seconds of adding the Posts Grid block, the default feature settings displays a very functional list of posts [you can chose pages] ready to use. – you are good to go.
However there are ample features for the grid layout -fixed or masonry, number of columns in the grid, number of posts in the list, choice of taxonomy or category filter, order-by choices, Finally user can select the pagination count for the list – so if the total number of posts to be displayed is greater than the posts/list, then added lists can be diisplayed as shown above.
The Post Grid styling is very rich. It starts with a choice to use/inherit the theme styles. Next, featured images can be selected followed by 6 content descriptors like title and postdate. Users can choose excerpt or full posts text. Next there is a full set of color and typography choices topped off with Read More Link and margin/padding settings. In sum, the Post Grid block is proof that full PageBuilder-like styling can be done in Gutenberg.
We used Brainstorm’s Section block to compare it with GetWid’s capable Section block. The two have a number of match styling options including boxed vs full width layout; choice of color, gradient, image, and video. But GetWid also offers a slider background and sophisticated overlay effects. Both Section blocks offer margins and padding but GetWid steps aheadwith full animation options and divider choices.
The next combo of blocks will test the Testimonial with a Gallery Map
The second part of the Brainstorm Add-on test used a common example – a two column layout of Testimonial block paired with a Google Map. The Testimonial Block sports a nifty Carousel option which we took advantage of. But the Testimonial block stumbled in its editing mechanics as it was clumsy in trying to change Testimonial text fields[ in the Testimonial – only the dots control [not the arrows] would advance to the next testimonial for editing. And as you can see above in the live view we could not get the arrows to fit in their container boxes. The Google Map block had a workable but very simple set of options in comparison to other Gutenberg blocks or PageBuilder components.
But this example showed the very serious WYSIWYG problem that plagues the Gutenberg editor. Below is the live editor view:
Note how the live edit view spills over into lower paragraph block and does not give a true view of how the block will look on the page .This is the Gutenberg editor’s WYSIWYG flaw.
This last Brainstorm Add-on test will see how well the WYIWYG Page view can handle large tables. First try a Ninja Table:
|Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header||Large Column Header|
The Brainstorm Add-on copes with an extra-wide table with the a simple horizontal scroll bar solution. Elegant. But in general, Brainstorm Add-on blocks are constrained by what Gutenberg provides – and that is fundamentally flawed in Drag and Drop operations, WYSIWYG fidelity and the breadth of styling options available for each block – much less than what is available from PageBuilder components. But the GTMetrix speed scre is pretty good: