Skip to content

Commit 39cf484

Browse files
bdenhambdenham
authored
Merge pull request #12 from magento-devdocs/MAGEDOC-3483
MAGEDOC-3483: Fix Quote content type
2 parents 9f70016 + 96e9a34 commit 39cf484

File tree

4 files changed

+77
-15
lines changed

4 files changed

+77
-15
lines changed

‎docs/create-basic-content-type/step-4-add-form.md

+76-8
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,53 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
102102
</settings>
103103
</dataProvider>
104104
</dataSource>
105+
<fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
106+
<settings>
107+
<label translate="true">Appearance</label>
108+
<additionalClasses>
109+
<class name="admin__fieldset-visual-select-large">true</class>
110+
</additionalClasses>
111+
<collapsible>false</collapsible>
112+
<opened>true</opened>
113+
<imports>
114+
<link name="hideFieldset">${$.name}.appearance:options</link>
115+
<link name="hideLabel">${$.name}.appearance:options</link>
116+
</imports>
117+
</settings>
118+
<field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
119+
<argument name="data" xsi:type="array">
120+
<item name="config" xsi:type="array">
121+
<item name="default" xsi:type="string">default</item>
122+
</item>
123+
</argument>
124+
<settings>
125+
<additionalClasses>
126+
<class name="admin__field-wide">true</class>
127+
<class name="admin__field-visual-select-container">true</class>
128+
</additionalClasses>
129+
<dataType>text</dataType>
130+
<validation>
131+
<rule name="required-entry" xsi:type="boolean">true</rule>
132+
</validation>
133+
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
134+
</settings>
135+
<formElements>
136+
<select>
137+
<settings>
138+
<options class="AppearanceSourceQuote"/>
139+
</settings>
140+
</select>
141+
</formElements>
142+
</field>
143+
</fieldset>
105144
<fieldset name="general" sortOrder="20">
106145
<settings>
107146
<label/>
108147
</settings>
109148
<field name="quote_text" sortOrder="10" formElement="textarea">
110149
<argument name="data" xsi:type="array">
111150
<item name="config" xsi:type="array">
112-
<item name="source" xsi:type="string">page</item>
151+
<item name="source" xsi:type="string">page</item>
113152
</item>
114153
</argument>
115154
<settings>
@@ -121,7 +160,7 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
121160
<field name="quote_author" sortOrder="20" formElement="input">
122161
<argument name="data" xsi:type="array">
123162
<item name="config" xsi:type="array">
124-
<item name="source" xsi:type="string">page</item>
163+
<item name="source" xsi:type="string">page</item>
125164
</item>
126165
</argument>
127166
<settings>
@@ -144,20 +183,49 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
144183
</field>
145184
<field name="quote_css" sortOrder="40" formElement="input">
146185
<argument name="data" xsi:type="array">
147-
<item name="config" xsi:type="array">
148-
<item name="source" xsi:type="string">page</item>
149-
</item>
186+
<item name="config" xsi:type="array">
187+
<item name="source" xsi:type="string">page</item>
188+
</item>
150189
</argument>
151190
<settings>
152-
<dataScope>quote_css</dataScope>
153-
<dataType>text</dataType>
154-
<label translate="true">CSS for Quote</label>
191+
<dataScope>quote_css</dataScope>
192+
<dataType>text</dataType>
193+
<label translate="true">CSS for Quote</label>
155194
</settings>
156195
</field>
157196
</fieldset>
158197
</form>
159198
```
160199

200+
### appearance fieldset and field
201+
202+
Page Builder requires you to add the `appearance_fieldset` along with its `appearance` field for all your content type forms. Even though our Quote content type doesn’t have any additional appearances, the field is still required/expected so that other modules can add appearances to your content type as needed.
203+
204+
To ensure your appearance field renders, create a `di.xml` file located here:
205+
206+
![Create config file](../images/step4-field-appearance-class.png)
207+
208+
Then add the source implementation as referenced in the `appearance` field (`<options class="AppearanceSourceQuote"/>`) as shown here:
209+
210+
```xml
211+
<?xml version="1.0"?>
212+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
213+
<virtualType name="AppearanceSourceQuote" type="Magento\PageBuilder\Model\Source\VisualSelect">
214+
<arguments>
215+
<argument name="optionsSize" xsi:type="string">large</argument>
216+
<argument name="optionsData" xsi:type="array">
217+
<item name="0" xsi:type="array">
218+
<item name="value" xsi:type="string">default</item>
219+
<item name="title" xsi:type="string" translate="true">Default</item>
220+
</item>
221+
</argument>
222+
</arguments>
223+
</virtualType>
224+
</config>
225+
```
226+
227+
Again, even though our Quote control doesn't currently define an appearance, we must implement all the parts so that other modules can expect each Page Builder content type to have an appearance defined, even if it is not used.
228+
161229
### fieldset
162230

163231
Page Builder requires fields to be grouped within named `<fieldset>` elements. Fieldsets provide your fields with a basic grouping mechanism and an optional label. You can define as many fieldsets as you want.

‎docs/create-basic-content-type/step-5-add-styles.md

+1-7
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,8 @@ If you break your styles into multiple LESS files, make sure you `@import` each
7171
The following sample shows the `class` styles used for our Quote content type:
7272

7373
```css
74-
// Content type's base styling
74+
// Content type base styling
7575
blockquote {
76-
.quote-content {
7776
display: block;
7877
font-size: 1.2em;
7978
margin: 1em;
@@ -99,7 +98,6 @@ blockquote {
9998
line-height: 0;
10099
margin-left: 0;
101100
}
102-
}
103101
}
104102
div {
105103
&.quote-author {
@@ -269,7 +267,6 @@ The `_import.less` file content for the Admin preview template:
269267
```css
270268
// Content type's base styling
271269
blockquote {
272-
.quote-content {
273270
display: block;
274271
font-size: 1.2em;
275272
margin: 1em;
@@ -295,7 +292,6 @@ blockquote {
295292
line-height: 0;
296293
margin-left: 0;
297294
}
298-
}
299295
}
300296
div {
301297
&.quote-author {
@@ -330,7 +326,6 @@ The `_import.less` file content for the master format storefront template:
330326
```css
331327
// Content type's base styling
332328
blockquote {
333-
&.quote-text {
334329
display: block;
335330
font-size: 1.2em;
336331
margin: 1em;
@@ -356,7 +351,6 @@ blockquote {
356351
line-height: 0;
357352
margin-left: 0;
358353
}
359-
}
360354
}
361355

362356
div {

‎docs/images/content-type-files.png

3.71 KB
Loading

‎docs/images/step4-field-appearance-class.png

16.7 KB
Loading

0 commit comments

Comments
 (0)