Pagebuildercontenttype

Page Builder comes with several content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a Quote control, which you can use to show customer testimonials or other types of quotations within your storefront.

https://devdocs.magento.com/page-builder/docs/create-custom-content-type/overview.html

Use the snippet in the Magento 2 module creator.

Files

view/adminhtml/ui_component/pagebuilder_mage2gen_test_form.xml

<?xml version="1.0" ?>
<form extends="pagebuilder_base_form" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
	<argument name="data" xsi:type="array">
		<item name="js_config" xsi:type="array">
			<item name="provider" xsi:type="string">pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source</item>
		</item>
		<item name="label" translate="true" xsi:type="string">Test</item>
	</argument>
	<settings>
		<namespace>pagebuilder_mage2gen_test_form</namespace>
		<deps>
			<dep>pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source</dep>
		</deps>
	</settings>
	<dataSource name="pagebuilder_mage2gen_test_form_data_source">
		<argument name="data" xsi:type="array">
			<item name="js_config" xsi:type="array">
				<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
			</item>
		</argument>
		<dataProvider class="Magento\PageBuilder\Model\ContentType\DataProvider" name="pagebuilder_mage2gen_test_form_data_source">
			<settings>
				<requestFieldName/>
				<primaryFieldName/>
			</settings>
		</dataProvider>
	</dataSource>
	<fieldset component="Magento_PageBuilder/js/form/element/dependent-fieldset" name="appearance_fieldset" sortOrder="10">
		<settings>
			<label>Appearance</label>
			<additionalClasses>
				<class name="admin__fieldset">true</class>
			</additionalClasses>
			<collapsible>false</collapsible>
			<opened>true</opened>
			<imports>
				<link name="hideFieldset">${$.name}.appearance:options</link>
				<link name="hideLabel">${$.name}.appearance:options</link>
			</imports>
		</settings>
		<field component="Magento_PageBuilder/js/form/element/dependent-visual-select" formElement="select" name="appearance" sortOrder="10">
			<argument name="data" xsi:type="array">
				<item name="config" xsi:type="array">
					<item name="default" xsi:type="string">default</item>
				</item>
			</argument>
			<settings>
				<additionalClasses>
					<class name="admin__fieldset-wide">true</class>
					<class name="admin__field-visual-select-container">true</class>
				</additionalClasses>
				<dataType>text</dataType>
				<validation>
					<rule name="required-entry" xsi:type="boolean">true</rule>
				</validation>
				<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
			</settings>
		</field>
		<formElements>
			<select>
				<settings>
					<options>AppearanceSourceTest</options>
				</settings>
			</select>
		</formElements>
		<fieldset name="general" sortOrder="20">
			<settings>
				<label>General</label>
			</settings>
			<field formElement="input" name="Test" sortOrder="0">
				<argument name="data" xsi:type="array">
					<item name="config" xsi:type="array">
						<item name="source" xsi:type="string">page</item>
					</item>
				</argument>
				<settings>
					<dataScope>Test</dataScope>
					<dataType>text</dataType>
					<label translate="false">Test</label>
				</settings>
			</field>
		</fieldset>
	</fieldset>
</form>

view/adminhtml/web/template/content-type/test/default/master.html

<!--master.html-->
<div attr="data.main.attributes"
     ko-style="data.main.style"
     css="data.main.css"
     data-mage-init='{"accordion":{
        "openedState": "active",
        "collapsible": true,
        "active": false,
        "multipleCollapsible": true
    }}'
>
    <div class="test-content" data-role="collapsible">
        <h3 attr="data.Test.attributes"
            data-role="trigger"
            html="data.Test.html"></h3>
    </div>
</div>

view/adminhtml/web/template/content-type/test/default/preview.html

<!-- preview.html -->
<div attr="data.main.attributes"
     ko-style="data.main.style"
     css="data.main.css"
     event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
>
    <render args="getOptions().template" />
    <div class="test-content">
        <div attr="data.Test.attributes"
             data-bind="liveEdit: { field: 'Test', placeholder: $t('Test') }">
        </div>
    </div>
</div>

view/adminhtml/pagebuilder/content_type/mage2gen_test.xml

<?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 components="Magento_PageBuilder/js/content-type" form="pagebuilder_mage2gen_test_form" icon="icon-pagebuilder-image" label="test" master_component="Magento_PageBuilder/js/content-type/master" menu_section="elements" name="mage2gen_test" preview_component="Magento_PageBuilder/js/content-type/preview" sortOrder="22" translate="label">
		<children default_policy="deny"/>
		<appearances>
			<appearance default="default" master_template="Mage2Gen_Module/content-type/test/default/master" name="default" preview_template="Mage2Gen_Module/content-type/test/default/preview" reader="Magento_PageBuilder/js/master-format/read/configurable">
				pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source
				<elements>
					<element name="main">
						<style name="text_align" source="text_align"/>
						<attribute name="name" source="data-content-type"/>
						<attribute name="appearance" source="data-appearance"/>
						<css name="css_classes"/>
					</element>
				</elements>
				<element name="test">
					<html converter="Magento_PageBuilder/js/converter/html/tag-escaper" name="test"/>
				</element>
			</appearance>
		</appearances>
	</type>
</config>

view/adminhtml/layout/pagebuilder_mage2gen_test_form.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<update handle="styles"/>
	<body>
		<referenceContainer name="content">
			<uiComponent name="pagebuilder_mage2gen_test_form"/>
		</referenceContainer>
	</body>
</page>

etc/adminhtml/di.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<virtualType name="AppearanceSourceTest" type="Magento\PageBuilder\Model\Source\VisualSelect"/>
	<arguments>
		<argument name="optionsSize" xsi:type="string">large</argument>
		<argument name="optionsData" xsi:type="array">
			<item name="0" xsi:type="array">
				<item name="value" xsi:type="string">default</item>
				<item name="title" translate="true" xsi:type="string">Default</item>
			</item>
		</argument>
	</arguments>
</config>