How Do I Add Styling Or Groupings To Widget Parameters?

Question

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>

Answer 1

This may be a hack but it seems to work OK. You can do headings and separators using comments, like this:

<parameter name="field" xsi:type="text" required="true" sort_order="5">
    <label>Sample field</label>
    <description><![CDATA[<hr style="margin:40px 0;" /><h1>Heading for field group below</h1>]]></description>
</parameter>
<!-- "a new group" -->
<parameter name="another_field" xsi:type="text" required="false" sort_order="10">
    <label>A field in a new group</label>
</parameter>

Basically a <description> is displayed below the actual field in widget editor form and you can put any HTML there, as long as it's wrapped in <![CDATA[]]>, so it's not treated as a part of widget definition XML.