>
Download This Plugin | |
Download Elegant Themes | |
Name | Customize Inline Editing |
Version | 0.1.1 |
Author | XWP, Weston Ruter |
Rating | 0 |
Last updated | 2014-12-11 01:46:00 |
Downloads |
163
|
Download Plugins Speed Test plugin for Wordpress |
Home page PageSpeed score has been degraded by 0%, while Post page PageSpeed score has been degraded by 0%
Customize Inline Editing plugin added 6 bytes of resources to the Home page and 3 bytes of resources to the sample Post page.
Customize Inline Editing plugin added 0 new host(s) to the Home page and 0 new host(s) to the sample Post page.
Great! Customize Inline Editing plugin ads no tables to your Wordpress blog database.It is surprisingly easy to add inline editing support to the Customizer. With inline
editing, the user no longer has to open a control in the left Customizer pane to edit
a setting. Instead, they can just click on the relevant element in the Customizer preview
and edit the item inline. It could be said that adding inline-editing to the Customizer
improves the UX so much over postMessage
live editing, as postMessage
is an improvement
over the refresh
transport. There is no need to hunt for the right control,
and can actually edit with the Customizer pane collapsed! Here is a demonstration:
Important: This plugin is not intended to compete with avryl's great Front-end Editor plugin. In fact, she is re-writing her plugin to leverage the Customizer. This plugin is just a quick demonstration of how simple the Customizer can be extended to support inline editing—moving the controls into the preview itself.
This plugin provides one example implementation of inline-editing this can be accomplished in the Customizer.
Themes can opt-in to support such inline-editing within the Customizer
by indicating the theme supports customize-inline-editing
and then passing an array
Customizer setting names mapped to CSS selectors, similar to how most themes already
opt-in for postMessage
transport:
add_theme_support( 'customize-inline-editing', array(
'blogname' => '.site-title a',
'blogdescription' => '.site-description',
// ...
) );
The plugin is bundled with built-in support for the Core Twenty* themes to
edit-inline the site title (blogname
) and tagline (blogdescription
), so you can
use the plugin with these themes as-is.
Hover over an element that is inline-editable and a tooltip appears:
Shift + Click to edit inline.
Doing so turns the element into a contentEditable
area. Any change to the text in this
element will be then synced up to the Customizer's setting model. Upon clicking out (blurring) of
the element, the contentEditable
state is removed. The setting may still be edited via the
control in the Customizer pane as well.
Only basic text fields can currently be edited; styling and any tags added to contentEditable
areas will be stripped out.
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.