Customizer JS API dynamically add sections and controls

Question

Customizer JS API logic

I will have a frame with a collection of panels. One of those panels will preview a collection of dynamic sections. By default this panel will have one section. There will be controls to add, remove and rearrange sections. When a section is created it will have two default controls, section title and section layout. Section layout will dynamically create new controls to edit the preview of that section.

Real Word Example.

• A Panel will be call ‘testimonials’ .
• When that panel is opened it will have one default section ‘Testimonial Section (1)’
• There will be controlls to add, remove and rearrange sections. ‘testimonial two, testimonial three…’

• When a section is opened there will be two default controls.

  • Section name: will name the section and its menu accordingly.
  • Section layout: a selector that will activate and deactivate controlls and choose a layout for the preview for that section.
  • Once a section layout is selected basic conrols such as upload image or gallery, color select and multiple input fields will activate.

• The preview will contain all the sections in the same priority as the sections menu.

I have read the handbook on Customizer JS API, looked through core development post and the post Customizer plugin. Wordpress has ADVISED TO USE ONLY JS API when building a Customizer to ensure it is future proof. I understand they have removed the PHP and using only JS so I have a few questions.

1. How do I build custom Panels, sections and controls using the JS API?
2. How do I dynamically add sections?
3. Will backbone & underscore be replaced with react and other components?

Answer 1

What you are looking for here is already 80% available already, if you use the Customize Posts plugin and enable the Testimonials content type in Jetpack. Sections for testimonial posts can be listed in a Testimonials panel, in addition to a Select2 to jump to one:

And then when expanding the testimonial section there are fields for the name and featured image and others:

You'll note that there is currently a lack of a “order” field. For that, you'll want to follow:

• Add menu order setting and control for pages
• Allow pages to be re-ordered by drag-and-drop on page Customizer sections

Also, you'll note that the panel does not show all of the posts of that type when it is expanded. Sections are currently added as they appear in the preview or as they are added via the Select2 dropdown. For listing all posts, you can follow List all posts of a given post type in the section.

As for adding custom fields to a custom post type, such as extending the Jetpack Testimonials, you could refer to the examples of adding postmeta in Customize Posts (featured image and page template) or you could look at this new standalone example (which is still rough and needs to be refined).