Last active
October 11, 2017 03:58
-
-
Save westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e 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
/* 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 ); |
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 | |
/** | |
* 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