Contributors to the WordPress core Customize component are targeting the upcoming 4.5 release for inclusion of a new feature plugin. Customize Pane Resizer allows users to drag the edge of the pane to make the customizer wider than the default 300px.
According to Customize component maintainer Weston Ruter, the idea for the plugin came out of the community summit held earlier this month in Philadelphia, where it was raised as a usability improvement.
“Justin Sternberg took ownership of the idea and we collaborated on it over the course of the community summit and WCUS,” Ruter said. “He did all the real work, and I just contributed ideas and provided Customizer architectural pointers.”
At the moment, the pane simply resizes when the user drags the resize icon, but even this one feature involves refining many tiny details. Ruter said the immediate roadmap for the plugin is to resolve the GitHub issues that have already been logged.
Future Possibility of Undocking the Customizer and Adding Inline Controls
Contributors have many other ideas for extending this feature, including the possibility of introducing positioning options (ie. right/left/bottom). These ideas are in the discussion phase and are not set in stone.
“In addition to being able to move the pane to the right (or to the top/bottom, which are technically problematic), Justin had the idea of allowing the pane to be dragged anywhere on the screen,” Ruter said.
“In this way the Customizer pane would work like panels in PhotoShop which can be docked into the sidebar or they can be dragged out to float freely. This would allow the Customizer to be positioned anywhere on the screen, with a full page preview in background.”
Alongside the idea of the customizer pane becoming a floating window, contributors are also discussing applying this same concept to individual customizer controls. This ties into one of the items on Ruter’s longer-term roadmap for the Customizer – inline controls:
Bootstrapped Customizer: Lazy-load the Customizer into the current frontend view without having to leave the page. With selective refresh implemented, inline controls and frontend bootstrapping would be possible since full-page refreshes would no longer be required.
“Instead of all of the controls being docked into the one pane and organized into panels and sections, they could instead (or in addition) be displayed alongside the elements in the preview that they modify,” Ruter said. “For example, editing a widget could pop open a floating widget form control next to the widget in the preview.”
These alternative UI considerations are currently beyond the scope of the Customize Pane Resizer feature plugin, which Ruter said will be limited to polishing up the resizing feature for 4.5.
The Customize Pane Resizer Addresses Important Usability Concerns
When menus were added to the customizer in WordPress 4.3, many thought that the narrow width of the pane created a cramped menu management experience. The ability to resize the customizer pane addresses this concern by allowing users to expand it for tasks that require more real estate.
Ruter doesn’t anticipate many objections to merging the Customize Pane Resizer plugin, given that it solves several usability problems.
“I don’t think it is very controversial,” he said. “It seems a major complaint I hear often about the Customizer is that it doesn’t give the user enough room, so this would allow the user to have as much room as they want.
“Another concern I’ve heard is that people don’t know the pane can be collapsed at all (even though there is a collapse button on the bottom), so this greatly improves the visibility of collapsing and it implements a common UI paradigm where panes can be resized by dragging on their edge (e.g. Chrome dev tools),” Ruter said.
In making the pane resizable, Ruter’s chief concern is ensuring that the controls will respond nicely to varying widths, including those created by plugins. Expanding the customizer pane with the resizer plugin currently stretches the controls somewhat awkwardly and in some cases leaves a lot of empty real estate.
“The biggest concern I have is that controls are designed for the 300px width, generally,” Ruter said. “So if the width is all of a sudden 900px, then the (custom) controls may well not look right.
“The controls in Core need to be updated to ensure they work in a variable-width pane. But plugin controls would need to do the same.”
If you want to help contribute to the Customizer Pane Resizer’s development, check out the plugin’s GitHub repo. It is available on WordPress.org but the GitHub version is always more up-to-date. If you have developed a plugin or theme that extends the customizer, you may want to test the resizer and offer feedback/code improvements on GitHub. Anyone interested can join the conversation in the #core-customize channel on WordPress Slack.
“The biggest concern I have is that controls are designed for the 300px width, generally,” Ruter said. “So if the width is all of a sudden 900px, then the (custom) controls may well not look right.”
– That’s what I’m thinking.
Seems like it’ll be a good add-in, but we also could be seeing developers throwing in more options solely because there’s more space. Keeping things looking nice and from getting cluttered will be tough.