Weston Ruter 2:00 pm on September 23, 2015
Tags: customize ( 67 ), roadmap ( 9 ), roadmaps ( 17 )

Outlining a possible roadmap for the Customizer

Planning for the future is a necessary and important part of the WordPress development process. As we consider the future of WordPress – both as a whole and individual features – we publish proposed roadmaps to encourage greater discussion and give insight into the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team’s thought process.

The process of creating a roadmap is just as important as the vision behind it and the final roadmap itself. This process gives the entire community an opportunity to research and document history, define what specific items can be accomplished to bring us closer to the vision, and outlines how those tasks fit together within a possible timeframe.

What follows is a potential roadmap for the Customize component. If you’re interested in the future of live preview in WordPress, now is the perfect time to get involved and leave your feedback.

A couple of months ago, the WordPress lead developers met with the maintainers of the Customize component to discuss the future of live preview in WordPress. The goal of the chat was to come up with a potential roadmap for both the component and for how live preview can improve the user experience of WordPress for all users.

The ultimate goal of live preview in WordPress is to create user trust and remove the “save and surprise” inherent in some of the backend features.

After a lot of discussion, the group decided to target the following goals over the next two years:

Considerably improve performance.
Continue iterating on current live preview features to ensure they are solid and as easy-to-use as possible, including theme browsing and installation, menus, and widgets.
Experiment with new and different user interfaces. If we were creating live preview today, what would it look like? In what ways can we ease the feeling that you’re looking through a “porthole”?
Removal of the ambiguous mode. Currently, the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. is contained in a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. without the adminadmin (and super admin) toolbar, but ideally there is the admin and the theme, and no in-between. One direction this may go is enabling “Customize” on the front end to immediately load the Customizer controls.
Experiment with a guided new user experience (NUX). Live preview lends itself to site setup. How can we improve the live preview experience and combine it with the NUX? Consider a “setup wizard” use case and ensure the flow has no dead ends, i.e. users can customize everything in one.

Those overall goals for live preview in WordPress can be rewritten into some specific features that are in development or planned for the future of the Customize component. These include:

Transactions. This re-architecture of some of the Customizer internals improves compatibility with themes by loading the preview using a natural URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, and allows Ajax requests or even REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. requests to be previewed. It also allows the preview to be viewed independently of the Customizer, so changes can be shared for others to review. See #30937.
Selective refresh. Only a piece of the page will need to be refreshed when this backend feature is implemented. (Formerly known as “Partial Refresh”.) Currently, this is available for menus in the Customizer. This eliminates duplication of display between PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher and JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors., keeping it DRY. See #27355.
Concurrency. Allows for “locking” settings using the Heartbeat APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., improving the overall user experience by preventing users from overwriting each other’s changes. See #31436.
RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.. Enables pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers to add features like draft, roll back, and scheduled changes (e.g. “change my background on January 1”). This builds upon transactions, as the setting changes are staged in a transaction, and this facilitates settings to be revisioned and for settings to be scheduled. See #28721, #31089.
Theme installation. Iterates on and completes the theme browsing experience.
Responsive preview. Iterates on the concept of live preview by giving users a better idea of what their site will look like on other devices. See #31195.
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.
Improvements for both touch and small devices.

Beyond those features, the group identified some specific changes that should be prioritized, in conjunction with the features planned:

The sliding animation between panels should feel more like “moving panels” (see: iOSiOS The operating system used on iPhones and iPads.).
Keyboard navigation should be consistent and clear.
Identify “dead ends” in the interface and remove them, when possible. For example, prior to menus in the Customizer, it was not possible to customize that aspect of your site’s design with the Customizer.

The concepts surrounding live preview and the Customizer have been in development for a long time. Many of the concepts from Elastic Theme and the Visual CSS Editor have been incorporated over time. Over the next few years, experimentation with these concepts will likely take place in feature plugins. For example, this team may experiment with inline content editing, where it makes sense in the context of customizing a site. Another path for exploration is simple theme customization – e.g. change the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. font, change the sidebar color, or change the width of the sidebar.

As with all components and new features, we shouldn’t be afraid to experiment and fail and should continually push for new experiments and ideas, especially in the context of feature plugins. Further, some of the above experiments may not make it into core, but are meant as a general direction that live preview should take in WordPress.

Taking these features together, below is a sequence outlining a possible roadmap for live preview and the Customize component in general, along with estimated targets. Please note that this is a proposed roadmap and is entirely dependent on contributor involvement. Additionally, many of these things will take place in a feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. prior to core inclusion.

Partial refresh. Performance Improvements. (Target: 4.4)
Responsive Preview. Transactions. (Target: 4.5)
Concurrency. Revisions. Theme Install. Beginning of NUX wizard. (Target: 4.6)
Focus on touch screen / small device improvements. (Target: 4.7)
Developer API improvements based on feedback from plugin developers. (Target: 4.8)
Improved UIUI User interface after experiments in 2016. NUX “wizard mode.” (Target: 4.9)

Live preview is one of the most critical features in WordPress as we continually combat “save and surprise.” The Customizer in its current form provides an improved user experience to WordPress users when customizing their site’s design. Each feature mentioned above is a continuation of the live preview concept, building and improving upon the Customizer.

Everything above is just a proposal and we need your feedback to ensure it is the right direction. If you’re interested in any of the above, comment here with your feedback, or join the team in #core-customize.

This post was a collaboration between @helen, @nacin, @mark, @celloexpressions, @samuelsidler, and yours truly.

#customize, #roadmap, #roadmaps

Davide 'Folletto' Casali 4:46 pm on September 23, 2015

> NUX wizard

I find a bit dangerous to think of it as a “wizard”, mostly because usually wizard UIs have specific connotations. We should think of it more as a “tutorial” like games do. Not separate UIs, but a guide through an existing UIUI User interface that can be dismissed if you’re expert, or done partially, or followed all along. 🙂

—

Other than that… this seems AWESOME. 🙂

Performance is really the main thing there. That alone would reap huge benefits. Then you add Live Preview and well, boom! 🙂
Daniel Bachhuber 6:11 pm on September 23, 2015

We (Fusion) are very keen to adopt the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. as the UXUX User experience for frontend management, and look forward to helping out with the feature plugins built as a part of the roadmap.
- Paal Joachim Romdahl 1:20 am on September 24, 2015
  
  Very interesting Daniel! I would like to test out along the way and suggest improvements.
FolioVision 12:43 am on September 24, 2015

Weston, thanks for the comprehensive and forward thinking report.

It would be great if the interface paradigm for CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. would remain constant for the exterior world (i.e. agencies and clients) while a dev version gets tested by the more progressive among us.

Perhaps a switch to throw in settings to enable experimental Customizer features? The switch could be retired when Customizer settles a bit.
- Weston Ruter 4:05 am on September 24, 2015
  
  @FolioVision yes, absolutely. This is why most of the new features will be developed in feature plugins so that they will remain opt-in until they are deemed solid for everyone.
devolute 4:05 pm on September 25, 2015

but ideally there is the adminadmin (and super admin) and the theme, and no in-between.

Here here! Does this mean that there will be a “front-end” mode, and a “dashboard” mode that fits into the current dashboard so that things can be altered without a preview being available?
- Weston Ruter 4:16 pm on September 25, 2015
  
  @devolute Basically the idea is that there would no longer be a separate “CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.” URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org (wp-admin/customize.php) that you go into. When on any frontend URL, clicking “Customize” would just slide out the Customizer sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. pane in place. You’d still have the adminadmin (and super admin) bar available and everything else that you would normally when on the frontend, except you’d also be able to make changes to the Customizer as you browse around. So no, this doesn’t have in mind making the Customizer controls available in the wp-admin without a corresponding preview.
  - devolute 4:19 pm on September 25, 2015
    
    Ah, I understand your intention. I think my problem is that I’m using the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. for things like phone numbers, addresses and other options when I perhaps should look at other solutions.
Ahmad Awais 3:38 pm on September 26, 2015

We at WPTie are slowly yet gradually adopting CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. in all our themes and plugins (where needed). All in for customizer support in WordPress.
Alex Mangini 10:23 pm on September 28, 2015

On the “Bootstrapped CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.” point, is this a move towards inline content editing and possibly even “page builder” type concepts?

My biggest curiosity about the Customizer and what I really want to use it for as a developer is creating posts and pages without a 3rd party visual editor and without the drawback, as already stated, of guessing what they’ll look like after inputting content into specially built metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes or widgets.

Thanks for doing these write-ups, as I build more and more WordPress plugins/products I find myself lurking around here to better educate myself and plan roadmaps for my own work.
- Weston Ruter 10:45 pm on September 28, 2015
  
  @alexmangini:
  
  On the “Bootstrapped CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.” point, is this a move towards inline content editing and possibly even “page builder” type concepts?
  
  This is already possible, actually. For an example of inline editing, see the Customize Inline Editing pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. And page builders are also possible now by using widgets in the Customizer. I’m currently working on a site that uses a concept of query-specific widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas to allow every URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to have custom sidebars configured, where the main content area is just another widget area: this allows drag-and-drop building of pages just with standard widgets and any custom widgets that you define. Widgets still have a lot of room for improvement in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but I’m very keen to see them move in the direction of “content blocks” which can be used for building page templates in the Customizer.
Nick Halsey 4:19 am on September 29, 2015
Thanks for getting this published Weston.

A couple of additional comments on my end:
- We need more help. The CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. can do (and could do) a lot, but without more contributors (not just code), it’ll take time to see big improvements go through. I’d love to see more of an effort to embrace the Customizer throughout various other coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. projects, and to see more community involvement in Customizer design and development.
- In the interest of experimentation and building on the benefits of live preview, I’m planning on looking at some ways to integrate things like page templates, post formats, and featured images (with cropping) into the Customizer. While there’s a good chance none of those things will make it into core, I’d like to encourage anyone with any ideas for the Customizer to try them out and offer them for discussion. We’re no where near the limit of what users could do with the Customizer and it’s an amazing framework to build additional features on top of.
- While many of the topics in the post are fairly developer/backend oriented, it’s important to emphasize that there is still a significant amount of design and UIUI User interface/UXUX User experience work to be done, including looking at entirely different approached to the live preview UI concept. Don’t be shy to share your ideas if you have any – the technical side of things is evolving to support pretty much anything we may want to try.
pingram3541 3:59 am on November 24, 2015

A little late to the game but I just wanted to say thanks for pushing the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. forward. I do feel it is given the least amount of attention when it comes feature progression and I can’t figure out why. Yay for menu’s but how did menu’s make it on the plate before posts??? Seriously folks, this is a huge mechanism in which we are losing ground fast to many of the new front end content builders on the web and the Customizer is behind the times.

@westonruter your example of the Customize Inline Editing is nice but seems only to serve a very narrow focus on ability as it still provides no capability of inline editing for actual post content/post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. Don’t get me wrong, great working example but real world we need to break outside the box of wp_options, theme_mods…we need simpler access to post objects and other areas in WordPress.

Again @westonruter looking at your code on the Customize Posts pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party I see that your way of getting around the lack of post object availability is by providing a drop down of all posts/pages of which to perform the query against which is genius. However, it doesn’t seem natural to have to select a page/post when you’re already viewing one in the Customizer already and when needed can navigate to other post/page where their post fields could be provided rather than choose it from a long drop down list, which could become unmanageable on some larger sites.

So yes, I’m excited for the future and the BIG ONE thing I’d love to see is:

Access to the current preview’s post object or at least a way to capture the post id for use with $customize_update and $customize_preview. Could be as simple as adding the post id to the $wp_customize object.
- Weston Ruter 5:54 pm on November 25, 2015
  
  @pingram3541 Thanks for the reply.
  
  I do feel it is given the least amount of attention when it comes feature progression and I can’t figure out why. Yay for menu’s but how did menu’s make it on the plate before posts???
  
  There are a limited number of people to contribute to each release. @carlhancock wishes that all adminadmin (and super admin) management features could be added to the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. at one time instead of one piece at a time, but this is not practical for an open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. volunteer effort with three releases a year. As we just saw with Automattic’s Calypso announcement from @matt, it took almost two years and dozens of contributors to re-develop the entire WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ admin into a new JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.-driven interface. We don’t have the time or the person power to do that. However, I think that interest is building, and with that, contributors will come.
  
  Compared to posts, it is relatively much simpler to build support for nav menus in the Customizer. They have a UIUI User interface that fits in the Customizer pane, and the data model is pretty normalized. Posts, on the other hand, would need a full-on editor experience (inline to the preview) and can have an infinite number of variations to display (shortcodes, media embeds, etc). This is a hard problem to generalize for all themes, but it is something that @iseulde has worked hard on in the Front-end editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. The Customize Posts plugin was developed as a prototype to show the architecture for how posts and postmeta can be managed in the Customizer so that the Front-end editor (or another such plugin) could leverage the Customizer for previewing and staging changes.
  
  your example of the Customize Inline Editing is nice but seems only to serve a very narrow focus on ability as it still provides no capability of inline editing for actual post content/post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. Don’t get me wrong, great working example but real world we need to break outside the box of wp_options, theme_mods…we need simpler access to post objects and other areas in WordPress.
  
  As noted in the plugin’s description, Customize Inline Editing is an example (proof of concept), again to show how inline editing can be implemented in the Customizer. So its focus is intentionally narrow. The approach taken there can be implemented for managing post data inline. See also wp-customize-posts#8.
  
  on the Customize Posts plugin I see that your way of getting around the lack of post object availability is by providing a drop down of all posts/pages of which to perform the query against which is genius. However, it doesn’t seem natural to have to select a page/post when you’re already viewing one in the Customizer already and when needed can navigate to other post/page where their post fields could be provided rather than choose it from a long drop down list, which could become unmanageable on some larger sites.
  
  Actually, it’s not a dropdown of all posts/pages. It’s a list of the posts that currently appear in the preview. The dropdown’s options change as you navigate around the site in the preview, meaning that you should only be editing a post in the Customizer that is actually visible in the preview.
  
  So yes, I’m excited for the future and the BIG ONE thing I’d love to see is: Access to the current preview’s post object or at least a way to capture the post id for use with $customize_update and $customize_preview. Could be as simple as adding the post id to the $wp_customize object.
  
  The future is now. As noted above, Customize Posts does it to communicate the list of posts in the preview to the pane for the dropdown. Also @ericlewis has implemented this in wp-custom-css-per-post. I also have on my todo list to write a post on how to create a “metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way.” in the Customizer for managing postmeta for the current singular post in the preview.
Philip Ingram 6:57 pm on November 25, 2015

Thanks for the quick and detailed response. I’d love to contribute as long as my foo is strong enough, let me know how I can help or if there is a more appropriate forum for continuing this discussion =)

Additionally, regarding @ericlewis ‘s wp-custom-css-per-post, I already have a working live css editor using codemirror to provide live updating of the preview as well as updating the hidden CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. input setting transport to postMessage and this works great allowing live preview before saving but also allowing the saving. This has greatly improved efficiency of my front end design workflow. However this currently is limited to my site-wide custom css via theme options. What brought me here in the first place was seeking out a way to GET and POST the current posts metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. which I have a custom css per post option built into my themes. So maybe I can get with @ericlewis and we can figure this out. Looking at WP Customize Posts I see the query for $_POST[‘customized’] to iterate though and retrieve post id’s but when using the Kirki toolset (I’m sure the class needs something extra for this) it’s always an empty array upon initial load of the Cusotmizer and that is where I’m stuck currently. I just need the darned post id!

You mention that posts are way more complex than menus and yes there’s no debate there, however in the time being, if there was a simple way to capture the current previewed post’s id or maybe a clearer example how to retrieve it, that opens the door for us to pioneer further without waiting for a more coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-driven method of updating post data via the Customizer.
- Weston Ruter 8:19 pm on November 25, 2015
  
  @pingram3541 See this Customize Queried Post Info example pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that allows you to get the current queried post in the preview and watch for it changing as the user navigates around the preview.
Philip Ingram 10:20 pm on November 25, 2015

@westonruter Yes! Thank you for this.

Comments are closed.

Welcome!

Communication

Outlining a possible roadmap for the Customizer

Welcome!

Communication

Share this: