Magento OS built-in Page Builder module

What is Magento Page Builder?

Page Builder is a Magento built-in module for creating and managing content featuring basic preview and drag & drop functionality based on ready-to-use content types: from simple text fields to product carousels. Using this extension you can build content-rich simple page layouts or reusable blocks for your Catalog or Product Detail pages.

Magento Page Builder benefits

Magento Page Builder requires no technical skill or knowledge about programming in CSS, HTML or JS to use default content types by store administrators. Still, it includes the possibility to provide pre-existing CSS classes or HTML markdown if needed.

Similarly to Storyblok this module enables nesting blocks and other elements but those possibilities are limited – some content types restrict what can be nested inside of them or where the element itself can be nested.

All these so-called content types – layout controls – are accessible via the left sidebar menu.

The preview is not a display of how it will be shown on the final page: there is a separate template system for preview and ‘master’ files – the ones used on the actual storefront. Also, the preview doesn’t use final styles or javascript snippets that can affect the rendering of the elements created using Page Builder on the final page. So the results may be pretty different from what is presented in the preview.

Basic customization of Magento Page Builder

There is already a Page Builder great tutorial from Adobe which will help you to start using Page Builder as the content manager. What we are trying to do is something a little bit harder: present how to extend default Page Builder features. We will present a common task required to customize a page builder: create a simple color picker for the built-in button content type.

Content types are the building blocks of Page Builder which rely heavily on uiComponents and Knockout and their configuration can be done via xml files. In this quick tutorial we will show you how to configure color picker, bind it with a button and its styles.

8 steps to create a color picker for Magento OS Page Builder

1. We need to build a module in app/code/PandaGroup/PageBuilderExtend.
   Now add the etc/module.xml file and register this module. Don’t forget to enable it using command bin/magento module:enable PandaGroup_PageBuilderExtend
2. First for making this work we need to create a configuration XML file. Create new folders as shown in this path PandaGroup/PageBuilderExtend/view/adminhtml/ui_component/pagebuilder/content_type and add file button_item.xml.
   Name of the configuration file should be the same as the created content type name prefixed by vendor name like vendor_contentType. In this case we are just enhancing the existing button content type so we are using the same name as we can find in the default Magento 2 Page Builder module. In
   In this file you will be able to define your content type and reference other files that control the appearance and behavior of your extended content type.
3. In this file we need to define:
   • Type element which specifies the key properties of our button. In this case as we are basically extending the existing button content type is sufficient to pass only the name which identifies the element.
   • Appearances which define one or more view types for displaying your content type. In this case we are using default appearance type as per built-in button item.
   • Elements mapping data from the content type’s form editor to content type’s master format so that the values entered in the form can be stored and rendered correctly on the admin panel view and storefront. In our case we need to define background color which will be applied for both types of our buttons: simple empty links and linked buttons. Those style nodes names will be particularly important for later steps where we will create corresponding fields.

   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
      <type name="button-item">
         <appearances>
            <appearance name="default">
               <elements>
                  <element name="link">
                     <style name="background_color" source="background_color"/>
                  </element>
                  <element name="empty_link">
                     <style name="background_color" source="background_color"/>
                  </element>
               </elements>
            </appearance>
         </appearances>
      </type>
   </config>

4. To make our changes visible we need to create di.xml file in PandaGroup/PageBuilderExtend/etc/adminhtml. Since we didn’t created entirely new field, but just re-used already existing Magento 2 field we can leave the configuration empty.
5. Now we need UI Component form so admin can use new functionality in button content type. You need to create file pagebuilder_button_item_form.xml in directory PandaGroup/PageBuilderExtend/view/adminhtml/ui_component
6. In this file first we need to define where we want our color picker to be displayed in the admin panel and how it should look like and behave. In the Page Builder button type admin panel editor you can see there are different sections such as content or advanced. If we want our new customization to be visible in the advanced section we need to define it inside the proper fieldset as shown below. We add here our field named background_color – as explained previously it should correspond to the name given in the config file.
   For creating it we will use an already existing form field type- colorPicker. Magento PB comes with many other predefined field types to be used such as simple input or selector.
   In settings section you can set the label name of your new feature, define componentType, validation or dataScope which corresponds with configuration and defines the data scope for this field. You can also set additionalClasses to be used on this field in the admin panel: here we define that we want this field to be medium length as per magento styles.
   We can also configure how we want the color picker itself to work. Here we decided to define this component’s color mode: full and color format: hex, but we could also change it’s template by providing path to our own file using option elementTmpl and change label.

   <?xml version="1.0" encoding="UTF-8"?>
   <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
      <fieldset name="advanced">
         <field name="background_color" sortOrder="30" formElement="colorPicker">
            <settings>
               <label translate="true">Background Color</label>
               <componentType>colorPicker</componentType>
               <placeholder translate="true">No Color</placeholder>
               <validation>
                  <rule name="validate-color" xsi:type="boolean">true</rule>
               </validation>
               <dataScope>background_color</dataScope>
               <additionalClasses>
                  <class name="admin__field-medium">true</class>
               </additionalClasses>
            </settings>
            <formElements>
               <colorPicker>
                  <settings>
                     <colorPickerMode>full</colorPickerMode>
                     <colorFormat>hex</colorFormat>
                  </settings>
               </colorPicker>
            </formElements>
         </field>
      </fieldset>
   </form>

7. Now you can test your new feature in button content type. Drag & drop button to the row and edit its background color:
   
8. Now you can check it on the storefront where you placed your button.

How does Magento Page Builder compare to Storyblok?

Page Builder Preview

Preview in the admin panel is pretty poor compared to Storyblok – it may significantly differ from the result on the real storefront page since Page Builder uses different templates and stylings to display content on the admin panel and storefront.

Usually developers are overriding Page Builder styles in custom theme without changing whole PB features via custom module. It’s faster but adds more complexity to styling and creates heavierCSS files.

Page Builder drag & drop feature

The drag & drop functionality is actually more intuitive than drag & drop in the Storyblok because you move elements through the actual editable space of your preview instead of moving elements inside a separate sidebar.

Content type development

Creating or enhancing content type is the hardest part of managing Page Builder. It can’t be done without help of an experienced Magento developer and usually takes a lot of work – adding a simple color picker for readily available components requires creating and configuring at least 5 files in separate module and for more complex tasks like adding custom hero banner developer needs to work with a complicated preview system.

For comparison in StoryBlok anyone from business clients to designers can easily create and manage new content types containing as many features as needed.

Magento Page Builder technical documentation

Over time Adobe managed to create a large guide for developing Page Builder content types but it still misses some elements in documentation like description of how some mixins like conditional disable are actually working. It requires additional work from the dev side to dig through source code to figure it out because in the code it also isn’t described well.

Page Builder vs third-party solution

The good news is that for simpler projects about Magento Page Builder , it’s now a part of the environment and to use its well developed built-in toolbox there is no additional configuration required. All hassle from the customizations of Page Builder makes this worth considering implementing a third-party solution.

More about Page Builder Story Blok for Magento OS please read in another article: Page Builder for Magento Open Source