Customize Update – 2016-09-01

This is the weekly update post for the customize component. It includes a summary of this week’s meeting, recent commits, and next week’s meeting agenda.

Customize 4.7 Kickoff Meeting Summary

On Monday we held the customize component kickoff meeting in #core-customize on Slack [logs].

Potential 4.7 Projects

We started by identifying potential projects for 4.7, and people to lead them. The following projects are currently targeting merge for WordPress 4.7:

  • Create page-based nav menus without leaving live preview#34923 – @celloexpressions
    • @westonruter committed a first pass here, closing the primary ticketticket Created for both bug reports and feature development on the bug tracker. as fixed.
    • #37914, #37915, and #37916 have been created for follow up, and are currently in the 4.7 milestone. We need input from the taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. component to enable terms to be previewed before adding support for terms.
  • A new experience for themes in 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.#37661 – @celloexpressions
    • There are a few more dev-heavy tasks but we’re ready for design feedback (@folletto will take a look when he has time) and user testing.
    • In the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev chat, @karmatosed volunteered to coordinate user testing here.
  • Code-editing gateways, via CSSCSS Cascading Style Sheets.#35395 – @johnregan3
    • We decided that bundling CSSTidy (used by Jetpack) in core is the best solution for sanitizing CSS.
    • Syntax highlighting for a more proper code-editing experience is a nice-to-have but not required for a first pass.
    • CSS should be stored in a new custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. (with 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.), with a distinct post for each theme (i.e., all CSS will be theme-specific here).
    • @johnregan3 volunteered to spearhead this project and expects to have it ready for 4.7.
  • Customizer browser history #28536 – @westonruter
    • Development is happening on githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner., and there is only one issue currently, with customize-loader.js. We discussed potentially eliminating the iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. aspect of the customize loader script eventually, as it has caused a lot of issues and doesn’t offer significant usability benefits.
    • We also need to investigate possible performance issues in conjunction with #37661.
  • Customize snapshots/transactions #30937 – @westonruter
    • We decided that the snapshots UIUI User interface will remain in a 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 Plugin Directory or can be cost-based plugin from a third-party for now, but transactions themselves could potentially be ready for 4.7. Transactions allow for the customizer to be used to preview changes to 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”) in headless sites.
    • @westonruter brought up a few concerns with the sequencing of transaction updates and selective refresh, which could result in two HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. requests for the preview where there was previously one. Ensuring no degradation in performance is key here.
    • Transactions would complement #37661 nicely in 4.7 even without the snapshots UI, as theme customizations during the theme selection workflow could be saved without being published to the live site.
  • Customizer notifications #35210 – @westonruter
    • This needs more design feedback and a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. based on the latest proposal.
    • This is less of a project, so we’ll track it as a ticket moving forward.
  • Refactoring sliding panels UI#34391 – @delawski
    • @delawski will work to finish this up soon so that it can get into 4.7 relatively early.
    • We’ll need to coordinate this with the theme experience refresh in #37661, which bypasses the margin-top hacks.

Additional projects discussed:

  • Improve UI for linking preview elements to controls#27403
    • We might try to make some improvements here, but we aren’t currently targeting major changes for 4.7. This might change if more contributors contribute here, particularly on the design side.
  • Twenty Seventeen
    • @helen mentioned in the dev chat that information on Twenty Seventeen will be announced next week. Depending on the customize scope, we might want to have a dedicated person to help there and report back to the customize component meetings.
  • Customize Posts
    • Not targeting 4.7, but it would greatly benefit from a thorough UXUX User experience review now that the majority of the functionality is in place.
    • We’d like to fix #30378 in 4.7, using JS templates for the base WP_Customize_Control UI, to support the plugin.
    • A new project to bring similar functionality to taxonomy terms is breaking ground.
  • Live Preview Feature Project
    • After 4.7, we’ll revisit this project to take a holistic look at how live preview works in core. The end result will likely be a UX strategy for introducing contextual live preview for posts and terms, likely leveraging the existing customizer 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. and technology developed in the Customize Posts plugin, but potentially with an entirely different user interface than what’s currently known as the customizer: namely, looking at ways the customizer framework can be bootstrapped onto the frontend along with inline editing.

Additional Tickets Needing Attention

We briefly drew attention to the following tickets needing feedback from other teams:

  • Improving contrast and UI consistency in the customizer – #29158needs-testing
  • Improve custom background properties UI – #22058 – needs additional feedback on the latest proposals, and a patch
  • Appropriate means for themes to add top-level promotional links – #37335 – needs input from theme review team
    • The theme review team agreed that this was probably a good solution, but wants to investigate other options for developers before moving in this direction. On the core side, we’ll wait for direction from them

Open Floor

We closed with an open floor in lieu of a ticket scrub, due to time.

  • @clorith brought up sticky panel headers/back buttons (#34343 and #35186)
    • @delawski would like to work on these tickets after finishing #34391. We’ll need additional design feedback here as well to decide the direction (probably one or the other of the tickets).

Recent Customize Commits

Here are the customize-related commits for the past week:

  • [38396]: Customize: Circumvent the customizer attempting to preview links to static assets (such as uploaded images).
  • [38436]: Customize: Allow users to more seamlessly create page-based nav menus during customization.
  • [38464]: Customize: Improve handling of active state for dynamically-created controls/sections/panels.
  • [38478]: Customize: Use new `$status_code` parameter for `wp_send_json_error()` instead of calling `status_header()` separately.
  • [38479]: Customize: Fix i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. by re-using the `add_new_item` post type label instead of using a post type name in a generic string, in [38436].
  • [38492]: Customize: Introduce `paneVisible` state and ensure pane is visible when a construct is expanded (or focused).
  • [38503]: AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( Make links in the Customizer underlined by default.

Big thanks to everyone who contributed to patches committed this week: @Presskopp, @afercia, @westonruter, @celloexpressions, @valendesigns, @melchoyce, @mapk, @iseulde, @mrahmadawais, @sayedwp, @johnbillion, and @curdin.

We’re always looking for more contributors; check out the open customize tickets and swing by #core-customize in SlackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at to get involved.

Agenda for 2016-09-05 Meeting

We will have a meeting next week despite the holiday in the US; Monday, September 5 at 17:00 UTC. Agenda:

4.7 Projects

Additional Tickets Needing Attention

  • Improving contrast and UI consistency in the customizer – #29158needs-testing
  • Improve custom background properties UI – #22058 – needs additional feedback on the latest proposal, and a patch
  • Appropriate means for themes to add top-level promotional links – #37335 – needs input from theme review team
  • Customizer notfications – #35210 – needs UX feedback and a patch (and perhaps a clearer demonstration of the iteraction)

Ticket Scrub

  • Identify tickets ready for commit consideration, and 4.7 milestoning from future release tickets with a patch.
  • We’ll pick a different query to triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. each week. For example, bugs awaiting review (need verification).

We’ll see you next week!

#4-7, #customize