Skip to content

Commit 61c66b1

Browse files
anthoulaanthoula
committed
MC-2363: Add vertical alignment and min height to row configuration
- add documentation on reusing vertical alignment visual select for different content type
1 parent 14e124f commit 61c66b1

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed

‎app/code/Magento/PageBuilder/docs/visual-select.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ All image formats are supported for icons, though we suggest using an SVG format
5454
To add Visual Select customization to a Page Builder content block:
5555
1. [Override the select component with an element template](#element-template)
5656
2. [Add Visual Select to the XML config](#xml-config)
57+
3. [How to reuse vertical alignment between different content types](#vertical-alignment)
5758

5859
## Override the select component with an element template {#element-template}
5960

@@ -116,3 +117,121 @@ Use a virtual type of `Magento\PageBuilder\Model\Source\VisualSelect` in your mo
116117
</arguments>
117118
</virtualType>
118119
```
120+
121+
## How to reuse vertical alignment between different content types {#vertical-alignment}
122+
To apply vertical alignment to a content type using the Visual Select component, use the virtualType `Magento\PageBuilder\Model\Source\VerticalAlignment` with options in yourmodule's `di.xml` configuration file.
123+
124+
```xml
125+
<virtualType name="Magento\PageBuilder\Model\Source\VerticalAlignment" type="Magento\PageBuilder\Model\Source\VisualSelect">
126+
<arguments>
127+
<argument name="optionsSize" xsi:type="string">small</argument>
128+
<argument name="optionsData" xsi:type="array">
129+
<item name="0" xsi:type="array">
130+
<item name="value" xsi:type="string">flex-start</item>
131+
<item name="title" xsi:type="string" translate="true">Top</item>
132+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/top.svg</item>
133+
</item>
134+
<item name="1" xsi:type="array">
135+
<item name="value" xsi:type="string">center</item>
136+
<item name="title" xsi:type="string" translate="true">Center</item>
137+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/center.svg</item>
138+
</item>
139+
<item name="2" xsi:type="array">
140+
<item name="value" xsi:type="string">flex-end</item>
141+
<item name="title" xsi:type="string" translate="true">Bottom</item>
142+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/bottom.svg</item>
143+
</item>
144+
</argument>
145+
</arguments>
146+
</virtualType>
147+
```
148+
### Add the Visual Select option in your module's form configuration file.
149+
```xml
150+
<field name="justify_content" sortOrder="20" formElement="select">
151+
<argument name="data" xsi:type="array">
152+
<item name="config" xsi:type="array">
153+
<item name="default" xsi:type="string">flex-start</item>
154+
</item>
155+
</argument>
156+
<settings>
157+
<dataType>text</dataType>
158+
<label translate="true">Vertical Alignment</label>
159+
<notice translate="true">Vertical alignment controls how the child blocks of this container will be positioned. Set minimum height in order to use vertical alignment.</notice>
160+
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
161+
</settings>
162+
<formElements>
163+
<select>
164+
<settings>
165+
<options class="Magento\PageBuilder\Model\Source\VerticalAlignment"/>
166+
</settings>
167+
</select>
168+
</formElements>
169+
</field>
170+
```
171+
### Configure the content type with the vertical alignment style properties. This example is from Row.
172+
```html
173+
<elements>
174+
<element name="main" path=".">
175+
<style_properties>
176+
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
177+
<property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
178+
<property name="background_position" source="background_position"/>
179+
<property name="background_size" source="background_size"/>
180+
<property name="background_repeat" source="background_repeat"/>
181+
<property name="background_attachment" source="background_attachment"/>
182+
<property name="text_align" source="text_align"/>
183+
<property name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
184+
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
185+
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
186+
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
187+
<property name="justify_content" source="justify_content" persist="false"/>
188+
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
189+
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
190+
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
191+
</style_properties>
192+
<attributes>
193+
<attribute name="name" source="data-role"/>
194+
<attribute name="appearance" source="data-appearance"/>
195+
<attribute name="enable_parallax" source="data-enable-parallax"/>
196+
<attribute name="parallax_speed" source="data-parallax-speed"/>
197+
<attribute name="background_color_format" source="data-background-color-format" virtual="true"/>
198+
</attributes>
199+
<css name="css_classes"/>
200+
</element>
201+
<element name="container">
202+
<style_properties>
203+
<property name="justify_content" source="justify_content"/>
204+
<static_property source="display" value="flex"/>
205+
<static_property source="flex_direction" value="column"/>
206+
</style_properties>
207+
</element>
208+
</elements>
209+
```
210+
### Specify which elements in the preview and master templates should receive the style properties.
211+
212+
Example master template:
213+
```html
214+
<div attr="data.main.attributes"
215+
ko-style="Object.assign(data.container.style(), data.main.style())"
216+
css="data.main.css">
217+
<render args="renderChildTemplate"/>
218+
</div>
219+
```
220+
221+
Example preview template:
222+
```html
223+
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height" data-bind="attr: data.main.attributes, style: data.main.style, css: Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1}), event: {mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false, afterRender: function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
224+
<render args="getOptions().template"></render>
225+
<div class="element-children content-type-container" each="parent.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
226+
<if args="$parent.isContainer()">
227+
<div class="pagebuilder-drop-indicator"></div>
228+
</if>
229+
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
230+
<if args="$parent.isContainer() && $index() === $parent.parent.getChildren()().length - 1">
231+
<div class="pagebuilder-drop-indicator"></div>
232+
</if>
233+
</div>
234+
<div class="pagebuilder-display-label" data-bind="text: function () { return displayLabel().toUpperCase(); }()"></div>
235+
<div class="pagebuilder-empty-container empty-placeholder" data-bind="css: {visible: parent.children().length == 0}, i18n: 'Drag content types or columns here'"></div>
236+
</div>
237+
```

0 commit comments

Comments
 (0)