IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve/introduce Customizer JavaScript models for Controls, Sections, and Panels.

Browse Source 
* Introduce models for panels and sections.
* Introduce API to expand and focus a control, section or panel.
* Allow deep-linking to panels, sections, and controls inside of the Customizer.
* Clean up `accordion.js`, removing all Customizer-specific logic.
* Add initial unit tests for `wp.customize.Class` in `customize-base.js`.

https://make.wordpress.org/core/2014/10/27/toward-a-complete-javascript-api-for-the-customizer/ provides an overview of how to use the JavaScript API.

props westonruter, celloexpressions, ryankienstra.
see #28032, #28579, #28580, #28650, #28709, #29758.
fixes #29529.


Built from https://develop.svn.wordpress.org/trunk@30102


git-svn-id: http://core.svn.wordpress.org/trunk@30102 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling
2014-10-29 22:51:22 +00:00
parent 63cf4db8ae
commit 3c962ee5d8
15 changed files with 1387 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
wp-admin/customize.php
View File

@@ -53,8 +53,6 @@ do_action( 'customize_controls_init' );
wp_enqueue_script( 'customize-controls' );
wp_enqueue_style( 'customize-controls' );
wp_enqueue_script( 'accordion' );
/**
* Enqueue Customizer control scripts.
*
@@ -130,7 +128,7 @@ do_action( 'customize_controls_print_scripts' );
?>
<div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
<div class="wp-full-overlay-sidebar-content accordion-container" tabindex="-1">
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
<div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
<div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
<span class="preview-notice"><?php
@@ -160,13 +158,9 @@ do_action( 'customize_controls_print_scripts' );
<?php endif; ?>
</div>
<div id="customize-theme-controls"><ul>
<?php
foreach ( $wp_customize->containers() as $container ) {
$container->maybe_render();
}
?>
</ul></div>
<div id="customize-theme-controls">
<ul><?php // Panels and sections are managed here via JavaScript ?></ul>
</div>
</div>
</div>
@@ -252,10 +246,13 @@ do_action( 'customize_controls_print_scripts' );
),
'settings' => array(),
'controls' => array(),
'panels' => array(),
'sections' => array(),
'nonce' => array(
'save' => wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() ),
'preview' => wp_create_nonce( 'preview-customize_' . $wp_customize->get_stylesheet() )
),
'autofocus' => array(),
);
// Prepare Customize Setting objects to pass to Javascript.
@@ -266,10 +263,32 @@ do_action( 'customize_controls_print_scripts' );
);
}
// Prepare Customize Control objects to pass to Javascript.
// Prepare Customize Control objects to pass to JavaScript.
foreach ( $wp_customize->controls() as $id => $control ) {
$control->to_json();
$settings['controls'][ $id ] = $control->json;
$settings['controls'][ $id ] = $control->json();
}
// Prepare Customize Section objects to pass to JavaScript.
foreach ( $wp_customize->sections() as $id => $section ) {
$settings['sections'][ $id ] = $section->json();
}
// Prepare Customize Panel objects to pass to JavaScript.
foreach ( $wp_customize->panels() as $id => $panel ) {
$settings['panels'][ $id ] = $panel->json();
foreach ( $panel->sections as $section_id => $section ) {
$settings['sections'][ $section_id ] = $section->json();
}
}
// Pass to frontend the Customizer construct being deeplinked
if ( isset( $_GET['autofocus'] ) && is_array( $_GET['autofocus'] ) ) {
$autofocus = wp_unslash( $_GET['autofocus'] );
foreach ( $autofocus as $type => $id ) {
if ( isset( $settings[ $type . 's' ][ $id ] ) ) {
$settings['autofocus'][ $type ] = $id;
}
}
}
?>