AdobeDocs / AdobeDocs/commerce-frontend-core
Page builder custom type creation
- Dominant language
- JavaScript
- Stars
- 10
- Forks
- 87
- PR merge metrics
- No merged PRs in 30d
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Which topic?
https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/configurations/
### What's wrong with the content?
The documentation is giving headlines on how to configure the content type component.
```
<attribute name="name" source="data-content-type"/>
<attribute name="appearance" source="data-appearance"/>
<css name="css_classes"/>
</element>
<element name="link">
<style name="text_align" source="text_align"/>
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
<attribute name="button_link" reader="Magento_PageBuilder/js/property/link" persistence_mode="read"/>
<attribute name="virtual_link_href" storage_key="button_link" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
<attribute name="virtual_link_target" storage_key="button_link" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
<attribute name="virtual_link_type" storage_key="button_link" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
<css name="button_type"/>
</element>
<element name="empty_link">
<style name="text_align" source="text_align"/>
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
<css name="button_type"/>
</element>
<element name="link_text">
<html name="button_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
</element>
</elements>
```
### What changes do you propose?
I would suggest to add the matching ui component form configuration so as the master and preview html matching the documentation example, because in the current state the example remains incomplete.
Overall, considering the whole process of creating a new content type :
The documentation is pretty complete to create simple text elements as describe in the whole section : https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/
But overall it lacks of clarity when it come to extend more complex component like how to render a simple link or image.
### Anything else that can help to cover this?
_No response_
Contributor guide
Research direction
Start with the Page Builder architecture/configurations topic and the content-types/create section, then compare the documented elements XML with the corresponding master and preview HTML described in the issue. Done means the example includes the matching UI component form configuration and gives clearer guidance for rendering more complex link and image content types.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100