Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active October 11, 2017 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e to your computer and use it in GitHub Desktop.
Save westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e to your computer and use it in GitHub Desktop.
/* eslint consistent-this: [ "error", "partial" ] */
wp.customize.selectiveRefresh.partialConstructor.background_color = (function( api, $ ) {
'use strict';
return api.selectiveRefresh.Partial.extend( {
/**
* Refresh.
*
* Override refresh behavior to apply changes with JS instead of doing
* a selective refresh request for PHP rendering (since unnecessary).
*
* @returns {jQuery.promise} Resolved promise.
*/
refresh: function() {
var partial = this, backgroundColorSetting;
backgroundColorSetting = api( partial.params.primarySetting );
_.each( partial.placements(), function( placement ) {
placement.container.css( 'background-color', backgroundColorSetting.get() );
} );
// Return resolved promise since no server-side selective refresh will be requested.
return $.Deferred().resolve().promise();
}
} );
})( wp.customize, jQuery );
<?php
/**
* Plugin Name: WPSE 282425: Edit shortcuts for partials without selective refresh
* Plugin URI: https://wordpress.stackexchange.com/q/282425/8521
* Author: Weston Ruter, XWP
* Author URI: https://make.xwp.co/
* License: GPLv2+
*/
namespace WPSE_282425;
const DEFAULT_BACKGROUND_COLOR = '#43C6E4';
/**
* Render partial.
*/
function render_partial() {
?>
<div id="bg-color" style="padding: 3em; background-color: <?php echo esc_attr( get_theme_mod( 'wpse_282425_background_color', DEFAULT_BACKGROUND_COLOR ) ); ?>">
The background color on this can be edited via an edit shortcut without doing any server-side partial refresh request.
</div>
<?php
}
// Put it on the page so we can see it.
add_action( 'wp_footer', __NAMESPACE__ . '\render_partial' );
/**
* Register Customizer constructs.
*
* @param \WP_Customize_Manager $wp_customize
*/
function customize_register( \WP_Customize_Manager $wp_customize ) {
$section = $wp_customize->add_section( 'wpse_282425' , array(
'title' => 'WPSE 282425',
'priority' => 30,
) );
$wp_customize->add_setting( 'wpse_282425_background_color' , array(
'default' => DEFAULT_BACKGROUND_COLOR,
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new \WP_Customize_Color_Control( $wp_customize, 'wpse_282425_background_color', array(
'label' => 'Background Color',
'section' => $section->id,
'settings' => 'wpse_282425_background_color',
) ) );
$wp_customize->selective_refresh->add_partial( 'wpse_282425_background_color', array(
'type' => 'background_color', // 👈 Needed to connect this PHP-registered partial with the corresponding partialConstructor in JS.
'selector' => '#bg-color',
'container_inclusive' => true,
'render_callback' => __NAMESPACE__ . '\render_partial',
) );
}
add_action( 'customize_register', __NAMESPACE__ . '\customize_register' );
/**
* Enqueue scripts.
*/
function enqueue_scripts() {
if ( ! \is_customize_preview() ) {
return;
}
\wp_enqueue_script(
'wpse282425-background-color-partial',
\plugin_dir_url( __FILE__ ) . 'background-color-partial.js',
array( 'customize-selective-refresh' )
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_scripts' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment