Page Builder

Adobe Commerce and Magento 2.4.3+ allow merchants to author pages using Page Builder. Front-Commerce supports Page Builder managed content out-of-the-box.

In this section, you will learn how to use this feature and extend it. Create new content types and refine UI components so that merchants can create the rich shopping experiences that was designed for their customers.

Since version 2.11.0 (early preview)
Early preview: we’re currently looking for feedbacks about this feature. The core API is stable and ready for use in your storefronts. We’re improving default content types support. Please contact us if you’re using this feature.
Work In Progress: this documentation page will get more details in the next few days

Prerequisites

Page Builder is only available for content that:

• are displayed using the <WysiwygV2> component and its related WysiwygFragment GraphQL fragment
• get data from GraphQL fields resolved using the MagentoWysiwyg type (which is the case of all default Magento rich content fields)

Please check these prerequisites first if your content does not appear properly.

Concepts

Page Builder content types have 2 integration points:

• server side data conversion will parse Magento HTML response to extract rich structured data exposed in GraphQL
• client side React components will display the content using existing components, from data fetched from GraphQL

Supported content types

We currently support these content types in a basic way.

Additional data is exposed via the GraphQL for more more advanced Customized UI components implementations.

Layout

Magento Page Builder Layout

Work In Progress: We only have partial support for the row content type.
Here are the unsupported props:

• ✖ Mobile Image
• ✖ Fluid Width - requires a supported layout
• ✖ Full Bleed - requires a supported layout
• ✖ Video Background - data exposed with video
• ✖ Parallax Background - data exposed with parallax

Elements

Magento Page Builder Elements

Media

Magento Page Builder Media

Work In Progress: Support for internal product, page and category links for button-item and image

Upcoming

• Internal links.
• Native Magento widgets.

Let us know if you have specific needs.

Styles

Front-Commerce supports custom styles from the Advanced Magento settings of all content types:

Extend the Page Builder

You can extend existing Page Builder content types, or register new ones specific to your projects. To do so, there are 2 extension points: UI and GraphQL data resolution.

Customize UI components

Work In Progress: if you need details right now, please contact us. We will make sure to answer you in a timely manner.

• override theme/modules/WysiwygV2/MagentoWysiwyg/PageBuilder/_appComponents.scss to register your custom styles
• override theme/modules/WysiwygV2/MagentoWysiwyg/PageBuilder/appComponentsMap.js to register new components (or override existing ones)

Expose content types data in GraphQL

Documentation In Progress: if you need details right now, please contact us. We will make sure to answer you in a timely manner.

The PageBuilder loader allows you to register new content types.

First, you must define your content type. Content types must extend the ContentType class (see below). The name should match Magento’s content type identifier and the extractData method can be used to return structured data to be exposed as GraphQL fields for this type.

import ContentType from "server/modules/magento2/wysiwyg/loaders/content-types/ContentType";

export default class Foo extends ContentType {
  name = "foo";
  extractData(node) {
    return {
      // custom data. Can also be extracted from the passed `node` information
      bar: "baz",
    };
  }
}

Then you must register it from a contextEnhancer, using the PageBuilder.registerContentType method:

PageBuilder.registerContentType(
  new Foo(), // <-- the content type defined above
  "MyPageBuilderFooData" // <-- the GraphQL type for related data default to MagentoPageBuilderDefaultData (if no additional data)
);

If your content type exposes additional data with a specific GraphQL type (MyPageBuilderFooData in this current example), you will then have to update your resolvers. To do so, Front-Commerce provides a generic PageBuilderContentTypeResolver class that will expose data returned by the content type’s extractData.

# schema.gql
# Your custom page builder node data must implement
# both MagentoPageBuilderNodeData and WysiwygNodeData GraphQL interfaces
type MyPageBuilderFooData implements MagentoPageBuilderNodeData & WysiwygNodeData {
  dataId: ID
  appearance: String
  bar: String # <- custom structured data
}

// resolvers.js
import PageBuilderContentTypeResolver from "server/modules/magento2/wysiwyg/graphql/PageBuilderContentTypeResolver";

export default {
  MyPageBuilderFooData: new PageBuilderContentTypeResolver(),
};