Ultimate Gutenberg Blocks

As always the evaluation of Gutenberg Blocks will consider 4 key criteria

  1. delivery of WYSIWYG display view from within the editor so designers see the complete  emerging page/post;
  2. ease of understanding editing mechanics; tendency to not get lost;
  3. accessibility of styling, animation and special effect for each Gutenberg block;
  4. novel edit features which save time for designers.

Ultimate Gutenberg Blocks is a Brainstorm Force product that gets top ratings for its Beaver Builder and Elementor Ultimate addon plugins. Do the feature and styling options for the PageBuilder add-ons carry over to the Ultimate Gutenberg Blocks

WordPress Editors Innovation

With the arrival of Gutenberg and rapid change in drag and drop PageBuilder capabilities, the humble WordPress Visual Editor is getting lots of attention and …
Read More
1 2 3

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:

tabtable.csv

Large Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column HeaderLarge Column Header
12345678910111213141516
666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666

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.

Leave a Comment

Your email address will not be published. Required fields are marked *