Quotes and other texturize characters are displayed differently in the customizer vs the front end of site

[seawaves]

For example, the customizer will show smart quotes when they are present in the site title, whereas the front end of the site will not for some themes.

Steps to reproduce:

1. Change the theme to Twenty Ten
2. Open the customizer
3. Change the site title to something that contains a quote, for example "Site's Title". Do not save the changes yet.
4. See that the quotes are displayed as smart quotes:

5. Click on 'Save & Publish'
6. View the live site. See that the quotes are not curly on the live site:

This was tested on a fresh installation of WordPress 4.3, with no plugins installed.

[westonruter]

@seawaves: Thanks for the report, and you are totally right. This is actually a known issue and is to be expected given how changes to the title get previewed in the Core themes. The site title (blogname) has a postMessage transport for pushing the setting changes into the preview. This is opposed to the default refresh transport. When the refresh transport is used, whenever you change a setting the preview will do a full reload and PHP will re-generate the page with the new setting applied: this means that the PHP filters added to the site title can be applied, such as texturize. The refresh transport is slow however.

The postMessage transport is instant since it uses JavaScript to preview the change. The problem with the JavaScript preview mechanism, however, is that the logic being done in PHP has to be completely replicated and emulated on the client. As such, the postMessage transport violates the DRY principle since logic has to be written twice. What's more is that it is not possible to fully replicate all of the logic that exists in PHP since any number of plugins may add other PHP filters to how the title renders, such as making the text all uppercase.

We are actually investigating a middle-ground between postMessage transport and the refresh transport in this 4.4 release cycle: it's a sort of hybrid transport called partialRefresh. This is the mechanism that is used actually to preview changes to a menus in the Customizer in 4.3.

If a setting, such as the blogname, needs to fully make use of all the PHP filters applying to it without replicating all of the PHP logic in JS (which is not possible anyway), then in 4.4 it may be possible to use partialRefresh transport to update the blogname instead. It won't be instant preview, since an Ajax request is still required, but it will be faster than a full refresh and it will be sure to include all of the PHP logic applied by plugins.

I'll close this, but please do follow development on #27355 for updates on partialRefresh.

[seawaves]

Wow, thank you for the very detailed and quick answer @westonruter! I'm happy to hear this will be looked at for 4.4, that'll be awesome! I looked for a ticket about this in the Customize component prior to posting, sorry for the duplication.

[westonruter]

This will be able to be fixed in 4.5 once selective refresh lands: #27355.

The question then remains as to whether Core themes should be updated to implement selective refresh for the site title and tagline.

The theme code could look like this:

<?php
add_action( 'customize_register', function( WP_Customize_Manager $wp_customize ) {
        
        // Abort if partials are not implemented.
        if ( ! method_exists( $wp_customize, 'add_partial' ) ) {
                return;
        }

        $setting = $wp_customize->get_setting( 'blogname' );
        $wp_customize->add_partial( $setting->id, array(
                'selector' => '.site-title a',
                'settings' => $setting->id, /* Note this is optional; default is to use partial ID */
                'render_callback' => function() { 
                        bloginfo( 'name' ); 
                },
        ) );
        $setting->transport = 'postMessage';

        $setting = $wp_customize->get_setting( 'blogdescription' );
        $manager->add_partial( $setting->id, array(
                'selector' => '.site-description',
                'settings' => $setting->id, /* Note this is optional; default is to use partial ID */
                'render_callback' => function() { 
                        bloginfo( 'description' ); 
                },
        ) );
        $setting->transport = 'postMessage';
}, 100 );

[westonruter]

33738.0.diff​ implements selective refresh for site title and tagline for twentyeleven, twentytwelve, twentythirteen, twentyfourteen, and twentyfifteen. Note the patch is not compatible with PHP 5.2 as is, due to the use of anonymous functions. I wasn't sure how the render_callback functions should be named across these themes. I did end up creating twentysixteen_customize_partial_blogname() and twentysixteen_customize_partial_blogdescription() in the PR for twentysixteen: ​https://github.com/WordPress/twentysixteen/pull/428

[westonruter]

Alright, 33738.1.diff​ implements the full-on PHP 5.2-compatible render_callback functions.

[westonruter]

Please review 33738.1.diff​ and ​https://github.com/WordPress/twentysixteen/pull/428

[karmatosed]

@westonruter looks good for Twenty Sixteen. I merged it into Twenty Sixteen on GitHub.

[karmatosed]

Patch for other defaults looks good to @westonruter.

[westonruter]

In 36797:

Customize: Use selective refresh to preview changes to site title and tagline in core themes.

Fixes issue where wptexturize and other filters fail to apply when previewing changes via postMessage transport.

See #27355.
Fixes #33738.