Last active
January 18, 2018 00:30
-
-
Save westonruter/3a51a10013cd58367689201b69eb8fcd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article id="post-23812" class="post post-23812 type-post status-publish format-standard hentry category-general tag-4-9 tag-customize tag-dev-notes mentions-aquakitty mentions-dlh author-westonruter"> | |
| <div class="o2-post"> | |
| <header class="entry-header"> | |
| <div class="entry-meta"> | |
| <a href="https://profiles.wordpress.org/westonruter" class="author-avatar "> | |
| <img src="https://gravatar.com/avatar/bb16e7904f2f335b6c9f524cc533d2d2?d=mystery" width="48" height="48" class="avatar grav-hashed" id="grav-bb16e7904f2f335b6c9f524cc533d2d2-0" scale="0"> | |
| </a> | |
| <a href="https://profiles.wordpress.org/westonruter" title="Posts by Weston Ruter (@westonruter)" class="entry-author "> | |
| Weston Ruter | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/" class="entry-date" data-compact-allowed="true" title="11:19 am (-07:00) on November 1, 2017">11:19 am on November 1, 2017</a> | |
| <nav class="o2-dropdown-actions o2-post-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis"><span>Post Actions</span></button><ul><li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/" title="Scroll to comments" class="o2-scroll-to-comments genericon genericon-downarrow" data-action="scrolltocomments" data-actionstate="default">Scroll</a></li><li><a href="https://make.wordpress.org/core/wp-admin/post.php?post=23812&action=edit" title="Edit" rel="23812" class="edit-post-link o2-edit genericon genericon-edit" data-action="edit" data-actionstate="default">Edit</a></li><li><a href="https://make.wordpress.org/core/?p=23812" title="Shortlink" class="short-link o2-short-link genericon genericon-link" data-action="shortlink" data-actionstate="default">Shortlink</a></li><li><a href="#" title="Stick post to home" class="o2-sticky-link genericon genericon-pinned" data-action="stickyposts" data-actionstate="normal">Stick post to home</a></li><li><a href="https://make.wordpress.org/core/wp-admin/post.php?post=23812&action=trash&_wpnonce=aa97187a12" title="Trash" rel="23812" class="trash-post-link o2-trash o2-actions-border-top o2-warning-hover genericon genericon-trash" data-action="trash" data-actionstate="default">Trash</a></li></ul></nav> | |
| </div> | |
| <h1 class="entry-title" style="display: block;"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/">Improvements to the Customize JS API in 4.9</a> | |
| </h1> | |
| </header> | |
| <div class="entry-content"> | |
| <p>There are many user-facing Customizer improvements in 4.9, including: drafting/scheduling of changesets, autosave revisions, changeset post locking, frontend public previews, a new experience for browsing and installing themes, updated nav menu creation UX, and the code editing improvements for the Custom HTML widget and Additional CSS. <em>But</em> in addition to all of these, there are also many improvements for developers which will make extending the Customizer much more pleasant.</p> | |
| <p>Something important to remember about the Customizer is that it is a single page application that is powered by JavaScript. Many developers may only interact with the PHP API for registering controls, settings, sections, panels, and partials. But controls, sections, and panels do not need to be registered in PHP at all. The PHP API for registration is essentially a wrapper for the underlying JS API. When you load the Customizer all of the params for the PHP-registered constructs are exported to the client for the JavaScript API to instantiate and initially add to the UI, but this JS API can dynamically instantiate additional constructs at any time thereafter in a Customizer session. This is how new widgets, nav menus, and nav menu items are added without requiring the entire Customizer to reload. You can also avoid statically registering settings and partials in PHP by instead adding filters to dynamically recognize settings and partials, allowing them to be registered on demand. All of this allows the Customizer application to scale out to be able to customize and preview an unlimited number of things on a site (e.g. any post or page with their postmeta in the <a href="https://wordpress.org/plugins/customize-posts/">Customize Posts</a> feature plugin). The point here is that in order for the Customizer to scale, the JavaScript API must be used directly. So this is why the Customizer JS API improvements in 4.9 are important as they fix many longstanding annoyances and shortcomings with the JS API.</p> | |
| <p>This dev note contains the following sections:</p> | |
| <ul> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#elimination-of-repeated-id-when-adding-constructs">Elimination of Repeated ID when Adding Constructs</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#flattened-constructor-parameters">Flattened Constructor Parameters</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#default-parameters">Default Parameters</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#passing-settings-when-instantiating-controls">Passing Settings when Instantiating Controls</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#control-templates">Control Templates</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#date-time-control">Date/Time Control</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#new-utility-methods">New Utility Methods</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#updates-to-changeset-update-requests">Updates to Changeset Update Requests</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#discontinued-customize-loader-in-core">Discontinued Customize Loader in Core</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#outer-sections">Outer Sections</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#notification-improvements">Notification Improvements</a></li> | |
| <li><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#read-more">Read More</a></li> | |
| </ul> | |
| <p><span id="more-23812"></span></p> | |
| <h2 id="elimination-of-repeated-id-when-adding-constructs">Elimination of Repeated ID when Adding Constructs</h2> | |
| <p>Previously in the Customizer when you wanted to add a new construct dynamically you would need to pass the ID into the constructor itself and then pass the ID in when adding it to a collection as well. This was unfortunate as it required keeping multiple references to the same ID in sync, for example:</p> | |
| <pre>/* Before WordPress 4.9 */ | |
| wp.customize.control.add( | |
| 'foo', | |
| new wp.customize.Control( 'foo', { /* … */ } ) | |
| );</pre> | |
| <p>Or to store the identifier in a variable to re-use, as the two should never differ:</p> | |
| <pre>/* Before WordPress 4.9 */ | |
| var code = 'too_short'; | |
| wp.customize.control( 'blogname' ).notifications.add( | |
| code, | |
| new wp.customize.Notification( code, { | |
| message: 'Site title too short.' | |
| } ) | |
| );</pre> | |
| <p>In 4.9 this is no longer required, as the ID will be automatically read from the object being passed to the <code>add</code> method. So now you can simply do:</p> | |
| <pre>/* Since WordPress 4.9 */ | |
| wp.customize.control.add( | |
| new wp.customize.Control( 'foo', { /* … */ } ) | |
| );</pre> | |
| <p>And:</p> | |
| <pre>/* Since WordPress 4.9 */ | |
| wp.customize.control( 'blogname' ).notifications.add( | |
| new wp.customize.Notification( 'too_short', { | |
| message: 'Site title too short.' | |
| } ) | |
| );</pre> | |
| <p>Naturally the change here to the <code>add</code> method is backwards-compatible, and existing code that passes an ID as the first argument will still continue to work.</p> | |
| <h2 id="flattened-constructor-parameters">Flattened Constructor Parameters</h2> | |
| <p>When creating a setting in JavaScript, the supplied options argument is simply a 1-level deep object:</p> | |
| <pre>var setting = new wp.customize.Setting( 'foo', value, { | |
| transport: 'postMessage', | |
| /* ... */ | |
| } );</pre> | |
| <p>However, when constructing something else—controls, sections, panels, or partials—the supplied options object required the properties to be wrapped in an intermediary <code>params</code> property like this:</p> | |
| <pre>/* Before WordPress 4.9 */ | |
| var control = new wp.customize.Control( 'bar', { | |
| params: { | |
| section: 'title_tagline' | |
| /* ... */ | |
| } | |
| } );</pre> | |
| <p>This was annoying and the <code>params</code> property has been unwrapped to allow you to pass the props in the root <code>options</code> object:</p> | |
| <pre>/* Since WordPress 4.9 */ | |
| var control = new wp.customize.Control( 'bar', { | |
| section: 'title_tagline' | |
| /* ... */ | |
| } );</pre> | |
| <p>Backwards compatibility is maintained, so existing code that passes props via <code>options.params</code> will continue to be read from first, and then fall back to the new unwrapped <code>options</code> for props. The <code>options.params</code> property is soft-deprecated in 4.9 (using it will raise no warning) but it may be hard-deprecated in the future.</p> | |
| <h2 id="default-parameters">Default Parameters</h2> | |
| <p>Another longstanding annoyance with adding constructs in the Customizer is that there was a lack of parameter defaults. When creating a Color control, for example, the following is the minimum required prior to 4.9:</p> | |
| <pre>/* Before WordPress 4.9 */ | |
| var control = new wp.customize.ColorControl( 'favorite_color', { | |
| params: { | |
| type: 'color', | |
| content: '<li class="customize-control customize-control-color"></li>', | |
| priority: 10, | |
| active: true, | |
| section: 'colors', | |
| label: 'Favorite Color', | |
| settings: { 'default': 'favorite_color' }, | |
| } | |
| } ); | |
| wp.customize.control.add( 'favorite_color', control );</pre> | |
| <p>This is a lot of code, considering that in PHP all that a user would have to do is:</p> | |
| <pre>$control = new WP_Customize_Color_Control( $wp_customize, 'favorite_color', array( | |
| 'section' => 'colors', | |
| 'label' =>'Favorite Color', | |
| 'settings' => array( 'default' => 'favorite_color' ), | |
| ) ); | |
| $wp_customize->add_control( $control );</pre> | |
| <p>The <code>type</code>, <code>content</code>, <code>priority</code>, and <code>active</code> properties have defaults in PHP and so too they should have defaults in JS. And now they do. Creating a Color control in JS, combined with the flattening of <code>params</code> above, is now just:</p> | |
| <pre>/* Since WordPress 4.9 */ | |
| var control = new wp.customize.ColorControl( 'favorite_color', { | |
| section: 'colors', | |
| label: 'Favorite Color', | |
| settings: { 'default': 'favorite_color' }, | |
| } ); | |
| wp.customize.control.add( control );</pre> | |
| <p>So creating controls in JS is now pretty much identical to creating them in PHP, aside from the differences in syntax.</p> | |
| <p>Beyond controls, defaults are also available for settings, sections, panels, and partials. For settings, defaults are provided for <code>transport</code> (refresh) and <code>previewer</code> (which should never vary):</p> | |
| <pre>/* Before WordPress 4.9 */ | |
| var setting = new wp.customize.Setting( 'favorite_color', '#000000', { | |
| transport: 'refresh', | |
| previewer: wp.customize.previewer | |
| } ); | |
| wp.customize.add( 'favorite_color', setting );</pre> | |
| <pre>/* Since WordPress 4.9 */ | |
| var setting = new wp.customize.Setting( 'favorite_color', '#000000' ); | |
| wp.customize.add( setting );</pre> | |
| <p>On all constructs (controls, settings, panels, sections, partials) there is a <code>defaults</code> property on their function prototypes which contains the default params. This can be leveraged to add new defaults to subclasses, in addition to any extended methods. For example:</p> | |
| <pre>var ColorSetting = wp.customize.Setting.extend({ | |
| defaults: _.extend( | |
| {}, | |
| wp.customize.Setting.prototype.defaults, | |
| { | |
| transport: 'postMessage' | |
| } | |
| ), | |
| validate: function( value ) { | |
| var setting = this, validatedValue; | |
| validatedValue = wp.customize.Setting.prototype.validate.call( setting, value ); | |
| if ( null === validatedValue ) { | |
| return validatedValue; | |
| } | |
| if ( /^#\d{6}$/.test( validatedValue ) ) { | |
| setting.notifications.remove( 'invalid_color' ); | |
| } else { | |
| setting.notifications.add( new wp.customize.Notification( 'invalid_color', { | |
| message: 'Bad color format' | |
| } ) ); | |
| } | |
| return validatedValue; | |
| } | |
| });</pre> | |
| <p>When this <code>ColorSetting</code> is instantiated, the <code>transport</code> of <code>postMessage</code> will not need to be explicitly provided each time.</p> | |
| <h2 id="passing-settings-when-instantiating-controls">Passing Settings when Instantiating Controls</h2> | |
| <p>When instantiating controls in JS prior to 4.9, you had to pass <code>settings</code> as an object mapping a setting key to the setting ID. For example, to add a control for manipulating the site title, you would do:</p> | |
| <pre>var blognameControl = new wp.customize.Control( 'blogname2', { | |
| /* ... */ | |
| settings: { | |
| 'default': 'blogname' | |
| } | |
| } );</pre> | |
| <p>If a control is manipulating multiple settings, then the keys for the <code>settings</code> object will get additional values:</p> | |
| <pre>var bgPositionControl = new wp.customize.BackgroundPositionControl( 'mobile_bg_position', { | |
| /* ... */ | |
| settings: { | |
| x: 'mobile_background_position_x', | |
| y: 'mobile_background_position_y' | |
| } | |
| } );</pre> | |
| <p>The <code>settings</code> object here is really just indicating which settings the control depends on, so that it can defer initialization until all of the settings are created. Prior to 4.9, the keys served no purpose other than to give a symbolic reference to a given setting. When a <code>default</code> setting is used, then it also can be accessed directly via a <code>setting</code> shortcut. For example:</p> | |
| <pre>var xValue = bgPositionControl.settings.x.get(); | |
| var title = blognameControl.settings['default'].get(); | |
| var title2 = blognameControl.setting.get();</pre> | |
| <p>In 4.9, the way <code>settings</code> are passed to controls is getting revamped. Additionally, the symbolic keys supplied for the settings are now more useful in that they can be used to create input element links.</p> | |
| <p>First of all, if you have a control that just takes one setting, you can now just pass a single <code>setting</code>:</p> | |
| <pre>var control = new wp.customize.Control( 'blogname2', { | |
| /* ... */ | |
| setting: 'blogname' | |
| } );</pre> | |
| <p>Additionally, just as with partials you can pass <code>settings</code> as an array (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/36167">#36167</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/36167">Improve alignment between settings params between Customizer Controls and Partials</a></h4><span class="subtitle">Ticket #36167</span><div class="description"><p>In #27355, the concept of a `Partial` was introduced and is analogous to a `Control` in many ways, particularly in that it an object associated with one or more settings. A control is instantiated in JS like:</p> | |
| <p>{{{#!js<br> | |
| var control = new wp.customiz […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:24 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.6</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/36167">Improve alignment between settings params between Customizer Controls and Partials</a></h4><span class="subtitle">Ticket #36167</span><div class="description"><p>In #27355, the concept of a `Partial` was introduced and is analogous to a `Control` in many ways, particularly in that it an object associated with one or more settings. A control is instantiated in JS like:</p> | |
| <p>{{{#!js<br> | |
| var control = new wp.customiz […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:24 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.6</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>), where the first item then becomes the <code>default</code>.</p> | |
| <p>Furthermore, instead of passing a setting’s string ID you can now pass an existing <code>Setting</code> object, promoting better encapsulation (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/37964" class="nocard">#37964</a></span>):</p> | |
| <pre>var control = new wp.customize.Control( 'blogname2', { | |
| /* ... */ | |
| setting: wp.customize( 'blogname' ) | |
| } );</pre> | |
| <p>Where this gets particularly important is that you can also pass <code>Value</code> instances as settings instead of registering a <code>Setting</code>, which would then attempt to get saved in the changeset (and fail as being unrecognized, without static of dynamic server-side registration). In other words, a control (view) can be supplied a model which is either a <code>Setting</code> or a <code>Value</code> (and the former is a subclass of the latter). This is how the controls for the changeset status and date are constructed. For example, to create a control which manages the sidebar width, one could do (which also shows how to add a control to the new Publish Settings section):</p> | |
| <pre>wp.customize.control.add( new wp.customize.Control( 'pane_width', { | |
| type: 'number', | |
| section: 'publish_settings', | |
| setting: new wp.customize.Value( 300 ), | |
| label: 'Pane Width', | |
| priority: 110, | |
| input_attrs: { | |
| min: 150, | |
| max: 1000 | |
| } | |
| } ) );</pre> | |
| <p>A plugin could then listen for changes to that control’s <code>setting</code> model to then perhaps store the value in <code>localStorage</code> to persist the user preference for how wide they want their sidebar to be. Being able to construct controls with <code>Value</code> models is a next iteration beyond <a href="https://make.wordpress.org/core/2016/03/10/customizer-improvements-in-4-5/">setting-less controls</a> introduced in 4.5.</p> | |
| <p>Prior to 4.9, in spite of having these symbolic references to a control’s settings the control’s content would require the actual setting ID to be used in any input element links (the bidirectional data binding between a control’s setting and input). For example, the site title control has a <code>default</code> setting pointing to <code>blogname</code>, but in spite of this, the content for the control would contain:</p> | |
| <pre><input type="text" data-customize-setting-link="blogname"></pre> | |
| <p>The fact that <code>data-customize-setting-link</code> required an actual setting ID to be used as its value made it difficult to create reusable control templates. This now has been improved in 4.9 by allowing the setting keys to be used in <code>data-customize-setting-key-link</code> attributes:</p> | |
| <pre><input type="text" data-customize-setting-key-link="default"></pre> | |
| <p>The <code>WP_Customize_Control::get_link()</code> PHP method has been updated to output a <code>data-customize-setting-key-link</code> attribute with the supplied setting key as its value when the associated setting does not exist. Otherwise, it maintains its prior behavior of using the setting ID as the value for a <code>data-customize-setting-link</code> attribute. The JS logic responsible for linking inputs with settings via elements is now contained in a new <code>linkElements</code> method on <code>Control</code>.</p> | |
| <h2 id="control-templates">Control Templates</h2> | |
| <p>Refer back to the “Pane Width” example above where a type of <code>number</code> was supplied when constructing a base <code>wp.customize.Control</code> class. This would not work prior to 4.9 because there were no content templates defined for base control types. This is no longer the case with the resolution of <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/30738">#30738</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30738">JS content templates for base WP_Customize_Control</a></h4><span class="subtitle">Ticket #30738</span><div class="description"><p>This will make it possible to create all of the base Customizer control types directly in JS, and will allow them to share a single template passed from the server on Customizer init for all controls with the basic types (following up on #28709).</p> | |
| <p> […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:23 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.1</span><span class="single-meta">Status: accepted</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30738">JS content templates for base WP_Customize_Control</a></h4><span class="subtitle">Ticket #30738</span><div class="description"><p>This will make it possible to create all of the base Customizer control types directly in JS, and will allow them to share a single template passed from the server on Customizer init for all controls with the basic types (following up on #28709).</p> | |
| <p> […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:23 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.1</span><span class="single-meta">Status: accepted</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>. If you construct a control and supply a <code>type</code> param that corresponds to an HTML5 input type, then the default control template will be used to render the control. Note that for color inputs, one should use the dedicated <code>ColorControl</code>.</p> | |
| <p>A control’s template is normally derived by its <code>type</code>; for instance, a Background Position control has a type of <code>background_position</code> and then has a <code>wp.template</code> ID of <code>customize-control-background_position-content</code>. The template is normally output by a control’s <code>WP_Customize_Control::content_template()</code> template after the control has been registered via <code>WP_Customize_Manager::register_control_type()</code>. In 4.9 however, this can all be bypassed as controls now understand a <code>templateId</code> param.</p> | |
| <p>An example of supplying an ad hoc <code>templateId</code> when constructing a control can be <a href="https://github.com/WordPress/wordpress-develop/blob/15f74e83fa0e9844b8689fb7ae821779a96bdf7b/src/wp-admin/js/customize-controls.js#L7200-L7208">seen</a> in the changeset status control, where it overrides the template used for this one radio control instance:</p> | |
| <pre>var statusControl = new api.Control( 'changeset_status', { | |
| priority: 10, | |
| type: 'radio', | |
| section: 'publish_settings', | |
| setting: api.state( 'selectedChangesetStatus' ), | |
| templateId: 'customize-selected-changeset-status-control', | |
| label: api.l10n.action, | |
| choices: api.settings.changeset.statusChoices | |
| } ); | |
| api.control.add( statusControl );</pre> | |
| <p>Alternatively, if you have a custom control that you always want to have a specific template (as when calling <code>WP_Customize_Manager::register_control_type()</code> in PHP), you can now do this entirely in JS by adding <code>templateId</code> to the control subclass’s <code>defaults</code>, as can be <a href="https://github.com/WordPress/wordpress-develop/blob/15f74e83fa0e9844b8689fb7ae821779a96bdf7b/src/wp-admin/js/customize-controls.js#L5859-L5871">seen</a> in the <code>PreviewLinkControl</code>:</p> | |
| <pre>var PreviewLinkControl = api.Control.extend({ | |
| defaults: _.extend( | |
| {}, | |
| api.Control.prototype.defaults, | |
| { | |
| templateId: 'customize-preview-link-control' | |
| } | |
| ) | |
| /* ... */ | |
| });</pre> | |
| <p>For some more examples, see <a href="https://wordpress.stackexchange.com/a/280744/8521">answer</a> on the WordPress Development Stack Exchange.</p> | |
| <p>Speaking of <code>WP_Customize_Manager::register_control_type()</code>, the types for panels, sections, and controls now are all registered before the <code>customize_register</code> action is triggered. This means that if you have a plugin that unregisters all <code>customize_register</code> actions in order to create a “blank slate” plugin-specific Customizer, you <a href="https://github.com/xwp/wp-customizer-blank-slate/pull/11/files?w=1">no longer have to re-register</a> these types to be able to use them.</p> | |
| <h2 id="date-time-control">Date/Time Control</h2> | |
| <p>In support of the 4.9 feature for scheduling changesets for publishing (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/28721">#28721</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/28721">Scheduled changes for the customizer</a></h4><span class="subtitle">Ticket #28721</span><div class="description"><p>As a user who uses the Customizer to change the layout of my homepage (or some other non-"set it and forget it option"), I'd like to be able to make changes in the Customizer, and schedule them to go live.</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:44 pm on November 10, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42149" title="Customize: Ensure customization drafts are published instead of trashed ...">42149</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Ensure customization d […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:43 pm on November 10, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42148" title="Customize: Ensure customization drafts are published instead of trashed ...">42148</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Ensure customization d […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: danielbachhuber</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 2 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/28721">Scheduled changes for the customizer</a></h4><span class="subtitle">Ticket #28721</span><div class="description"><p>As a user who uses the Customizer to change the layout of my homepage (or some other non-"set it and forget it option"), I'd like to be able to make changes in the Customizer, and schedule them to go live.</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:44 pm on November 10, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42149" title="Customize: Ensure customization drafts are published instead of trashed ...">42149</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Ensure customization d […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:43 pm on November 10, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42148" title="Customize: Ensure customization drafts are published instead of trashed ...">42148</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Ensure customization d […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: danielbachhuber</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 2 months ago</span></div></div></span>), there is a new control for representing a date/time. The control shows fields for editing the date with optional fields also for editing the time. The control syncs to a setting a date in the <code>Y-m-d H:i:s</code> format. The time in the control can either be presented in 12-hour format or 24-hour format. Additionally, the control can specify that it requires a future date. The PHP class is <code>WP_Customize_Date_Time_Control</code> and the JS class is <code>wp.customize.DateTimeControl</code>. Here is how to create a few of the controls in JS with screenshots for how they appear:</p> | |
| <pre>wp.customize.control.add( new wp.customize.DateTimeControl( 'birthdate', { | |
| label: 'Birthdate', | |
| description: "Someone was born on this day.", | |
| section: sectionId, | |
| includeTime: false, | |
| setting: new wp.customize.Value( '2000-01-02' ) | |
| } ) );</pre> | |
| <p><img data-attachment-id="24214" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/datetime-control-birthdate/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate.png" data-orig-size="594,202" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Date/Time Control with date only" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate-300x102.png" data-large-file="https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate.png" class="alignnone size-medium wp-image-24214" src="https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate-300x102.png" alt="" width="300" height="102" srcset="https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate-300x102.png 300w, https://make.wordpress.org/core/files/2017/11/datetime-control-birthdate.png 594w" sizes="(max-width: 300px) 100vw, 300px"></p> | |
| <pre>wp.customize.control.add( new wp.customize.DateTimeControl( 'special_datetime', { | |
| label: 'Special Datetime', | |
| description: 'There are incrementing digits in this datetime!', | |
| section: sectionId, | |
| includeTime: true, | |
| twelveHourFormat: false, | |
| allowPastDate: true, | |
| setting: new wp.customize.Value( '2001-02-03 13:57' ) | |
| } ) );</pre> | |
| <p><img data-attachment-id="24215" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/datetime-special-digits/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/datetime-special-digits.png" data-orig-size="594,396" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Date/Time Control with 24-hour time" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/datetime-special-digits-300x200.png" data-large-file="https://make.wordpress.org/core/files/2017/11/datetime-special-digits.png" class="alignnone size-medium wp-image-24215" src="https://make.wordpress.org/core/files/2017/11/datetime-special-digits-300x200.png" alt="" width="300" height="200" srcset="https://make.wordpress.org/core/files/2017/11/datetime-special-digits-300x200.png 300w, https://make.wordpress.org/core/files/2017/11/datetime-special-digits.png 594w" sizes="(max-width: 300px) 100vw, 300px"></p> | |
| <pre>wp.customize.control.add( new wp.customize.DateTimeControl( 'the_future', { | |
| label: 'Future Date', | |
| description: 'A unique future date time.', | |
| section: sectionId, | |
| includeTime: true, | |
| twelveHourFormat: true, | |
| allowPastDate: false, | |
| minYear: ( new Date() ).getFullYear(), | |
| setting: new wp.customize.Value( '2222-11-22 11:22:11' ) | |
| } ) );</pre> | |
| <p><img data-attachment-id="24217" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/datetime-future/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/datetime-future.png" data-orig-size="456,358" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Datetime future" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/datetime-future-300x236.png" data-large-file="https://make.wordpress.org/core/files/2017/11/datetime-future.png" class="alignnone size-medium wp-image-24217" src="https://make.wordpress.org/core/files/2017/11/datetime-future-300x236.png" alt="" width="300" height="236" srcset="https://make.wordpress.org/core/files/2017/11/datetime-future-300x236.png 300w, https://make.wordpress.org/core/files/2017/11/datetime-future.png 456w" sizes="(max-width: 300px) 100vw, 300px"></p> | |
| <p>Note that for the <code>twelveHourFormat</code> param you may want to let the site’s own preference determine the value. The site’s <code>time_format</code> option is now exported as <code>wp.customize.settings.timeFormat</code> so you can opt to show 12-hour format if this PHP time format contains <code>a</code>, as this is whether AM or PM is shown. The PHP date format is also exported as <code>wp.customize.settings.dateFormat</code>. See <a href="https://github.com/WordPress/wordpress-develop/blob/a39d599adf0e1a4bbcd4c34dfff22696e9eabe57/src/wp-admin/js/customize-controls.js#L7218">core example</a>.</p> | |
| <h2 id="new-utility-methods">New Utility Methods</h2> | |
| <ul> | |
| <li> | |
| <code>wp.customize.utils.highlightButton()</code> is used to bounce a given button to draw a user’s attention. This is used on the save button after changing the status and closing the Publish Settings section. It is also used when creating a new nav menu, to draw attention to the button for adding new nav menu items.</li> | |
| <li> | |
| <code>wp.customize.utils.getCurrentTimestamp()</code> is the JS-version of a PHP call to <code>current_time( 'mysql', false )</code>. Note that it will attempt to compensate for differences between the server’s clock time and the clock time on the client.</li> | |
| <li> | |
| <code>wp.customize.utils.getRemainingTime()</code> returns the number of milliseconds until the provided <code>DateTime</code> object.</li> | |
| </ul> | |
| <h2 id="updates-to-changeset-update-requests">Updates to Changeset Update Requests</h2> | |
| <ul> | |
| <li> | |
| <code>wp.customize.requestChangesetUpdate()</code> now allows an <code>args</code> parameter after its initial <code>data</code> parameter. The args can include <code>title</code>, <code>date</code>, <code>autosave</code>, and <code>force</code>. Calling this method will also now short-circuit with a rejected promise if a request is currently being processed. Note that this method is a lower-level version of what the older <code>wp.customize.previewer.save()</code> does when a user hits Save, though the overlap is not complete.</li> | |
| <li>Both <code>wp.customize.previewer.save()</code> and <code>wp.customize.requestChangesetUpdate()</code> will trigger a <code>save-request-params</code> event on <code>wp.customize</code> with the underlying request params object provided so plugins can modify the params as required.</li> | |
| <li>There is now a <code>wp.customize.previewer.trash()</code> method for trashing any current changeset to reset to the previously published state. An overlay notification (see below) is displayed when the trashing request is made, and once it finishes the Customizer will refresh in a pristine state.</li> | |
| <li>In calls to <code>wp.customize.previewer.save()</code>, the request will now be short-circuited if any registered control has an error notification. Previously it would only short-circuit if a registered setting had an error notification. This is used in core for the changeset scheduled date control, to block saving if the user provided an invalid date or one that is not in the future.</li> | |
| </ul> | |
| <h2 id="discontinued-customize-loader-in-core">Discontinued Customize Loader in Core</h2> | |
| <p>There has historically been two separate ways that the Customizer has been loaded. The first is just to navigate straight to <code>/wp-admin/customize.php</code>, and this is what happens if you click “Customize” in the admin bar or the admin menu. However, if you would click on “Customize” from the admin dashboard or any of the “Live Preview” buttons on the themes admin screen, then the Customizer would get opened in a full-screen iframe with the URL being rewritten to <em>look</em> like you are at <code>/wp-admin/customize.php</code> even though the previous page was still present under the iframe overlay.</p> | |
| <p>There were some advantages to this <code>customize-loader</code> in that it allowed the Customizer to be loaded with a spinner animation as well as being able to be quickly closed by just destroying the iframe. However, there were also disadvantages. It was difficult to maintain the two loading methods, the <code>customize-loader</code> made it extremely difficult to implement browser history for navigation in the Customizer (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/28536" class="nocard">#28536</a></span>), and there were accessibility problems with the iframe overlay. The <code>customize-loader</code> also added to the overall weight of the page in the browser’s memory. Ultimately, the <code>customize-loader</code> wasn’t necessary because the themes admin screen uses history management to ensure the URL reflects any searches, so the previous search will be restored when closing the Customizer regardless. For these reasons, the use of <code>customize-loader</code> has been discontinued in core (see <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/40254">#40254</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/40254">Customize: Eliminate customize-loader fullscreen iframe method for opening customizer in core</a></h4><span class="subtitle">Ticket #40254</span><div class="description"><p>Dependency from #28536, which [https://core.trac.wordpress.org/ticket/28536#comment:49 comments]:</p> | |
| <p>> Tentatively we're thinking to use the functionality as it exists in the feature plugin which only applies when customize-loader is not used […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">3:30 am on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42029" title="Themes: Switch back from throttling to debouncing in theme searches on ...">42029</a>: | |
| </p> | |
| <div class="message"><p> | |
| Themes: Switch back from throttlin […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">slackbot</span> — <span class="date">2:35 pm on October 26, 2017</span></div><div class="comment-value"> | |
| <p> | |
| <em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon"></span>Slack</a> in #core-customize by afercia. <a class="ext-link" href="https://wordpress.slack.com/archives/core-custom […]</em></p></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: defect (bug)</span><span class="single-meta">Version: 3.4</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/40254">Customize: Eliminate customize-loader fullscreen iframe method for opening customizer in core</a></h4><span class="subtitle">Ticket #40254</span><div class="description"><p>Dependency from #28536, which [https://core.trac.wordpress.org/ticket/28536#comment:49 comments]:</p> | |
| <p>> Tentatively we're thinking to use the functionality as it exists in the feature plugin which only applies when customize-loader is not used […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">3:30 am on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42029" title="Themes: Switch back from throttling to debouncing in theme searches on ...">42029</a>: | |
| </p> | |
| <div class="message"><p> | |
| Themes: Switch back from throttlin […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">slackbot</span> — <span class="date">2:35 pm on October 26, 2017</span></div><div class="comment-value"> | |
| <p> | |
| <em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon"></span>Slack</a> in #core-customize by afercia. <a class="ext-link" href="https://wordpress.slack.com/archives/core-custom […]</em></p></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: defect (bug)</span><span class="single-meta">Version: 3.4</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>). It does remain in core for plugins to use, but it may become deprecated in the future.</p> | |
| <h2 id="outer-sections">Outer Sections</h2> | |
| <p>The panes that slide out for adding widgets or nav menu items are ad hoc constructs without being built to be re-usable. In 4.9 with the introduction of the Publish Settings pane for managing a changeset’s status and scheduled date, this same kind of pane was needed again. Instead of creating another ad hoc pane, the Publish Settings pane is using a brand new “outer” section. This section type can be expanded along with another non-outer section being expanded at the same time. As this was developed specifically for the needs of the Publish Settings, it should be considered somewhat experimental for plugins to use for their own purposes. It can be instantiated in JS via the <code>wp.customize.OuterSection</code> class, or in PHP by registering a section with the <code>outer</code> type.</p> | |
| <div id="attachment_24221" style="max-width: 304px" class="wp-caption alignnone"> | |
| <img data-attachment-id="24221" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/outer-section/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/outer-section.png" data-orig-size="1204,1230" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Customize Outer Section" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/outer-section-294x300.png" data-large-file="https://make.wordpress.org/core/files/2017/11/outer-section-1002x1024.png" class="wp-image-24221 size-medium" src="https://make.wordpress.org/core/files/2017/11/outer-section-294x300.png" alt="" width="294" height="300" srcset="https://make.wordpress.org/core/files/2017/11/outer-section-294x300.png 294w, https://make.wordpress.org/core/files/2017/11/outer-section-768x785.png 768w, https://make.wordpress.org/core/files/2017/11/outer-section-1002x1024.png 1002w, https://make.wordpress.org/core/files/2017/11/outer-section.png 1204w" sizes="(max-width: 294px) 100vw, 294px"><p class="wp-caption-text">Publish Settings pane on right side is an outer section</p> | |
| </div> | |
| <h2 id="notification-improvements">Notification Improvements</h2> | |
| <p>Notifications for controls and their underlying settings were first <a href="https://make.wordpress.org/core/2016/07/05/customizer-apis-in-4-6-for-setting-validation-and-notifications/">introduced</a> in 4.6. Now in 4.9 the notifications API has been vastly expanded beyond controls to be integrated throughout the Customizer. In addition to controls, notifications can now also be added to sections and panels (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/38794" class="nocard">#38794</a></span>). Instead of there being an ad hoc error notice displayed in the header media section for when the current previewed URL doesn’t show a header video, this is now leveraging section notifications in core. In addition, notifications now recognize a <code>dismissible</code> param which allows the user to remove a notification. Just as a setting or control has a <code>notifications</code> property which contains a collection of <code>Notification</code> instances, so too a panel or section now has the same. Here are some examples of section and panel notifications:</p> | |
| <style type="text/css"> | |
| #gallery-7 { | |
| margin: auto; | |
| } | |
| #gallery-7 .gallery-item { | |
| float: left; | |
| margin-top: 10px; | |
| text-align: center; | |
| width: 50%; | |
| } | |
| #gallery-7 img { | |
| border: 2px solid #cfcfcf; | |
| } | |
| #gallery-7 .gallery-caption { | |
| margin-left: 0; | |
| } | |
| /* see gallery_shortcode() in wp-includes/media.php */ | |
| </style> | |
| <div data-carousel-extra="{"blog_id":6,"permalink":"https:\/\/make.wordpress.org\/core\/2017\/11\/01\/improvements-to-the-customize-js-api-in-4-9\/"}" id="gallery-7" class="gallery galleryid-23812 gallery-columns-2 gallery-size-medium"> | |
| <dl class="gallery-item"><dt class="gallery-icon portrait"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/header-image-section-notification/#main"><img width="209" height="300" src="https://make.wordpress.org/core/files/2017/11/header-image-section-notification-209x300.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/header-image-section-notification-209x300.png 209w, https://make.wordpress.org/core/files/2017/11/header-image-section-notification.png 604w" sizes="(max-width: 209px) 100vw, 209px" data-attachment-id="24226" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/header-image-section-notification/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/header-image-section-notification.png" data-orig-size="604,868" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Header image section notification" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/header-image-section-notification-209x300.png" data-large-file="https://make.wordpress.org/core/files/2017/11/header-image-section-notification.png"></a> | |
| </dt></dl> | |
| <dl class="gallery-item"><dt class="gallery-icon portrait"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/widgets-panel-notification/#main"><img width="181" height="300" src="https://make.wordpress.org/core/files/2017/11/widgets-panel-notification-181x300.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/widgets-panel-notification-181x300.png 181w, https://make.wordpress.org/core/files/2017/11/widgets-panel-notification.png 604w" sizes="(max-width: 181px) 100vw, 181px" data-attachment-id="24224" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/widgets-panel-notification/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notification.png" data-orig-size="604,1000" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Widgets panel notification" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notification-181x300.png" data-large-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notification.png"></a> | |
| </dt></dl> | |
| <br style="clear: both"><dl class="gallery-item"><dt class="gallery-icon portrait"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/widgets-panel-notifications/#main"><img width="189" height="300" src="https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications-189x300.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications-189x300.png 189w, https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications.png 604w" sizes="(max-width: 189px) 100vw, 189px" data-attachment-id="24225" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/widgets-panel-notifications/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications.png" data-orig-size="604,960" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Widgets panel notifications" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications-189x300.png" data-large-file="https://make.wordpress.org/core/files/2017/11/widgets-panel-notifications.png"></a> | |
| </dt></dl> | |
| <dl class="gallery-item"><dt class="gallery-icon portrait"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/colors-section-notifications/#main"><img width="201" height="300" src="https://make.wordpress.org/core/files/2017/11/colors-section-notifications-201x300.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/colors-section-notifications-201x300.png 201w, https://make.wordpress.org/core/files/2017/11/colors-section-notifications.png 604w" sizes="(max-width: 201px) 100vw, 201px" data-attachment-id="24227" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/colors-section-notifications/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/colors-section-notifications.png" data-orig-size="604,900" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Colors section notifications" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/colors-section-notifications-201x300.png" data-large-file="https://make.wordpress.org/core/files/2017/11/colors-section-notifications.png"></a> | |
| </dt></dl> | |
| <br style="clear: both"> | |
| </div> | |
| <p>Additionally, there is now a <em>global</em> notification area (see <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/35210" class="nocard">#35210</a></span>) for meta notifications that aren’t logically related to any specific control, section, or panel. One longstanding defect with the Customizer is what would happen when the user tries to Save changes, but then the request fails due to a server error or connection problem. Now a dismissible error notification is <a href="https://github.com/WordPress/wordpress-develop/blob/a39d599adf0e1a4bbcd4c34dfff22696e9eabe57/src/wp-admin/js/customize-controls.js#L7537-L7548">displayed</a> when this happens. The global notification area is also <a href="https://github.com/WordPress/wordpress-develop/blob/a39d599adf0e1a4bbcd4c34dfff22696e9eabe57/src/wp-admin/js/customize-controls.js#L8253-L8281">shown</a> when there is an autosave revision that can be restored:</p> | |
| <style type="text/css"> | |
| #gallery-8 { | |
| margin: auto; | |
| } | |
| #gallery-8 .gallery-item { | |
| float: left; | |
| margin-top: 10px; | |
| text-align: center; | |
| width: 50%; | |
| } | |
| #gallery-8 img { | |
| border: 2px solid #cfcfcf; | |
| } | |
| #gallery-8 .gallery-caption { | |
| margin-left: 0; | |
| } | |
| /* see gallery_shortcode() in wp-includes/media.php */ | |
| </style> | |
| <div data-carousel-extra="{"blog_id":6,"permalink":"https:\/\/make.wordpress.org\/core\/2017\/11\/01\/improvements-to-the-customize-js-api-in-4-9\/"}" id="gallery-8" class="gallery galleryid-23812 gallery-columns-2 gallery-size-medium"> | |
| <dl class="gallery-item"><dt class="gallery-icon landscape"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/notification-save-error/#main"><img width="300" height="203" src="https://make.wordpress.org/core/files/2017/11/notification-save-error-300x203.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/notification-save-error-300x203.png 300w, https://make.wordpress.org/core/files/2017/11/notification-save-error.png 604w" sizes="(max-width: 300px) 100vw, 300px" data-attachment-id="24229" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/notification-save-error/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/notification-save-error.png" data-orig-size="604,408" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Notification for save error" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/notification-save-error-300x203.png" data-large-file="https://make.wordpress.org/core/files/2017/11/notification-save-error.png"></a> | |
| </dt></dl> | |
| <dl class="gallery-item"><dt class="gallery-icon landscape"> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/notification-autosave-restore/#main"><img width="300" height="206" src="https://make.wordpress.org/core/files/2017/11/notification-autosave-restore-300x206.png" class="attachment-medium size-medium" alt="" srcset="https://make.wordpress.org/core/files/2017/11/notification-autosave-restore-300x206.png 300w, https://make.wordpress.org/core/files/2017/11/notification-autosave-restore.png 604w" sizes="(max-width: 300px) 100vw, 300px" data-attachment-id="24228" data-permalink="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/notification-autosave-restore/#main" data-orig-file="https://make.wordpress.org/core/files/2017/11/notification-autosave-restore.png" data-orig-size="604,414" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Notification for autosave restore" data-image-description="" data-medium-file="https://make.wordpress.org/core/files/2017/11/notification-autosave-restore-300x206.png" data-large-file="https://make.wordpress.org/core/files/2017/11/notification-autosave-restore.png"></a> | |
| </dt></dl> | |
| <br style="clear: both"> | |
| </div> | |
| <p>There is also a special overlay notification type that can be added to the global notification area. When an <code>OverlayNotification</code> is added then it will overtake the entire screen. This is used to display notifications for changeset post locking, changeset trashing, theme installation, and theme switching.</p> | |
| <p>As with control templates above, notifications can now be constructed with a <code>templateId</code> string param (or <code>template</code> function param) to customize how a given message is rendered, and to allow for a notification to include additional UI in addition to the message (see <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/37727" class="nocard">#37727</a></span>). This is used in the <a href="https://github.com/WordPress/wordpress-develop/blob/a39d599adf0e1a4bbcd4c34dfff22696e9eabe57/src/wp-admin/js/customize-controls.js#L8025-L8136">changeset post locking notification</a> to add the UI for overriding a lock or linking to the frontend to preview the changes.</p> | |
| <p>Finally, there is now a <code>wp.customize.Notifications</code> that subclasses <code>wp.customize.Values</code>; this is a collection for <code>Notification</code> instances and it is responsible for rendering notifications, including handling calls to <code>wp.a11y.speak()</code>. Controls, sections, and panels each have <code>setupNotifications</code> and <code>getNotificationsContainerElement</code> methods which will start calling the <code>render</code> method when notifications are added or removed from the collection.</p> | |
| <p>Aside: When removing something from a <code>Values</code> instance, a <code>removed</code> event will now be triggered <em>after</em> the value is deleted. Previously, a <code>remove</code> event would be triggered but before the deletion happened.</p> | |
| <h2 id="read-more">Read More</h2> | |
| <p>Most of the JS changes have been documented inline with JSDoc, so browsing <a href="https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/js/customize-controls.js"><code>customize-controls.js</code></a> is recommended to learn more about the new APIs introduced in this release. And yes, this massive file does need to be broken up (<span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/30277">#30277</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30277">Split up Customizer JS into separate files and remove self-booting jQuery.ready call</a></h4><span class="subtitle">Ticket #30277</span><div class="description"><p>The `customize-controls.js` file is huge and is named incorrectly now with #28709 and the fleshed-out models for Panels and Sections. The file should be broken up into `customize-sections.js`, `customize-panels.js`, and `customize-utils.js`. The last […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">4:13 am on August 29, 2017</span></div><div class="comment-value"> | |
| <p> | |
| Backwards compatibility was maintained when the monolithic Media JS was broken up into separate files. | |
| </p> | |
| </div></li><li class="comment"><div class="comment-meta"><span class="author">celloexpressions</span> — <span class="date">10:04 pm on August 18, 2017</span></div><div class="comment-value"> | |
| <p> | |
| Replying to <a class="new" href="https://core.trac.wordpress.org/ticket/30277#comment:19" title="Comment 19 for Ticket #30277">westonruter</a>: | |
| </p> | |
| <blockquote class="citation"> | |
| <p> | |
| I think this makes the most sense to be done as part o […]</p></blockquote></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 3.4</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 5 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30277">Split up Customizer JS into separate files and remove self-booting jQuery.ready call</a></h4><span class="subtitle">Ticket #30277</span><div class="description"><p>The `customize-controls.js` file is huge and is named incorrectly now with #28709 and the fleshed-out models for Panels and Sections. The file should be broken up into `customize-sections.js`, `customize-panels.js`, and `customize-utils.js`. The last […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">4:13 am on August 29, 2017</span></div><div class="comment-value"> | |
| <p> | |
| Backwards compatibility was maintained when the monolithic Media JS was broken up into separate files. | |
| </p> | |
| </div></li><li class="comment"><div class="comment-meta"><span class="author">celloexpressions</span> — <span class="date">10:04 pm on August 18, 2017</span></div><div class="comment-value"> | |
| <p> | |
| Replying to <a class="new" href="https://core.trac.wordpress.org/ticket/30277#comment:19" title="Comment 19 for Ticket #30277">westonruter</a>: | |
| </p> | |
| <blockquote class="citation"> | |
| <p> | |
| I think this makes the most sense to be done as part o […]</p></blockquote></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 3.4</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 5 months ago</span></div></div></span>), something that we’ll plan to do as part of a Customizer v2 feature plugin where we work to integrate the building blocks of Gutenberg into the Customizer. You may also want to look at the <a href="https://github.com/xwp/wp-customize-featured-content-demo">Customize Featured Content</a> demo plugin which tries to showcase as many of the Customize JS APIs as possible, and specifically look at the <a href="https://github.com/xwp/wp-customize-featured-content-demo/pull/10/files">pull request</a> which updates the plugin’s minimum required version of WP 4.9, so there is a lot of code that can be removed since it is no longer required.</p> | |
| <p>See related tickets:</p> | |
| <ul> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/30738">#30738</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30738">JS content templates for base WP_Customize_Control</a></h4><span class="subtitle">Ticket #30738</span><div class="description"><p>This will make it possible to create all of the base Customizer control types directly in JS, and will allow them to share a single template passed from the server on Customizer init for all controls with the basic types (following up on #28709).</p> | |
| <p> […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:23 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.1</span><span class="single-meta">Status: accepted</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/30738">JS content templates for base WP_Customize_Control</a></h4><span class="subtitle">Ticket #30738</span><div class="description"><p>This will make it possible to create all of the base Customizer control types directly in JS, and will allow them to share a single template passed from the server on Customizer init for all controls with the basic types (following up on #28709).</p> | |
| <p> […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:23 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.1</span><span class="single-meta">Status: accepted</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>: JS content templates for base WP_Customize_Control</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/31582" class="nocard">#31582</a></span>: Catching PHP Fatal Errors on WordPress Theme Customizer</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/35210" class="nocard">#35210</a></span>: Add notification area to Customizer</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/36167">#36167</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/36167">Improve alignment between settings params between Customizer Controls and Partials</a></h4><span class="subtitle">Ticket #36167</span><div class="description"><p>In #27355, the concept of a `Partial` was introduced and is analogous to a `Control` in many ways, particularly in that it an object associated with one or more settings. A control is instantiated in JS like:</p> | |
| <p>{{{#!js<br> | |
| var control = new wp.customiz […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:24 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.6</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/36167">Improve alignment between settings params between Customizer Controls and Partials</a></h4><span class="subtitle">Ticket #36167</span><div class="description"><p>In #27355, the concept of a `Partial` was introduced and is analogous to a `Control` in many ways, particularly in that it an object associated with one or more settings. A control is instantiated in JS like:</p> | |
| <p>{{{#!js<br> | |
| var control = new wp.customiz […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:24 pm on November 1, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>keywords</strong> | |
| <em>has-dev-note</em> added; <em>needs-dev-note</em> removed | |
| </li> | |
| </ul> | |
| <p> | |
| Dev note: <a class="ext-link" href="https://make.wordpress.org/core/201 […]</p></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">8:17 pm on October 27, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42031" title="Customize: Improve Media control accessibility and compatibility for ...">42031</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Improve Media control acc […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.6</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>: Improve alignment between settings params between Customizer Controls and Partials</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/37269" class="nocard">#37269</a></span>: Introduce removed event for wp.customize.Values collection</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/37727" class="nocard">#37727</a></span>: Allow for customize control notifications to have extensible templates</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/37964" class="nocard">#37964</a></span>: Allow customizer controls to be encapsulated by accepting pre-instantiated settings</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/38794" class="nocard">#38794</a></span>: Customize: Allow panels and sections to have notifications just like controls can</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/39275">#39275</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/39275">Improve wp.customize.previewer.save() for changesets.</a></h4><span class="subtitle">Ticket #39275</span><div class="description"><p>If you do not pass any status in `wp.customize.previewer.save()` the changeset status becomes published because the default `changesetStatus` is `publish` in core, which compels you to pass a status if you want to save the changeset with any other s […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:24 pm on September 27, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>status</strong> | |
| changed from <em>assigned</em> to <em>closed</em> | |
| </li> | |
| <li><strong>resolution</strong> | |
| set to <em>fixed</em> | |
| </li> | |
| […]</ul></div></li><li class="comment"><div class="comment-meta"><span class="author">slackbot</span> — <span class="date">5:34 pm on September 25, 2017</span></div><div class="comment-value"> | |
| <p> | |
| <em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon"></span>Slack</a> in #core-customize by jeffpaul. <a class="ext-link" href="https://wordpress.slack.com/archives/core-custo […]</em></p></div></li></ul></div><div class="meta"><span class="single-meta">Owner: sayedwp</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.7</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 4 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/39275">Improve wp.customize.previewer.save() for changesets.</a></h4><span class="subtitle">Ticket #39275</span><div class="description"><p>If you do not pass any status in `wp.customize.previewer.save()` the changeset status becomes published because the default `changesetStatus` is `publish` in core, which compels you to pass a status if you want to save the changeset with any other s […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">10:24 pm on September 27, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>status</strong> | |
| changed from <em>assigned</em> to <em>closed</em> | |
| </li> | |
| <li><strong>resolution</strong> | |
| set to <em>fixed</em> | |
| </li> | |
| […]</ul></div></li><li class="comment"><div class="comment-meta"><span class="author">slackbot</span> — <span class="date">5:34 pm on September 25, 2017</span></div><div class="comment-value"> | |
| <p> | |
| <em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon"></span>Slack</a> in #core-customize by jeffpaul. <a class="ext-link" href="https://wordpress.slack.com/archives/core-custo […]</em></p></div></li></ul></div><div class="meta"><span class="single-meta">Owner: sayedwp</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: 4.7</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 4 months ago</span></div></div></span>: Improve wp.customize.previewer.save() for changesets.</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/39930">#39930</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/39930">Adding documentation for wp.customize properties</a></h4><span class="subtitle">Ticket #39930</span><div class="description"><p>Adding documentation for...</p> | |
| <p>* wp.customize.control<br> | |
| * wp.customize.section<br> | |
| * wp.customize.panel</p> | |
| <p>Along with examples for usage.</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:55 pm on October 9, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>status</strong> | |
| changed from <em>accepted</em> to <em>closed</em> | |
| </li> | |
| <li><strong>resolution</strong> | |
| set to <em>fixed</em> | |
| </li> | |
| […]</ul></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">5:10 pm on October 9, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>owner</strong> | |
| set to <em>westonruter</em> | |
| </li> | |
| <li><strong>status</strong> | |
| changed from <em>new</em> to <em>accepted</em> | |
| </li> | |
| </ul […]</ul></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: shramee</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: trunk</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/39930">Adding documentation for wp.customize properties</a></h4><span class="subtitle">Ticket #39930</span><div class="description"><p>Adding documentation for...</p> | |
| <p>* wp.customize.control<br> | |
| * wp.customize.section<br> | |
| * wp.customize.panel</p> | |
| <p>Along with examples for usage.</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">6:55 pm on October 9, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>status</strong> | |
| changed from <em>accepted</em> to <em>closed</em> | |
| </li> | |
| <li><strong>resolution</strong> | |
| set to <em>fixed</em> | |
| </li> | |
| […]</ul></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">5:10 pm on October 9, 2017</span></div><div class="comment-value"> | |
| <ul> | |
| <li><strong>owner</strong> | |
| set to <em>westonruter</em> | |
| </li> | |
| <li><strong>status</strong> | |
| changed from <em>new</em> to <em>accepted</em> | |
| </li> | |
| </ul […]</ul></div></li></ul></div><div class="meta"><span class="single-meta">Reporter: shramee</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Version: trunk</span><span class="single-meta">Status: new</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>: Adding documentation for wp.customize properties</li> | |
| <li> | |
| <span class="p2_hovercardify"><a href="https://core.trac.wordpress.org/ticket/42083">#42083</a><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/42083">Customize: Clean up longstanding annoyances in JS API</a></h4><span class="subtitle">Ticket #42083</span><div class="description"><p>There are some annoyances when working with the JS API which aren't present when working with the PHP API. In particular:</p> | |
| <p>* Manually crafting the `content` param for the `<li>` container.<br> | |
| * Lack of default params for `active=true` and […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">2:58 am on October 31, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42048" title="Customize: Consolidate sourcing of control `params`. | |
| Prevent needlessly ...">42048</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Consolidate sourcing o […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">3:07 am on October 29, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42038" title="Customize: Fix interface alignment between `Setting` and `Control`, adding ...">42038</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Fix interface align […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div><div class="p2-hovercard"><div class="content"><h4 class="title"><a href="https://core.trac.wordpress.org/ticket/42083">Customize: Clean up longstanding annoyances in JS API</a></h4><span class="subtitle">Ticket #42083</span><div class="description"><p>There are some annoyances when working with the JS API which aren't present when working with the PHP API. In particular:</p> | |
| <p>* Manually crafting the `content` param for the `<li>` container.<br> | |
| * Lack of default params for `active=true` and […]</p> | |
| </div></div><div class="comments"><h5>Last 2 Comments</h5><ul><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">2:58 am on October 31, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42048" title="Customize: Consolidate sourcing of control `params`. | |
| Prevent needlessly ...">42048</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Consolidate sourcing o […]</p></div></div></li><li class="comment"><div class="comment-meta"><span class="author">westonruter</span> — <span class="date">3:07 am on October 29, 2017</span></div><div class="comment-value"> | |
| <p> | |
| In <a class="changeset" href="https://core.trac.wordpress.org/changeset/42038" title="Customize: Fix interface alignment between `Setting` and `Control`, adding ...">42038</a>: | |
| </p> | |
| <div class="message"><p> | |
| Customize: Fix interface align […]</p></div></div></li></ul></div><div class="meta"><span class="single-meta">Owner: westonruter</span><span class="single-meta">Type: enhancement</span><span class="single-meta">Status: closed</span><span class="single-meta">Component: Customize</span><span class="single-meta">Severity: normal</span><span class="single-meta">Updated: 3 months ago</span></div></div></span>: Customize: Clean up longstanding annoyances in JS API</li> | |
| </ul> | |
| <p>See also the <code>wp.customize.CodeEditorControl</code> described in:</p> | |
| <blockquote class="wp-embedded-content" data-secret="9Ggnbolr6D" style="display: none;"><p><a href="https://make.wordpress.org/core/2017/10/22/code-editing-improvements-in-wordpress-4-9/">Code Editing Improvements in WordPress 4.9</a></p></blockquote> | |
| <p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://make.wordpress.org/core/2017/10/22/code-editing-improvements-in-wordpress-4-9/embed/#?secret=9Ggnbolr6D" data-secret="9Ggnbolr6D" width="600" height="257" title="“Code Editing Improvements in WordPress 4.9” — Make WordPress Core" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p> | |
| <p>See also changes to the API for themes in the Customizer:</p> | |
| <blockquote class="wp-embedded-content" data-secret="sca0HH2HGv" style="display: none;"><p><a href="https://make.wordpress.org/core/2017/10/24/a-new-themes-experience-in-the-customizer/">A New Themes Experience in the Customizer</a></p></blockquote> | |
| <p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://make.wordpress.org/core/2017/10/24/a-new-themes-experience-in-the-customizer/embed/#?secret=sca0HH2HGv" data-secret="sca0HH2HGv" width="600" height="278" title="“A New Themes Experience in the Customizer” — Make WordPress Core" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p> | |
| <p><em>Props to <a href="https://profiles.wordpress.org/dlh/" class="mention"><span class="mentions-prefix">@</span>dlh</a> for contributing to this post.</em></p> | |
| <p class="o2-appended-tags"><a href="https://make.wordpress.org/core/tag/4-9/" class="tag"><span class="tag-prefix">#</span>4-9</a>, <a href="https://make.wordpress.org/core/tag/customize/" class="tag"><span class="tag-prefix">#</span>customize</a>, <a href="https://make.wordpress.org/core/tag/dev-notes/" class="tag"><span class="tag-prefix">#</span>dev-notes</a></p><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-twitter"><a rel="nofollow" data-shared="sharing-twitter-23812" class="share-twitter sd-button share-icon" href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/?share=twitter&nb=1&nb=1&nb=1&nb=1" target="_blank" title="Click to share on Twitter"><span>Twitter</span></a></li><li class="share-facebook"><a rel="nofollow" data-shared="sharing-facebook-23812" class="share-facebook sd-button share-icon" href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/?share=facebook&nb=1&nb=1&nb=1&nb=1" target="_blank" title="Click to share on Facebook"><span>Facebook<span class="share-count">9</span></span></a></li><li class="share-end"></li></ul></div></div></div><nav class="o2-post-footer-actions"><ul class="o2-post-footer-action-row"><li class="o2-post-footer-action"><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#respond" title="Reply" class="o2-post-reply o2-reply genericon genericon-reply" data-action="reply" data-actionstate="default">Reply<span class="o2-reply-count">9</span></a></li><li class="o2-post-footer-action"><a href="https://make.wordpress.org/core?post-id=23812&action=post-comment-subscribe&_wpnonce=fdc8ac303e" title="Follow comments" class="subscription-link o2-follow genericon genericon-subscribe" data-action="follow" data-actionstate="normal">Follow</a></li></ul><div class="o2-post-footer-action-likes"></div><ul class="o2-post-footer-action-row"></ul></nav> | |
| </div> | |
| <footer class="entry-meta"> | |
| <div class="o2-display-comments-toggle" style="display: block;"> | |
| <a href="#"> | |
| <span class="genericon genericon-collapse"></span> | |
| <span class="disclosure-text">Hide Comments</span> | |
| </a> | |
| </div> | |
| </footer> | |
| </div> | |
| <div class="o2-post-comments" style=""><div class="comment byuser comment-author-nikeo odd alt thread-odd thread-alt depth-1 o2-comment comment-33149" id="comment-33149"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/7b679649456932f971d4811c83e011d9?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-7b679649456932f971d4811c83e011d9-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33149"> | |
| <a href="https://profiles.wordpress.org/nikeo" rel="external nofollow" class="comment-author url "> | |
| Nicolas GUILLAUME | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33149" class="comment-date" data-compact-allowed="true" title="11:30 am (-07:00) on November 1, 2017">11:30 am on November 1, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33149" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>Impressive. this post will give me some home work <img draggable="false" class="emoji" alt="🙂" src="https://s.w.org/images/core/emoji/2.3/svg/1f642.svg" scale="0"><br> | |
| Thank you guys</p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div><div class="comment byuser comment-author-munirkamal even thread-even depth-1 o2-comment comment-33152" id="comment-33152"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/7733dbcf8d9658d4389087ac7030cd5b?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-7733dbcf8d9658d4389087ac7030cd5b-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33152"> | |
| <a href="https://profiles.wordpress.org/munirkamal" rel="external nofollow" class="comment-author url "> | |
| munirkamal | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33152" class="comment-date" data-compact-allowed="true" title="11:55 am (-07:00) on November 1, 2017">11:55 am on November 1, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33152" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>These are some massive improvements. <img draggable="false" class="emoji" alt="👏" src="https://s.w.org/images/core/emoji/2.3/svg/1f44f.svg" scale="0"></p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div><div class="comment byuser comment-author-truongwp odd alt thread-odd thread-alt depth-1 o2-comment comment-33158" id="comment-33158"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/942c6335c75fe715429fdec0b2570499?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-942c6335c75fe715429fdec0b2570499-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33158"> | |
| <a href="https://profiles.wordpress.org/truongwp" rel="external nofollow" class="comment-author url "> | |
| truongwp | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33158" class="comment-date" data-compact-allowed="true" title="7:55 pm (-07:00) on November 1, 2017">7:55 pm on November 1, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33158" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>Look great <img draggable="false" class="emoji" alt="🙂" src="https://s.w.org/images/core/emoji/2.3/svg/1f642.svg" scale="0"></p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div><div class="comment byuser comment-author-collizo4sky even thread-even depth-1 o2-comment comment-33159" id="comment-33159"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/75eb5abf4f342e434c23fb0216631d3e?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-75eb5abf4f342e434c23fb0216631d3e-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33159"> | |
| <a href="https://profiles.wordpress.org/collizo4sky" rel="external nofollow" class="comment-author url "> | |
| Collins Agbonghama | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33159" class="comment-date" data-compact-allowed="true" title="10:32 pm (-07:00) on November 1, 2017">10:32 pm on November 1, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33159" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>Massive improvement and great code example on the JS API of the Customizer.</p> | |
| <p>Thanks Weston Ruter and the Customize team for this great improvements.</p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div><div class="comment byuser comment-author-yikesitskevin odd alt thread-odd thread-alt depth-1 o2-comment comment-33173" id="comment-33173"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/1248419de02772e90033aa1baea659e2?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-1248419de02772e90033aa1baea659e2-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33173"> | |
| <a href="https://profiles.wordpress.org/yikesitskevin" rel="external nofollow" class="comment-author url "> | |
| yikesitskevin | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33173" class="comment-date" data-compact-allowed="true" title="11:17 am (-07:00) on November 3, 2017">11:17 am on November 3, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33173" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>These are some great changes and I’m very appreciative that you took the time to write such a detailed explanation with examples. Thank you!</p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div><div class="comment byuser comment-author-aquakitty even thread-even depth-1 o2-comment comment-33289" id="comment-33289"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/242d801a647adc99a84d6fe58f3c9624?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-242d801a647adc99a84d6fe58f3c9624-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33289"> | |
| <a href="https://profiles.wordpress.org/aquakitty" rel="external nofollow" class="comment-author url "> | |
| aquakitty | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33289" class="comment-date" data-compact-allowed="true" title="12:06 pm (-08:00) on November 29, 2017">12:06 pm on November 29, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33289" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>Is there an example of how to use the PHP “outer” section type?</p> | |
| <blockquote><p>in PHP by registering a section with the outer type.</p></blockquote> | |
| <p>I did manage to get it to pop when refreshing the customizer instance on load but I don’t understand how you add it to a section using PHP, that opens when you click it (seems to be no “inner” type).</p> | |
| <p>Also, with the javascript option I have some weird behaviour where the section I created using the javascript API added itself to the “preview_settings” button section.</p> | |
| <p>I can’t find any documentation on this feature anywhere.</p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| <div class="o2-child-comments"><div class="comment byuser comment-author-westonruter bypostauthor odd alt depth-2 o2-comment comment-33291" id="comment-33291"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/bb16e7904f2f335b6c9f524cc533d2d2?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-bb16e7904f2f335b6c9f524cc533d2d2-1" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33291"> | |
| <a href="https://profiles.wordpress.org/westonruter" rel="external nofollow" class="comment-author url "> | |
| Weston Ruter | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33291" class="comment-date" data-compact-allowed="true" title="1:52 pm (-08:00) on November 29, 2017">1:52 pm on November 29, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33291" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p><a href="https://profiles.wordpress.org/aquakitty/" class="mention"><span class="mentions-prefix">@</span>aquakitty</a> You’re looking at the feature’s documentation right here. What are you looking to achieve with an outer section? If you share the code you’re working with and some screenshots that would be helpful. What would be the most helpful is if you posted your question on WPSE so that others can more easily discover any solutions that arise: <a href="https://wordpress.stackexchange.com/questions/tagged/theme-customizer" rel="nofollow">https://wordpress.stackexchange.com/questions/tagged/theme-customizer</a></p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div></div></div><div class="comment byuser comment-author-zignorp even thread-odd thread-alt depth-1 o2-comment comment-33314" id="comment-33314"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/30227890f93d0e9a5ec393ee95cf4874?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-30227890f93d0e9a5ec393ee95cf4874-0" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33314"> | |
| <a href="https://profiles.wordpress.org/zignorp" rel="external nofollow" class="comment-author url "> | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33314" class="comment-date" data-compact-allowed="true" title="6:11 pm (-08:00) on December 5, 2017">6:11 pm on December 5, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33314" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>Can you give me browser compatibility for this version? I have a client who has an older computer, and her edit buttons have disappeared in the admin (for posts) with this update. I’ve had her clear cache, and have checked the site on numerous “modern” browsers and machines here, but I would love to be able to give her definite browser versions that are required. She’s on an old mac, tried chrome (which hasn’t been supported by her operating system) and firefox. We have people reporting from other countries, too, so it may come up again. I’m wondering if there’s a jquery version that’s not supported by her browser(s).<br> | |
| Thanks,<br> | |
| Wendy</p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| <div class="o2-child-comments"><div class="comment byuser comment-author-westonruter bypostauthor odd alt depth-2 o2-comment comment-33315" id="comment-33315"> | |
| <header class="o2-comment-header comment"> | |
| <nav class="o2-comment-actions o2-dropdown-actions o2-comment-dropdown-actions"><button class="o2-dropdown-actions-disclosure genericon genericon-ellipsis" style="display: none;"></button><ul><li><a class="o2-comment-edit genericon genericon-edit" href="#">Edit</a></li><li><a class="o2-comment-trash genericon genericon-trash o2-actions-border-top o2-warning-hover" href="#">Trash</a></li></ul></nav> | |
| <img src="https://gravatar.com/avatar/bb16e7904f2f335b6c9f524cc533d2d2?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-bb16e7904f2f335b6c9f524cc533d2d2-2" scale="0"> | |
| <div class="comment-meta commentmetadata o2-comment-metadata" data-o2-comment-id="33315"> | |
| <a href="https://profiles.wordpress.org/westonruter" rel="external nofollow" class="comment-author url "> | |
| Weston Ruter | |
| </a> | |
| <a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/#comment-33315" class="comment-date" data-compact-allowed="true" title="8:56 pm (-08:00) on December 5, 2017">8:56 pm on December 5, 2017</a> | |
| <span class="comment-actions o2-actions"> | |
| <a href="#" class="o2-comment-reply" title="Reply">Reply</a> | |
| <a href="https://make.wordpress.org/core/wp-admin/comment.php?action=editcomment&c=33315" class="o2-comment-edit" title="Edit">Edit</a> | |
| </span> | |
| </div> | |
| </header> | |
| <div class="comment-content"> | |
| <p>The browser versions supported by WordPress can be found here: <a href="https://make.wordpress.org/design/handbook/design-guide/browser-support/" rel="nofollow">https://make.wordpress.org/design/handbook/design-guide/browser-support/</a></p> | |
| <div class="o2-comment-actions o2-comment-footer-actions"><ul><li><a class="o2-comment-reply genericon genericon-reply" href="#">Reply</a></li></ul></div> | |
| </div> | |
| </div></div></div><div id="respond" class="o2-comment comment-new"> | |
| <header class="o2-comment-header comment"> | |
| <img src="https://gravatar.com/avatar/bb16e7904f2f335b6c9f524cc533d2d2?d=mystery" width="32" height="32" class="avatar grav-hashed grav-hijack" id="grav-bb16e7904f2f335b6c9f524cc533d2d2-3" scale="0"> | |
| <div class="comment-meta commentmetadata"> | |
| <a href="https://profiles.wordpress.org/westonruter" rel="external nofollow" class="comment-author url"> | |
| Weston Ruter | |
| </a> | |
| <a href="" class="comment-date o2-timestamp" data-unixtime="1516228674" title="2:37 pm (-08:00) on January 17, 2018">Now</a> | |
| </div> | |
| </header> | |
| <div class="o2-editor"> | |
| <div class="o2-editor-wrapper"> <div class="o2-editor-toolbar-wrapper"> <div class="o2-editor-toolbar"> <button class="o2-editor-toolbar-button genericon genericon-bold" value="strong" title="Bold (ctrl/⌘-b)"></button> <button class="o2-editor-toolbar-button genericon genericon-italic" value="em" title="Italics (ctrl/⌘-i)"></button> <button class="o2-editor-toolbar-button genericon genericon-link" value="a" title="Link (⌘-shift-a)"></button> <button class="o2-editor-toolbar-button genericon genericon-picture" value="img" title="Image"></button> <button class="o2-editor-toolbar-button genericon genericon-quote" value="blockquote" title="Blockquote"></button> <button class="o2-editor-toolbar-button genericon genericon-code" value="code" title="Code"></button><div class="o2-editor-upload"><div class="o2-editor-upload-progress"></div></div> </div> <div style="display:none;"> <input class="o2-image-file-input" style="display:none" type="file" accept="image/*,video/*"> </div> </div> <div class="o2-editor-content-wrapper"><textarea tabindex="-1" style="position: absolute; top: -999px; left: 0px; right: auto; bottom: auto; border: 0px; padding: 0px; box-sizing: content-box; word-wrap: break-word; overflow: hidden; transition: none; height: 0px !important; min-height: 0px !important; width: 544.703px;" class="autosizejs o2-editor-text"></textarea><textarea class="o2-editor-text" placeholder="" style="resize: none; overflow: hidden; word-wrap: break-word; height: 128px;"></textarea> <div class="o2-editor-preview"></div> </div> </div> | |
| <div class="o2-editor-footer"> | |
| <ul class="o2-editor-tabs"> | |
| <li class="selected"><a href="#" class="o2-editor-edit-button genericon-edit">Edit</a></li> | |
| <li><a href="#" class="o2-editor-preview-button genericon-show">Preview</a></li> | |
| </ul> | |
| <a href="#" class="o2-comment-save primary" title="⌘-enter">Reply</a> | |
| <a href="#" class="o2-new-comment-cancel">Cancel</a> | |
| <div class="o2-comment-form-options"> | |
| <p class="comment-subscription-form"><input type="checkbox" name="subscribe" id="subscribe" value="subscribe" style="width: auto;"> <label class="subscribe-label" id="subscribe-label" for="subscribe" style="display: inline;">Notify me of new comments via email.</label></p> | |
| <div class="o2-comment-form-options-extra"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div></div> | |
| <div class="o2-post-comment-controls"></div> | |
| <div class="navigation"> | |
| <p class="nav-older"> | |
| <a href="https://make.wordpress.org/core/2017/10/31/whats-new-in-gutenberg-31st-october/" title="What&#8217;s new in Gutenberg? (31st October)">← What’s new in Gutenberg? (31st October)</a> | |
| </p> | |
| <p class="nav-newer"> | |
| <a href="https://make.wordpress.org/core/2017/11/02/php-meeting-recap-october-30th/" title="PHP Meeting Recap &#8211; October 30th">PHP Meeting Recap – October 30th →</a> | |
| </p> | |
| </div> | |
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| global $argv; | |
| if ( count( $argv ) !== 5 ) { | |
| WP_CLI::line( sprintf( "USAGE: wp eval-file %s count together|separate", basename( __FILE__ ) ) ); | |
| WP_CLI::error( 'Missing sanitize_mode and/or article_count positional arg.' ); | |
| } | |
| $count = intval( $argv[3] ); | |
| $sanitize_mode = $argv[4]; | |
| if ( ! in_array( $sanitize_mode, array( 'together', 'separate' ), true ) ) { | |
| WP_CLI::error( 'The sanitize mode parameter must be either "together" or "separate".' ); | |
| } | |
| // Content from https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/ | |
| $sample_article = file_get_contents( __DIR__ . '/sample-post.html' ); | |
| $start_time = microtime( true ); | |
| printf( "Article size: %s KB\n", number_format( ( strlen( $sample_article ) ) / ( 1024 ) ) ); | |
| printf( "Article count: %d\n", $count ); | |
| printf( "HTML size: %s KB\n", number_format( ( $count * strlen( $sample_article ) ) / 1024 ) ); | |
| if ( 'together' === $sanitize_mode ) { | |
| AMP_Content_Sanitizer::sanitize( str_repeat( $sample_article, $count ), amp_get_content_sanitizers() ); | |
| } else { | |
| for ( $i = 0; $i < $count; $i++ ) { | |
| AMP_Content_Sanitizer::sanitize( $sample_article, amp_get_content_sanitizers() ); | |
| } | |
| } | |
| printf( "Sanitize mode: %s\n", $sanitize_mode ); | |
| printf( "Time elapsed: %.3f seconds\n", microtime( true ) - $start_time ); | |
| printf( "Peak memory usage: %s KB\n", number_format( memory_get_peak_usage() / 1024 ) ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment