Problem/Motivation
I'd like to wrap specific invalid html before and after a set of fields and add the closing tags to make it valid html somewhere later in the form. The form will have more than one section that needs specific wrapper elements. This was maybe achievable at some point using basic html but in a recent release it's no longer working as the elements get filtered. I'd like it if there were no wrapper elements around this custom invalid html.
In Drupal 7 there was a couple contrib modules that did this solution however Drupal 8 no longer supports the hooks used by these modules and to port them over would require making a complex plugin which doesn't look like a very easy task. I've tried drush gen to get a basic plugin going to start but the implementation is vastly different from Drupal 7 and I then started wondering if there was another way to do what I need to do through the GUI interface without another contrib module as I couldn't find any comparable drupal 8 modules.
The drupal 7 modules are as follows:
https://drupal.org/project/webform_wrappers
AND
https://drupal.org/project/webform_field_wrapper
I've looked at fieldset, which I'm not sure will do what I'd expect.
Example form html (classes as per Twitter Bootstrap v3):
<div class="panel panel-default example-organisation-card" id="001">
<a id="transformer_information"></a>
<header class="panel-heading">
<h2 class="panel-title h3 mrgn-tp-sm mrgn-bttm-sm">Current transformer information</h2>
</header>
<div class="panel-body mrgn-lft-md">
<div class="form-group">
<label for="inspection_number" class="required">Inspection number <strong class="required">(required)</strong></label>
<input class="form-control" type="text" id="inspection_number" name="inspection_number" size="50">
</div>
<div class="form-group">
<label for="manufacturer" class="required">Manufacturer <strong class="required">(required)</strong></label>
<input class="form-control" type="text" id="manufacturer" name="manufacturer" list="manufacturer_suggestions" placeholder="Start typing manufacturer" size="50">
<datalist id="manufacturer_suggestions">
<!--[if lte IE 9]><select><![endif]-->
<option label="Itron" value="Itron"></option>
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group">
<label for="model" class="required">Model <strong class="required">(required)</strong></label>
<input class="form-control" type="text" id="model" name="model" list="model_suggestions" placeholder="Start typing model" size="50">
<datalist id="model_suggestions">
<!--[if lte IE 9]><select><![endif]-->
<option label="MV7" value="MV7"></option>
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group">
<label for="serial_number" class="required">Serial number <strong class="required">(required)</strong></label>
<input class="form-control" type="text" id="serial_number" name="serial_number" size="50">
</div>
<div class="form-group">
<label for="noa" class="required"><span class="field-name">Notice of approval number</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="noa" name="noa" type="text" required="required" size="50" maxlength="50">
</div>
<div class="form-group">
<label for="primary_amps" class="required"><span class="field-name">Primary amperes</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="primary_amps" name="readings" type="text" required="required" size="10" maxlength="10">
</div>
<div class="form-group">
<label for="secondary_amps" class="required"><span class="field-name">Secondary amperes</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="secondary_amps" name="readings" type="text" required="required" size="10" maxlength="10">
</div>
<div class="form-group">
<label for="multiplier" class="required"><span class="field-name">Multiplier</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="multiplier" name="multiplier" type="text" required="required" size="3" maxlength="3">
</div>
<!--<div class="form-group">
<label for="class_code" class="required"><span class="field-name">Class code</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="class_code" name="readings" type="text" required="required" data-rule-minlength="3" size="3" maxlength="3" />
</div>-->
<div class="form-group">
<label for="accuracy_class" class="required"><span class="field-name">Accuracy class</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="accuracy_class" name="readings" type="text" required="required" data-rule-minlength="10" size="10" maxlength="10">
</div>
<div class="form-group">
<label for="rating_factor" class="required"><span class="field-name">Rating factor</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="rating_factor" name="readings" type="text" required="required" data-rule-minlength="3" size="3" maxlength="3">
</div>
<div class="form-group">
<label for="wire" class="required"><span class="field-name">Wire</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="wire" name="readings" type="text" required="required" data-rule-minlength="3" size="3" maxlength="3">
</div>
<div class="form-group">
<fieldset class="provisional gc-chckbxrdio form-inline">
<legend class="required mrgn-bttm-sm">Style <strong class="required">(required)</strong></legend>
<div class="label-inline">
<input id="bar" type="radio" name="style_type">
<label for="bar">Bar</label>
</div>
<div class="label-inline">
<input id="donut" type="radio" name="style_type">
<label for="donut">Donut</label>
</div>
</fieldset>
</div>
</div>
</div>
Steps to reproduce
To be determined.
Proposed resolution
To be determined.
Remaining tasks
To be determined.
User interface changes
To be determined.
API changes
To be determined.
Data model changes
To be determined.
Comments
Comment #2
joseph.olstadComment #3
joseph.olstadComment #4
joseph.olstadComment #5
joseph.olstadComment #6
jrockowitz commentedCan you please post an example of the YAML element source that was previously supported?
Comment #7
jrockowitz commentedPlease reopen this ticket when you can post an example.