Front to Back - second iteration - 01

2-minute read

Trying to make it pleasant.

Second iteration features

Latest version of the “Front to Back” plugin focused on putting some working code out in the wild.
This second iteration will focus on working the existing features to make them “enjoyable”.
So down to a short list of features I’d like to put into existence:

  • live preview without reloading the page
  • Theme Customizer UI modifications

Live preview

The Theme Customizer API allows for settings to be refreshed with a postMessage transport.
In short terms this means the page is not reloaded on each value change and values will be changed on the page using JavaScript for a way smoother experience.
Every day I work with the excellent Kirki library I reap the benefits of the choice more and more and will tap into its ready to use API to manage such a possibility.
As an example in template coding terms the ftb-title template tag would change from this:

<h1 class="entry-header">
    <ftb-title>About Us</ftb-template>
</h1>

to this:

<h1 class="entry-header">
    <ftb-title element='.entry-header'>About Us</ftb-template>
</h1>

Where the extra element attribute will serve the purpose of telling the plugin what CSS/jQuery selector should be used to change the value in real time.
This selector tracking could be done by the plugin making some assumptions on the markup structure but I would like to have the feature out as fast as possible and re-visit it if manual element specification proves to be a chore.
Plus “Front to Back” is meant as a developer tool and as a developer I like the flexibility this approach grants.

Theme Customizer UI modifications

The Theme Customizer sidebar feels a little cramped when a bunch of editor-like controls come up in it. Theme Customizer editing I’d like to make a light CSS intervention to allow for comfortable editing on bigger screen getting to the point where the Theme Customizer becomes a comfortable place to edit a page content. Some experiments with [developer tools](!g chrome developer tools) bore results that make me hope. Expanded Theme Customizer sidebar

Next

I will work on the live editing feature next.