I have a custom widget with various parameters. Is it possible to style or add grouping, headings, fieldsets, basically anything to give some space and separation to the numerous parameters?
My widget.xml looks like this:
<?xml version="1.0" encoding="UTF-8"?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget id="MyNamespace_about_us_page" class="MyNamespace\CMS\Block\Widget\AboutPage"> <label translate="true">MyNamespace About Us Page</label> <description translate="true">Widget for customizing the About page</description> <parameters> <parameter name="top_image" xsi:type="block" visible="true" sort_order="10"> <label translate="true">Top Image</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <!--##### GROUP 1--> <parameter name="group_1_header" xsi:type="text" visible="true" sort_order="21"> <label translate="true">Group 1 Header</label> </parameter> <parameter name="group_1_japanese_header" xsi:type="text" visible="true" sort_order="22"> <label translate="true">Group 1 Subheader</label> </parameter> <parameter name="group_1_body" xsi:type="text" visible="true" sort_order="23"> <label translate="true">Group 1 Body</label> </parameter> <!--# Images--> <parameter name="group_1_image_1" xsi:type="block" visible="true" sort_order="30"> <label translate="true">Group 1 Image 1</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <parameter name="group_1_image_2" xsi:type="block" visible="true" sort_order="31"> <label translate="true">Group 1 Image 2</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <parameter name="group_1_image_3" xsi:type="block" visible="true" sort_order="32"> <label translate="true">Group 1 Image 3</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <!--##### Group 2--> <parameter name="group_2_header" xsi:type="text" visible="true" sort_order="40"> <label translate="true">Group 2 Header</label> </parameter> <parameter name="group_2_japanese_header" xsi:type="text" visible="true" sort_order="41"> <label translate="true">Group 2 Subheader</label> </parameter> <parameter name="group_2_body" xsi:type="text" visible="true" sort_order="42"> <label translate="true">Group 2 Body</label> </parameter> <!--# Images--> <parameter name="group_2_image_1" xsi:type="block" visible="true" sort_order="50"> <label translate="true">Group 2 Image 1</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <parameter name="group_2_image_2" xsi:type="block" visible="true" sort_order="51"> <label translate="true">Group 2 Image 2</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <!--##### Group 3--> <parameter name="group_3_header" xsi:type="text" visible="true" sort_order="60"> <label translate="true">Group 3 Header</label> </parameter> <parameter name="group_3_japanese_header" xsi:type="text" visible="true" sort_order="61"> <label translate="true">Group 3 Subheader</label> </parameter> <parameter name="group_3_body" xsi:type="text" visible="true" sort_order="61"> <label translate="true">Group 3 Body</label> </parameter> <!--# Images--> <parameter name="group_3_image_1" xsi:type="block" visible="true" sort_order="70"> <label translate="true">Group 3 Image 1</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <parameter name="group_3_image_2" xsi:type="block" visible="true" sort_order="71"> <label translate="true">Group 3 Image 2</label> <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> </parameters> </widget> </widgets> 
