Please note that the Page Builder docs are still in beta. Only partners have access to the pre-release code.

How to add a block chooser

This topic describes how to use the block chooser UI component for a custom content type.

Configuration options

Extends all abstract configuration.

Magento_PageBuilder/js/form/element/block-chooser configuration options:

Option Type Description
dataUrlConfigPath String The path inside the Page Builder configuration object that points to the controller URL used to request data for display in the grid. </br>For example, if you use the additional_data configuration feature and add the URL, you could specify content_types.mycontenttype.additional_data.my_cusom_property.my_data_url.
requestParameter String The parameter name under which the selected entity ID will be sent when the component retrieves the metadata from the controller (which is specified by dataUrlConfigPath). </br>The default template is expecting the associated controller to return (at minimum) title and is_active. You can override the component template with the template attribute for the component element, and display desired data using a custom controller.
modalName String The UI registry key to the UI component that is representing the modal containing the pagebuild_block_select_grid listing. </br>For example, if you include the modal element with the name modal in the root of your content type form, you could set it to ns = ${ $.ns }, index = modal.
buttonTitle String The text displayed on the button used to open the block selection modal.
displayMetadata Boolean Denotes whether to display the information grid describing the block in more detail; true by default.

Add the block select grid listing modal to content type XML

To add the block select grid listing modal, pagebuilder_block_select_grid, to the XML file for a content type, Magento_PageBuilder/view/base/pagebuilder/content_type/<your-content-type>.xml:

<modal name="modal" sortOrder="30">
            <option name="title" xsi:type="string" translate="true">Select Block...</option>
            <option name="buttons" xsi:type="array">
                <item name="0" xsi:type="array">
                    <item name="text" xsi:type="string" translate="true">Cancel</item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="string">closeModal</item>
                <item name="1" xsi:type="array">
                    <item name="text" xsi:type="string">Add Selected</item>
                    <item name="class" xsi:type="string">action-primary</item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.name }.pagebuilder_block_select_grid</item>
                            <item name="actionName" xsi:type="string">save</item>
                        <item name="1" xsi:type="string">closeModal</item>
    <insertListing name="pagebuilder_block_select_grid" sortOrder="10">
            <externalProvider>${ $.ns }.pagebuilder_block_select_grid_data_source</externalProvider>
            <selectionsProvider>${ $.ns }.${ $.ns }.columns.ids</selectionsProvider>

If desired, modify the title option to fit your situation.

Add component to content type XML

To insert the block chooser UI component, Magento_PageBuilder/js/form/element/block-chooser, into the XML file for a content type, Magento_PageBuilder/view/base/pagebuilder/content_type/<your-content-type>.xml:

<component component="Magento_PageBuilder/js/form/element/block-chooser" name="block_chooser" sortOrder="10">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="requestParameter" xsi:type="string">block_id</item>
            <item name="dataUrlConfigPath" xsi:type="string">content_types.block.additional_data.chooserConfig.dataUrl</item>
            <item name="modalName" xsi:type="string">ns = ${ $.ns }, index = modal</item>
            <item name="buttonTitle" xsi:type="string" translate="true">Select Block...</item>
            <!-- This references the value of the block_id field below -->
            <link name="id">${ $.ns }.${ $.ns }.general.block_id:value</link>
<field name="block_id" formElement="hidden" sortOrder="20">
            <link name="value">${ $.ns }.${ $.ns }.modal.pagebuilder_block_select_grid:externalValue</link>

The block_id field pulls in the selected value from the modal.

Then the block_chooser component pulls in the value from the block_id field to ascertain when it should commence updating.