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.
- How do I build custom Panels, sections and controls using the JS API?
- How do I dynamically add sections?
- Will backbone & underscore be replaced with react and other components?