[wp-trac] [WordPress Trac] #38426: Twenty Seventeen: Improve user and developer experience with the customizer integration

[WordPress Trac]

#38426: Twenty Seventeen: Improve user and developer experience with the customizer
integration
------------------------------+--------------------
 Reporter:  celloexpressions  |       Owner:
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  4.7
Component:  Bundled Theme     |     Version:  trunk
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |     Focuses:  ui
------------------------------+--------------------

Comment (by celloexpressions):

 I forgot to mention in the ticket description, but another criteria is
 that there should be clear opportunities for plugins and child themes to
 extend the provided options without reworking the theme's options
 structure.

 [attachment:38426.diff] is a first pass based on my initial review. See
 the screenshot above for the visual changes. Here's a technical summary
 (roughly in the sequence of the patch, top-to-bottom):
 - Rename customizer JS files to `customize-preview.js` and `customize-
 controls.js` to align with the core file naming and make it clearer where
 each file runs.
 - Only show the `colorscheme_hue` control when there's a custom color
 scheme.
 - Update preview JS handling for revised front page section handling, see
 below.
 - Remove all references to "Theme Customizer" in code comments.
 [https://make.wordpress.org/core/2014/07/08/customizer-improvements-
 in-4-0/ It hasn't been called that since before 4.0].
 - Clarify the purpose of the JS files by updated the code comments in the
 file headers.
 - DRY for the front page section JS.
 - DRY for registering front page sections. Unify and simplify the
 corresponding loops used for front page section output.
 - Make the arbitrary number of front page sections filterable, for UI
 registration and output.
 - Add selective refresh for widgets.
 - Rename the page layout section to "Layout", so that child themes and
 plugins can add additional options that are relevantly grouped (see also
 Twenty Eleven).
 - Rename `twentyseventeen_sanitize_layout` to
 `twentyseventeen_sanitize_page_layout` to be clearer about what it
 sanitizes in case child themes or plugins consider reusing it.
 - Rename `page_options` setting/control to `page_layout` as that's more
 reflective of what that option does; and again, helps for potential
 extensions.
 - Make the page layout option contextual to pages and the sidebar being
 inactive, as the option only applies when there is no sidebar (per its
 description).
 - Remove the generic "Theme Options" panel. Per the official documentation
 (within a `strong`), themes should avoid adding panels. There is no need
 to group multiple sections into a context here, because:
 - Condense front page panel controls into a single section. Per the
 documentation, sections should generally contain multiple controls. The
 purpose of sections is to group multiple, related controls together. These
 controls all serve the same purpose, so they should be shown within a
 single section. This also makes it clearer within the controls pane how
 the different sections relate to each other.
 - Place the "Front Page Sections" section directly after the static front
 page section, since they're related.
 - Integrate with the ability to create pages from a dropdown-pages control
 in #38164.
 - Add selective refresh for front page sections. This allows them to be
 previewed much more quickly and without losing context. This also brings
 "shift-click to edit" functionality, and soon visible edit icons via
 #27403. This required some minor restructuring on the output side but
 visitors should still see the same results. There is now a template tag
 for displaying a front page section.
 - Locate `active_callback` functions within `customizer.php` so that
 they're easier to find when editing customizer registrations, similarly to
 sanitize callbacks.
 - Remove the fancy borders styling for front page sections in the preview.
 This prevents users from previewing an accurate representation of the
 design within the customizer, and seems like something that's intended to
 be on the frontend as a design element. Visual edit icons should provide a
 nice alternative.
 - Adjust the styling for placeholders for panels that aren't active. Show
 the placeholders when the front page section is expanded. This shows the
 placeholder title (which feels more native to the theme design) and an
 edit icon when appropriate, but hides the placeholders when not explicitly
 working on the front page sections. This also allows us to simplify the
 CSS and improve readability there.

 I imagine we'll need a bit of back and forth to finalize the various
 points here, but looking at the changes collectively, the resulting
 experience is more inline with core recommendations for both users and
 developers.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38426#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform