|
<?php |
|
/** |
|
* Plugin Name: WPSE 286268 |
|
* Description: Demonstration of adding controls which are contextual to device previews. |
|
* Plugin URI: https://wordpress.stackexchange.com/q/286268/8521 |
|
* Version: 0.1.0 |
|
* Author: Weston Ruter, XWP |
|
* Author URI: https://weston.ruter.net/ |
|
* License: GPLv2+ |
|
* |
|
* @package WPSE_286268 |
|
*/ |
|
|
|
/** |
|
* Class WPSE_286268_Plugin |
|
*/ |
|
class WPSE_286268_Plugin { |
|
|
|
/** |
|
* Device configs. |
|
* |
|
* @var array |
|
*/ |
|
public $device_configs = array(); |
|
|
|
/** |
|
* Stylesheet template. |
|
* |
|
* @var string |
|
*/ |
|
public $stylesheet_template; |
|
|
|
/** |
|
* Registered device settings. |
|
* |
|
* @var array |
|
*/ |
|
public $registered_settings = array(); |
|
|
|
/** |
|
* Registered device controls. |
|
* |
|
* @var array |
|
*/ |
|
public $registered_controls = array(); |
|
|
|
/** |
|
* Init. |
|
*/ |
|
public function init() { |
|
$this->device_configs = array( |
|
'desktop' => array( |
|
'label' => __( 'Desktop element outline', 'wpse-286268' ), |
|
'default' => '#ff0000', |
|
), |
|
'tablet' => array( |
|
'label' => __( 'Tablet element outline', 'wpse-286268' ), |
|
'default' => '#00ff00', |
|
), |
|
'mobile' => array( |
|
'label' => __( 'Mobile element outline', 'wpse-286268' ), |
|
'default' => '#0000ff', |
|
), |
|
); |
|
|
|
$this->stylesheet_template = ' |
|
* { |
|
outline: solid 1px {{outline_color_desktop}}; |
|
} |
|
@media screen and ( max-width: 720px ) { |
|
* { |
|
outline: solid 1px {{outline_color_tablet}}; |
|
} |
|
} |
|
@media screen and ( max-width: 320px ) { |
|
* { |
|
outline: solid 1px {{outline_color_mobile}}; |
|
} |
|
} |
|
'; |
|
|
|
add_action( 'customize_register', array( $this, 'customize_register' ), 20 ); |
|
add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_controls_scripts' ) ); |
|
add_action( 'customize_preview_init', function() { |
|
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) ); |
|
} ); |
|
add_action( 'wp_print_styles', array( $this, 'print_styles' ), 20 ); |
|
} |
|
|
|
/** |
|
* Print styles. |
|
*/ |
|
public function print_styles() { |
|
echo '<style id="wpse-286268" type="text/css">'; |
|
$css = $this->stylesheet_template; |
|
$tpl_vars = array(); |
|
foreach ( $this->device_configs as $slug => $params ) { |
|
$tpl_vars[ '{{outline_color_' . $slug . '}}' ] = get_theme_mod( "outline_color_{$slug}", $params['default'] ); |
|
} |
|
echo esc_html( str_replace( |
|
array_keys( $tpl_vars ), |
|
array_values( $tpl_vars ), |
|
$css |
|
) ); |
|
echo '</style>'; |
|
} |
|
|
|
/** |
|
* Customize register. |
|
* |
|
* @param WP_Customize_Manager $wp_customize Manager. |
|
*/ |
|
public function customize_register( WP_Customize_Manager $wp_customize ) { |
|
$section = $wp_customize->get_section( 'colors' ); |
|
if ( ! $section ) { |
|
$section = $wp_customize->add_section( 'colors', array( |
|
'title' => __( 'Colors', 'wpse-286268' ), |
|
) ); |
|
} |
|
|
|
foreach ( array_keys( $wp_customize->get_previewable_devices() ) as $device_slug ) { |
|
if ( ! isset( $this->device_configs[ $device_slug ] ) ) { |
|
continue; |
|
} |
|
|
|
$setting = $wp_customize->add_setting( "outline_color_{$device_slug}", array( |
|
'transport' => 'postMessage', |
|
'sanitize_callback' => 'sanitize_hex_color', |
|
'default' => $this->device_configs[ $device_slug ]['default'], |
|
) ); |
|
$this->registered_settings[ $device_slug ] = $setting; |
|
$control_arg = array_merge( |
|
$this->device_configs[ $device_slug ], |
|
array( |
|
'settings' => array( $setting->id ), |
|
'section' => $section->id, |
|
) |
|
); |
|
$control = new WP_Customize_Color_Control( $wp_customize, "outline_color_{$device_slug}", $control_arg ); |
|
$wp_customize->add_control( $control ); |
|
|
|
$this->registered_controls[ $device_slug ] = $control; |
|
} |
|
} |
|
|
|
/** |
|
* Enqueue controls scripts. |
|
*/ |
|
public function enqueue_controls_scripts() { |
|
$handle = 'wpse-286268-controls'; |
|
wp_enqueue_script( $handle, plugin_dir_url( __FILE__ ) . 'wpse-286268-controls.js', array( 'customize-controls' ) ); |
|
$exports = array( |
|
'deviceControls' => wp_list_pluck( $this->registered_controls, 'id' ), |
|
); |
|
wp_add_inline_script( $handle, sprintf( 'wpse286268controls.init( %s );', wp_json_encode( $exports ) ) ); |
|
} |
|
|
|
/** |
|
* Enqueue preview scripts. |
|
*/ |
|
public function enqueue_preview_scripts() { |
|
$handle = 'wpse-286268-preview'; |
|
wp_enqueue_script( $handle, plugin_dir_url( __FILE__ ) . 'wpse-286268-preview.js', array( 'customize-preview' ), false, true ); |
|
$exports = array( |
|
'stylesheetTemplate' => $this->stylesheet_template, |
|
'deviceSettings' => wp_list_pluck( $this->registered_settings, 'id' ), |
|
); |
|
wp_add_inline_script( $handle, sprintf( 'wpse286268preview.init( %s );', wp_json_encode( $exports ) ) ); |
|
} |
|
} |
|
|
|
if ( version_compare( strtok( get_bloginfo( 'version' ), '-' ), '4.9', '>=' ) ) { |
|
$wpse_286268 = new WPSE_286268_Plugin(); |
|
$wpse_286268->init(); |
|
} |
This comment has been minimized.
Line 135 of the PHP causes an error. Should be changed to: