<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27907] trunk/src: Widget Customizer: Improve plugin compatibility.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27907">27907</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2014-04-02 17:03:14 +0000 (Wed, 02 Apr 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Widget Customizer: Improve plugin compatibility.
Some plugins are using custom scripts and styles for there widgets. These are available on the Widgets screens, but not in the Customizer yet.
Scripts and styles can be enqueued via:
* `admin_enqueue_scripts`
* `admin_print_scripts` and `admin_print_scripts-widgets.php`
* `admin_print_styles` and `admin_print_styles-widgets.php`
* `admin_print_footer_scripts` and `admin_footer-widgets.php`
All this hooks are now called in the Customizer too.
Previously we have add the `#widgets-right` ID to a container div via jQuery. Remember: `#widgets-right` exists on the Widgets screen and is used by many plugins to do event delegation from that element.
But since our script files are loaded in the footer, the JavaScript way is a bit late for some plugins.
We have decided to add a `div#widgets-right` container element to customizer. "Less hacky hack."
props westonruter, ocean90. Thanks dpe415 for testing.
fixes <a href="http://core.trac.wordpress.org/ticket/27619">#27619</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizewidgetsphp">trunk/src/wp-includes/class-wp-customize-widgets.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincustomizephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/customize.php (27906 => 27907)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/customize.php 2014-04-02 13:12:28 UTC (rev 27906)
+++ trunk/src/wp-admin/customize.php 2014-04-02 17:03:14 UTC (rev 27907)
</span><span class="lines">@@ -118,6 +118,7 @@
</span><span class="cx"> $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
</span><span class="cx"> ?>
</span><span class="cx">
</span><ins>+ <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 -->
</ins><span class="cx"> <div class="wp-full-overlay-sidebar-content accordion-container" tabindex="-1">
</span><span class="cx"> <div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
</span><span class="cx"> <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
</span><span class="lines">@@ -146,6 +147,7 @@
</span><span class="cx"> ?>
</span><span class="cx"> </ul></div>
</span><span class="cx"> </div>
</span><ins>+ </div>
</ins><span class="cx">
</span><span class="cx"> <div id="customize-footer-actions" class="wp-full-overlay-footer">
</span><span class="cx"> <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/customize-widgets.js (27906 => 27907)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/customize-widgets.js 2014-04-02 13:12:28 UTC (rev 27906)
+++ trunk/src/wp-admin/js/customize-widgets.js 2014-04-02 17:03:14 UTC (rev 27907)
</span><span class="lines">@@ -35,10 +35,6 @@
</span><span class="cx"> window.ajaxurl = wp.ajax.settings.url;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Unfortunately 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
- $( '#customize-theme-controls' ).closest( 'div:not([id])' ).attr( 'id', 'widgets-right' );
-
</del><span class="cx"> /**
</span><span class="cx"> * Set up model
</span><span class="cx"> */
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizewidgetsphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/class-wp-customize-widgets.php (27906 => 27907)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/class-wp-customize-widgets.php 2014-04-02 13:12:28 UTC (rev 27906)
+++ trunk/src/wp-includes/class-wp-customize-widgets.php 2014-04-02 17:03:14 UTC (rev 27907)
</span><span class="lines">@@ -74,7 +74,10 @@
</span><span class="cx"> add_action( 'after_setup_theme', array( $this, 'setup_widget_addition_previews' ) );
</span><span class="cx"> add_action( 'customize_controls_init', array( $this, 'customize_controls_init' ) );
</span><span class="cx"> add_action( 'customize_register', array( $this, 'schedule_customize_register' ), 1 );
</span><del>- add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_deps' ) );
</del><ins>+ add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+ add_action( 'customize_controls_print_styles', array( $this, 'print_styles' ) );
+ add_action( 'customize_controls_print_scripts', array( $this, 'print_scripts' ) );
+ add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_footer_scripts' ) );
</ins><span class="cx"> add_action( 'customize_controls_print_footer_scripts', array( $this, 'output_widget_control_templates' ) );
</span><span class="cx"> add_action( 'customize_preview_init', array( $this, 'customize_preview_init' ) );
</span><span class="cx">
</span><span class="lines">@@ -533,15 +536,48 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * Call admin_print_styles-widgets.php and admin_print_styles hooks to
+ * allow custom styles from plugins.
+ *
+ * @since 3.9.0
+ * @access public
+ */
+ public function print_styles() {
+ /** This action is documented in wp-admin/admin-header.php */
+ do_action( 'admin_print_styles-widgets.php' );
+
+ /** This action is documented in wp-admin/admin-header.php */
+ do_action( 'admin_print_styles' );
+ }
+
+ /**
+ * Call admin_print_scripts-widgets.php and admin_print_scripts hooks to
+ * allow custom scripts from plugins.
+ *
+ * @since 3.9.0
+ * @access public
+ */
+ public function print_scripts() {
+ /** This action is documented in wp-admin/admin-header.php */
+ do_action( 'admin_print_scripts-widgets.php' );
+
+ /** This action is documented in wp-admin/admin-header.php */
+ do_action( 'admin_print_scripts' );
+ }
+
+ /**
</ins><span class="cx"> * Enqueue scripts and styles for customizer panel and export data to JavaScript.
</span><span class="cx"> *
</span><span class="cx"> * @since 3.9.0
</span><span class="cx"> * @access public
</span><span class="cx"> */
</span><del>- public function customize_controls_enqueue_deps() {
</del><ins>+ public function enqueue_scripts() {
</ins><span class="cx"> wp_enqueue_style( 'customize-widgets' );
</span><span class="cx"> wp_enqueue_script( 'customize-widgets' );
</span><span class="cx">
</span><ins>+ /** This action is documented in wp-admin/admin-header.php */
+ do_action( 'admin_enqueue_scripts', 'widgets.php' );
+
</ins><span class="cx"> /*
</span><span class="cx"> * Export available widgets with control_tpl removed from model
</span><span class="cx"> * since plugins need templates to be in the DOM.
</span><span class="lines">@@ -642,6 +678,21 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * Call admin_print_footer_scripts and admin_print_scripts hooks to
+ * allow custom scripts from plugins.
+ *
+ * @since 3.9.0
+ * @access public
+ */
+ public function print_footer_scripts() {
+ /** This action is documented in wp-admin/admin-footer.php */
+ do_action( 'admin_print_footer_scripts' );
+
+ /** This action is documented in wp-admin/admin-footer.php */
+ do_action( 'admin_footer-widgets.php' );
+ }
+
+ /**
</ins><span class="cx"> * Get common arguments to supply when constructing a Customizer setting.
</span><span class="cx"> *
</span><span class="cx"> * @since 3.9.0
</span></span></pre>
</div>
</div>
</body>
</html>