Last active
January 20, 2017 20:10
-
-
Save BinaryMoon/67a693eff42f4317e119fe0858e55807 to your computer and use it in GitHub Desktop.
Improve WordPress Customizer Auto Update Partials Adoption
This file contains hidden or 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
I think the reason there hasn't been much developer uptake in the auto refresh of the Customizer is that implementation is both: | |
1. complex (using javascript - something many theme developers are unaccustomed to outside of jquery) | |
and 2. has complex documentation. It's only because I've been following the many customizer changes in 4.7 that I have learnt how to implement the things I have. | |
Having now implemented auto updating partials for site title and description in a number of my themes I have seen that it's not as complicated as I first thought. I have also seen that the code is almost identical for each theme. The only thing that has changed is the css selector used to reference the title and description. You can see an example of the js implementation on _s - https://github.com/Automattic/_s/blob/master/js/customizer.js | |
I think that with some additions to the core customizer code we could remove the requirement for the customizer.js file for the most common use cases. | |
What I would like to suggest comes in two parts. | |
1) Adding additional properties to the custom-header settings in add-theme-support. An example is shown in custom-header.php | |
The idea is to specify the selectors used for the different header elements and then automatically output the javascript neccessary to update them. | |
2) Adding a type property to the customizer add_partial method. When the property is specified a default behaviour will modify the related element in real time. In the customizer.php example since the text type is specified the control will update the site title partial in real time. There could also be types for visibility, foreground colours, background colours, etc. |
This file contains hidden or 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 | |
// If add_partial is set then changing transport to postMessage is implied? Or should at least be a parameter. | |
$wp_customize->selective_refresh->add_partial( | |
'blogname', | |
array( | |
'selector' => '.site-title', | |
'type' => 'text', // Let's the editor know what sort of behaviour to use for the auto update. | |
'render_callback' => function() { | |
bloginfo( 'name' ); | |
}, | |
) | |
); |
This file contains hidden or 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 | |
// Suggested implementation | |
add_theme_support( | |
'custom-header', | |
array( | |
'default-image' => '%s/images/x.jpg', | |
'default-text-color' => '000000', | |
'random-default' => false, | |
'width' => 1500, | |
'height' => 500, | |
'flex-height' => true, | |
'header-text' => true, | |
'uploads' => true, | |
'wp-head-callback' => 'album_colour_styles', | |
// New optional list of selectors. Without this everything will behave as it always has. | |
'selectors' => array( | |
'site-title' => '.site-title', // Take care of auto update site title text, and change header colour | |
'site-description' => '.site-description', // Take care of auto update site description | |
'header' => '.branding', // Show & hide title and description | |
), | |
) | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment