How to add "Edit Shortcuts" icon to Wordpress customizer

Question

How to add "Edit Shortcuts" icon new feature in WordPress 4.7 to the customizer. I want to add this icon anywhere in my theme customizer

Answer 1

These are called 'Visible Edit Shortcuts' in Customizer Preview. You should read more about it here:

https://make.wordpress.org/core/2016/11/10/visible-edit-shortcuts-in-the-customizer-preview/

It's an extension of the selective refresh:

$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';

$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyfifteen_customize_partial_blogname',
) );
$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
    'selector' => '.site-description',
    'render_callback' => 'twentyfifteen_customize_partial_blogdescription',
) );

Where the render callbacks call bloginfo( 'name' ); and bloginfo( 'description' );

https://make.wordpress.org/core/2016/02/16/selective-refresh-in-the-customizer/

Also check out the official Customizer documentation

So basically if you had the selective refresh in your customizer, these will appear by default ;)