What is PageBuilder?
PageBuilder is an Adobe extension to Magento 2 used for creating content by using drag and drop elements to build complex pages and blocks.
These drag and drop elements are called "Content Types", these content types are predefined bits of functionality that make it easier for non-technical users to create content without the need for code.
Below are some examples of content types which are available by default.
Why use PageBuilder?
Throughout my time as a Magento developer I have found that PageBuilder is often neglected and used incorrectly. A common thing I see when working on clients sites, are CMS pages and blocks that are full of raw HTML and CSS, or every row and content type are full of classes and styling is applied through the code base for really specific use cases.
However, I see this as both bad practice and a missed opportunity. The idea behind PageBuilder it to make simple and complex content easy to create for those who do not know how to write code.
The power of PageBuilder can be utilised across the whole site to create interesting pages and sections which can be edited and reconfigured at any point to suit the needs of the business.
How to work with PageBuilder
As a developer, It can be easy to fall into the trap of going the easy route for a one-time solution and use raw HTML and CSS within PageBuilder, however, you should take the opportunity to consider either extending content types or creating a custom content type.
Doing this will prevent bloat within the code base (less code that has a singular purpose, for example, changing the colour of a specific button on the homepage) and instead create inclusive reusable components.
So instead of adding a class to a button and adding CSS to the codebase to change that button to a specific colour, the better solution would be to extend the button content type to add in an option for admin users to change any button to any colour they wish.
I think it also incredibly important for the admin panel to reflect what will be displayed on the frontend of the site. It's very common for the admin panel to be a mess of spaghetti code, HTML and repurposed elements, this just leads to confusion and difficult to maintain and edit pages. Admin users should be able to create pages and know what it would look like on the frontend.
Extending content types:
Extending content types is done by taking the default content types typically provided as part of Magento 2 and extending the functionality. This can be anything from minor changes, such as adding additional input fields, or enabling colour selectors to creating whole new appearances to change layouts of the content types or add additional functionality to meet the needs of a specific site.
An example would be creating a new appearance to the banner content type to add a new layout, currently it has the options poster, left aligned, right aligned and centred, but we could add an option for a split 50 50 banner.
Custom content types:
Custom content types can be created to add new functionality to PageBuilder that achieves a specific purpose.
Adobe provide us with an example of a custom content type which can be seen here https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/
This content type allows users to create a quote section and has several input fields which facilitate this. Having this content type available as a reusable drag and drop component means that internal teams can easily create testimonial sections where ever they need without additional support from developers.