How to use list template on a tiddler's fields?

[JD]

Hello, I'm trying to build a font-adjuster tiddler for my plugin, but due to TW5 inexperience I've come across a bothersome thing (not really a problem) I can't solve via google-searches, can you guys help me? 

I have a stylesheet tiddler (TIDDLER A) that relies on its fields for some of its values, and another tiddler (TIDDLER B) that contains edit-field widgets for the stylesheet tiddler, like so:

TIDDLER A 

.tc-tiddler-view-frame h2.tc-title,
input.tc-titlebar.tc-edit-texteditor { 
    font-size: {{!!font-title}}; 
}
.tc-tiddler-view-frame h1 { 
    font-size: {{!!font-h1}}; 
}

and so on, and so forth 

TIDDLER B 

<tr>
<td>Title:</td>
<td><$edit-text tiddler="TIDDLER A TEMP" field="font-title"/>
<$reveal type=nomatch state="TIDDLER A TEMP!!font-title" text="">
<$button>
<$action-setfield $tiddler="TIDDLER A" font-title={{TIDDLER A TEMP!!font-title}}/>
<$action-setfield $tiddler="TIDDLER A TEMP" font-title=""/>✓</$button>
<$button>
<$action-setfield $tiddler="TIDDLER A TEMP" font-title=""/>✕</$button>
</$reveal>
</td>
</tr>
<tr>
<td>Heading h1:</td>
<td><$edit-text tiddler="TIDDLER A TEMP" field="font-h1"/>
<$reveal type=nomatch state="TIDDLER A TEMP!!font-h1" text="">
<$button>
<$action-setfield $tiddler="TIDDLER A" font-h1={{TIDDLER A TEMP!!font-h1}}/>
<$action-setfield $tiddler="TIDDLER A TEMP" font-h1=""/>✓</$button>
<$button>
<$action-setfield $tiddler="TIDDLER A TEMP" font-h1=""/>✕</$button>
</$reveal>
</td>
</tr>

and so on, and so forth

Questions:

1. Is there a way to wrap those fields, (font-title, font-h1, font-h2, etc) in a list template? Or am I out out luck and have to copy+paste those columns, reveals, buttons, etc per field item?

2. Is there a better workaround for the problem of the edit-text widget losing focus when the said widget is editing the field of the current tiddler? Because of the losing-focus thingy I'm forced to use and edit TIDDLER A TEMP's fields instead of simply using TIDDLER B's fields as temporary storage...

Help / redirection to help-files would be great!

[Jed Carty]

I have a few things that may be useful:

1 - if you know what fields you are going to care about than you can make a list that will display them all doing something like this (it is a bit messy and I haven't tested it, but the general idea should work):

<$list filter='[[fond-title]] [[font-h1]] [[font-h2]]'>

<tr>
<td>Heading h1:</td>

<$tiddler tiddler="TIDDLER A TEMP">
<td><$edit-text tiddler="TIDDLER A TEMP" field="font-h1"/>
<$reveal type=nomatch state="!!font-h1" text="">
<$button>
<$set name=CurrentValue filter='[[TIDDLER A TEMP]get<currentTiddler>]'>
<$action-setfield $tiddler="TIDDLER A" $field=font-h1 $value=<<CurrentValue>>/>
</$set>
<$action-setfield $tiddler="TIDDLER A TEMP" $field=<<currentTiddler>> $value=""/>✓</$button>
<$button>
<$action-setfield $tiddler="TIDDLER A TEMP" $field=<<currentTiddler>> $value=""/>✕</$button>
</$reveal>
</td>
</$tiddler>
</tr>
</$list>

2 - I have found that it is also always a better idea to have the values you are editing in another tiddler. Never edit the fields of TIDDLER A from inside TIDDLER A, always use some interface tiddler to edit fields in TIDDLER A, or have some other tiddler like $:/settings/TIDDLER A with the fields you edit and then have TIDDLER A reference those fields. I have found this makes my work much tidier and easier to understand later.

Another note about buttons:  In my experience it is a nicer if you always have the buttons visible and just change the colour when they don't do anything instead of making the buttons disappear. Either move the reveal inside the button widget so that the buttons are always there but only act if there is an action to do, or put a second reveal that has the opposite condition that displays a dummy button that  is greyed out.

That may be more of a personal preference for me. I am dyslexic and having controls disappear and reappear can change the layout of a page and it is hard for me to follow that.

[JD]

Hey, thanks, man! I'll try this out and post a reply as soon as I'm done fiddling. I'm unfamiliar with the SET widget so it'll probably take some time for me to understand the internal process. 

About the buttons. I also wanted them to always be shown, but ran across the problem of accidentally clicking them during testing... I wonder if there's a quick way to set them to "disabled" or something. I know this one's solvable via html and CSS, I'll google this one!