During the State of The Word at WordCamp US 2015, Matt Mullenweg highlighted customization as the largest opportunity to improve the WordPress experience. In a recent interview on WordPress Weekly, Mullenweg expanded on his thoughts saying he could see the customizer being the main focus of a release.
“If I think about leading a release, I could see the Customizer being a main focus of it,” Mullenweg said. “It’s so important to the user experience of someone new to WordPress especially, but also to everyone who uses WordPress day to day.”
There is an effort underway to improve the way users customize their sites in real-time via the customizer. One method that already exists in core is the ability to Shift+Click on a widget in the customizer preview and the corresponding controls will open in the customizer.
One of the downsides to this technique is that the tooltip only displays when a user hovers over a widget making it difficult to discover. The other is that touchscreen devices don’t have a way for users to Shift+Click. Weston Ruter’s opened a trac ticket aimed at exploring ideas to make something better.
The second method is an internal project at Automattic that has recently been open sourced into a plugin that’s freely available on GitHub. The plugin is the result of extensive user testing on WordPress.com which showed users tried clicking on the parts of the page they wanted to edit, rather than searching through the menus in the customizer.
This approach uses persistent icons to show the user which parts of the site can be customized when the customizer preview pane is open. When a user clicks on an icon, settings specific to that area are opened in the customizer. 
I tested the plugin and joyfully found it intuitive to use. One of the first things I noticed is that the icons don’t have tooltips associated with them so it’s difficult to know what you’re about to edit. Thankfully, someone has already opened an issue on GitHub and it looks like title attributes will be added in a later release.
Compatibility With All Themes Is a Pipe Dream
Considering the icons are colored, it’s possible that they may not display properly on certain themes. I asked Payton Swick, an Automattician working on the plugin, if they’ve run into support queries related to themes since launching the feature on WordPress.com, “Yes, and we’ve adjusted the plugin occasionally to help with that, but more often we’ve adjusted the themes,” Swick said.
“The most common issue is the z-index arms race. If a page places the site title on top of the header image, for example, we have to make sure the icons for both are distinctly positioned.
“Another example is when a large menu drop-down appears, covering elements on the page; there’s no easy way to determine if something is ‘covered up’, so we’ve tweaked the z-index many times on both the plugin and themes to try to find a happy middle ground.”
The icon approach limits compatibility with certain themes but as Swick notes, compatibility with all WordPress themes is close to impossible, “I’d say that something like this that tries to support all WordPress themes is a pipe dream,” he said.
“WordPress themes and plugins that modify the user interface can use literally any markup or CSS/JS, so there’s always going to be places where it falls short. We’ve done our best to support modern themes built on frameworks like Underscores or that follow theme standards and to fail gracefully when the plugin can’t figure out what’s going on. That said, there will still be incompatibilities.”
Automattic could have chosen to keep this enhancement for themselves and its users but opted to work with the community instead. “It was successful enough that we decided to open our work to the wider WordPress community,” Swick said.
“I’m certain it could use some clean-up and adjustment to better serve arbitrary WP.org sites. That’s one of the reasons we mentioned it on WP.org Trac. We hoped that some core developers would be interested enough to either borrow the ideas for core or contribute to the project directly.”
The plugin is experimental and not recommended for use on production sites. However, the team is anxious to hear feedback from a wider audience.
“It’s not our team’s main focus right now, but the plugin is out there to get feedback and to be used, so we are making changes when we find bugs,” Swick said. “To contribute, just open issues/pull requests on the repo. Issues labeled with bug will get the most attention.”
Users are encouraged to try the plugin on a test site with a number of different themes to see if it improves the customization experience. If you have any feedback or ideas on how to improve this effort, please share them in the comments.
I am one of those who absolutely hate the customizer, I shouldn’t say “hate” but that describes just how much I dislike it and how much I have been saddened by all the human effort that has been poured into it rather than other parts of the WordPress project. But WOW, that customize-direct-manipulation plugin (maybe it needs a better name) changes everything. Now, thanks to it the customizer finally makes sense.
Concerning the theme compatibility issues, and more specifically the z-index and color cases, maybe the plugin could add some settings page to the backend where the user (or more maybe even the theme author) could set their appropriate values and styling.
Anyway, thanks for fixing the customizer experience.