> Customize Inline Editing wordpress plugin resources analysis

Customize Inline Editing wordpress plugin resources analysis

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

Delta: 0%

Post page

Delta: 0%
Customize Inline Editing plugin has no negative impact on PageSpeed score.

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.

Resources added by plugin to Home page/Post page in kB
Total size of resources for Home page/Post page in kB
Random Theme Tests
Lime Slice screenshot

Lime Slice

by: AOEmedia

16085
0%
BlocomoTwo screenshot

BlocomoTwo

by: cberg

8046
0%