Magento Commerce: A First Look at Page Builder

April 11, 2019 - Reading time: 3 minutes

Magento added a great feature to their Commerce platform with the 2.3.1 update called Page Builder. This feature comes as a result of Magento's acquisition of BlueFoot's Page Builder, supercharging the CMS editor and allowing a drag and drop interface so anyone can easily build CMS content. This includes CMS pages, CMS blocks, Category descriptions, and more.

So, how does it work as compared to TinyMCE?

First things first - TinyMCE is still present and remains unchanged in function. It is now used to edit anything not directly editable by Page Builder, and occasionally within Page Builders to allow for WYSIWYG functionality for individual Page Builder elements.

How about a visual?

The video example below demonstrates creating a two-column sectioned layout. The base column count is twelve (12) within the editor, so making a main content area (left) larger than the sidebar content area (right) is executed with a 'click and drag' action. Adding additional content, more nested tabs, tabbed menus are all super easy and quick.

Of course there are caveats.

Odds are, any company using Page Builder (and thus using Commerce) will be very particular about styling oddities given those companies are generally sizable. Given the one-size-fits-all nature of Page Builder, frontend designers will need to ensure any styling customization takes into account desktop and responsive views. Most Page Builder features can be edited (the gear icon) where you can add custom classes to extend or override inherent page builder styling, however as with any other WYSIWYG it could become a game of 'guess the feature combination the client wants to use' in predicting styling issues.

In the 2.3.1 release, Page Builder is fairly rigid in how it works with tabs and sliders, exhibiting random tab wrapping and inconsistencies between the constructed visual in the WYSIWYG and the frontend. See the example below where we set up a 10/12 and 2/12 column layout, adding a three-tab tabular frame within the 10/12 section.

Review the above layout against how it appears on the frontend with a theme based on `Magento/blank` with no additional structural styling beyond font family declarations.

As you can see, the tabular section is not at 100% width as compared to to the WYSIWYG editor, which will require some style editing to correct. A small issue easily corrected by a frontend developer, however inconsistencies in display could cause more work than it should. Page Builder is designed to allow anyone to create content and it needs to work predictably as it does in the WYSIWYG to be effective.

Additionally, editing existing Page Builder layouts where elements are nested over each other becomes very frustrating when each element in the WYSIWYG has its own edit bar.

Conclusion

Page Builder is here! Magento has taken a solid set of steps to get away from core dependence on TinyMCE for casual content creators. The tool is very easy to use but difficult to get right, which puts in firmly in the same camp as similar editors for other content creation platforms. 

I am looking forward to improvements as we approach Magento Commerce version 2.4.0.

~ K.E.G