[wp-trac] [WordPress Trac] #28709: Improve/introduce Customizer JS models for Controls, Sections, and Panels

[WordPress Trac]

#28709: Improve/introduce Customizer JS models for Controls, Sections, and Panels
-------------------------+-------------------------
 Reporter:  westonruter  |       Owner:
     Type:  enhancement  |      Status:  new
 Priority:  high         |   Milestone:  4.1
Component:  Customize    |     Version:
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:  javascript
-------------------------+-------------------------

Comment (by westonruter):

 In [attachment:28709.wip.2.diff]:

 Watch changes to controls/sections/panels and reflow

  * Add `active` state to panels and sections, as with controls
  * Add `toggle()` method to panels and sections, as with controls
  * Invoke `toggle()` when a panel/section `active` state changes
  * Allow `WP_Customize_Panel` and `WP_Customize_Section` subclasses to
 specify a distinct `type`, and be able to associate them with custom
 constructors in JS, just as with `WP_Customize_Control`.

 Examples:

 Automatically collapse the header_image section when its only control is
 inactive
 {{{
 wp.customize.control( 'header_image' ).active.set( false )
 }}}

 Move the header_image control into the background_image section:
 {{{
 wp.customize.control('header_image').section( 'background_image' )
 }}}

 Move the background_image section to the end of the Customizer pane:
 {{{
 wp.customize.section('background_image').priority( 10000 )
 }}}

 This should result in the colors section and wigets panel being hidden,
 but it's not sticking right now:
 {{{
 wp.customize.section( 'colors' ).active( false )
 wp.customize.panel( 'widgets' ).active( false )
 }}}

 Need to implement `Panel.focus()`, `Section.focus()`, and
 `Control.focus()` which can be used by deep-linking. Widgets should be
 updated to use this as well. Widgets should perhaps use the `priority()`
 state to specify the ordering of widget form controls when dragging them
 into a new order.

 Still need to merge accordion logic into the Customizer controls.

 This implements the JS API for the `active_callback` in Panels and
 Sections (#29758). The PHP side needs to be hooked up.

 Additionally, the Customizer preview should `postMessage` the panels,
 sections, controls that it expects up to the Customizer pane and they can
 be created on demand. This would be lazy-loading (#28580).

 celloexpressions, regarding your first-pass feedback:

 > Remove all customizer-specific logic from accordion.js, in favor of
 open/closing/state functions internally (ie, stop using accordion.js in
 the Customizer). Also with the thought that we may move away from using an
 accordion for sections sooner rather than later. This would also
 facilitate deep-linking.

 Still need to do this, but we can nicely organize the logic into the
 `Panel` and `Section` models now.

 > Support for deep-linking, or a logical way that that would be
 implemented once this initial API is in, coordinating with the
 expanding/collapsing of sections.

 Stubbed out. The `focus()` methods I think will serve well here, and then
 in the Customizer initializer/bootstrap we can look for a query param for
 a panel/section/control to focus on, and then call the `focus` method on
 that item.

 > JS-side support for contextual sections and panels (or a logical way to
 add that), I already did the PHP side on #29758.

 Added.

 celloexpressions: Regarding your feedback for things which should wait for
 a future release:

 > Rendering all sections and panels from JS by default.

 Take a look. They're all getting rendered with JS now.

 > Changes to how custom sections and panels work in PHP.

 I followed the same pattern for custom sections/panels as was already done
 for controls. It's actually a pretty low footprint.

 > I'm thinking it might be best to avoid significant changes to the
 control models for now, other than the ability to associate them with
 sections in some way, so that we can scope this appropriately for 4.1 and
 start building off of it.

 There aren't too many changes to the control model, aside from the
 addition of an `embed` method and the `container`, `priority`, and
 `section` properties. And of course that the controls are all added via JS
 now.

 Let me know what you think! Feel free to submit tweaks to my PR on GitHub:
 https://github.com/xwpco/wordpress-develop/pull/29

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