Module settings

Displays a settings button on the toolbar allowing the editor to configure the current module

• wf-class: allow the editor to choose a CSS class for this module, allowing them to change between variations of this module:

      <div wf-module="wfed/composite/page">
          <wf-class name="image-position">
              <title>Image position</title>
              <option value="">Default position</option>
              <option value="left">On the left</option>
              <option value="right">On the right</option>
          </wf-class>
          ... rest of the markup of this module/embedded submodules/etc ...
      </div>

  When the editor selects one of the options, the corresponding CSS class is added automatically to this module.

  By default, if there are less than 5 options, it displays as radio buttons, if there are more, it displays as a <select> element, to save space. If you want to override this behaviour, you can explicitely set <wf-class expanded="false"> (will always display as select, no matter how many options).

  Also, it selects by default the first option with value="". To select automatically an option with value not empty, it's needed to add that class in the element too:

      <div wf-module="wfed/composite/page" class="left">
          <wf-class name="image-position">
              <title>Image position</title>
              <option value="left">On the left</option>
              <option value="right">On the right</option>
          </wf-class>
          ... rest of the markup of this module/embedded submodules/etc ...
      </div>

• wf-multi-class: Same as the wf-class, but allows checking multiple options (displayed as checkboxes).

• wf-setting: Generic element for other setting types:

      <div wf-module="wfed/composite/page">
          <wf-setting type="select" name="generic-select">
              <title>Title displayed as the label for this select</title>
              <option value="first-option">First option</option>
              <option value="second-option">Second option</option>
          </wf-setting>
      </div>

You can use as many settings as you want for each module, just make sure the name of the setting is different for each of them (that's one of the reasons the name attribute is required)

        <div wf-module="wfed/composite/page">
            <wf-class name="image-position">
                ... options ...
            </wf-class>
            <wf-class name="title-size">
                ... options ...
            </wf-class>
            <wf-multi-class name="other-classes">
                ... options ...
            </wf-class>
        </div>