Merge pull request #12 from magento-devdocs/MAGEDOC-3483

MAGEDOC-3483: Fix Quote content type

Author: bdenham

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

@@ -102,14 +102,53 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
             </settings>
         </dataProvider>
     </dataSource>
+    <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
+        <settings>
+            <label translate="true">Appearance</label>
+            <additionalClasses>
+                <class name="admin__fieldset-visual-select-large">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 name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
+            <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__field-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>
+            <formElements>
+                <select>
+                    <settings>
+                        <options class="AppearanceSourceQuote"/>
+                    </settings>
+                </select>
+            </formElements>
+        </field>
+    </fieldset>
     <fieldset name="general" sortOrder="20">
         <settings>
             <label/>
         </settings>
         <field name="quote_text" sortOrder="10" formElement="textarea">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                  <item name="source" xsi:type="string">page</item>
+                    <item name="source" xsi:type="string">page</item>
                 </item>
             </argument>
             <settings>
@@ -121,7 +160,7 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
         <field name="quote_author" sortOrder="20" formElement="input">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                  <item name="source" xsi:type="string">page</item>
+                    <item name="source" xsi:type="string">page</item>
                 </item>
             </argument>
             <settings>
@@ -144,20 +183,49 @@ The Quote form is shown in full here for you to copy into your `pagebuilder_exam
         </field>
         <field name="quote_css" sortOrder="40" formElement="input">
             <argument name="data" xsi:type="array">
-            <item name="config" xsi:type="array">
-              <item name="source" xsi:type="string">page</item>
-            </item>
+                <item name="config" xsi:type="array">
+                    <item name="source" xsi:type="string">page</item>
+                </item>
             </argument>
             <settings>
-            <dataScope>quote_css</dataScope>
-            <dataType>text</dataType>
-            <label translate="true">CSS for Quote</label>
+                <dataScope>quote_css</dataScope>
+                <dataType>text</dataType>
+                <label translate="true">CSS for Quote</label>
             </settings>
         </field>
     </fieldset>
 </form>
 ```
 
+### appearance fieldset and field
+
+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.
+
+To ensure your appearance field renders, create a `di.xml` file located here:
+
+![Create config file](../images/step4-field-appearance-class.png)
+
+ Then add the source implementation as referenced in the `appearance` field (`<options class="AppearanceSourceQuote"/>`) as shown here:
+
+```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="AppearanceSourceQuote" 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" xsi:type="string" translate="true">Default</item>
+                </item>
+            </argument>
+        </arguments>
+    </virtualType>
+</config>
+```
+
+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. 
+
 ### fieldset
 
 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

@@ -71,9 +71,8 @@ If you break your styles into multiple LESS files, make sure you `@import` each
 The following sample shows the `class` styles used for our Quote content type:
 
 ```css
-// Content type's base styling
+// Content type base styling
 blockquote {
-  .quote-content {
     display: block;
     font-size: 1.2em;
     margin: 1em;
@@ -99,7 +98,6 @@ blockquote {
       line-height: 0;
       margin-left: 0;
     }
-  }
 }
 div {
   &.quote-author {
@@ -269,7 +267,6 @@ The `_import.less` file content for the Admin preview template:
 ```css
 // Content type's base styling
 blockquote {
-  .quote-content {
     display: block;
     font-size: 1.2em;
     margin: 1em;
@@ -295,7 +292,6 @@ blockquote {
       line-height: 0;
       margin-left: 0;
     }
-  }
 }
 div {
   &.quote-author {
@@ -330,7 +326,6 @@ The `_import.less` file content for the master format storefront template:
 ```css
 // Content type's base styling
 blockquote {
-  &.quote-text {
     display: block;
     font-size: 1.2em;
     margin: 1em;
@@ -356,7 +351,6 @@ blockquote {
       line-height: 0;
       margin-left: 0;
     }
-  }
 }
 
 div {