Navigating within Customizer preview should update parent document title

[westonruter]

When navigating around the site within the Customizer preview, the document title should be updated to include the document title of the current URL being previewed.

As it stands right now, assuming the activated theme is Twenty Thirteen, loading up the Customizer will always have the document title:

Customize Twenty Thirteen ‹ WordPress

This is not particularly helpful, especially outside the context of a Live Preview theme switch.

When customizing the site with an active theme, it seems to make more sense if the blogname (e.g. Foo) were used in the document title:

Customize Foo ‹ WordPress

And then when doing a Live Preview for a theme switch, the document title could be:

Live Preview Twenty Thirteen ‹ WordPress

Even better would be if the document title of URL loaded into the preview would be incorporated into the document title of the overall customizer, and if this title would then update as the user browses around the site inside of the customizer preview. (For the closely related ticket to add browser history and deep linking for navigation in Customizer preview, see #28536).

So when customizing the site without a theme switch, the customizer document title could have the format:

Customize: {{document_title}} ‹ WordPress

And then when doing a live preview theme switch, the document title can have the format:

Live Preview {{theme_name}}: {{document_title}} ‹ WordPress

[westonruter]

Use different document titles for Live Preview vs base Customizer; update when preview URL changes. Clean up formatting, supplying braces. Commits also pushed to GitHub: ​https://github.com/x-team/wordpress-develop/pull/17

[westonruter]

As discussed in IRC, we can remove the ‹ WordPress from being appended to the title.

[westonruter]

Also: instead of {{title}} we should use %1$s and %2$s

[westonruter]

Replying to westonruter:

Also: instead of {{title}} we should use %1$s and %2$s

ocean90: Actually, this is problematic because in the case of the Live Preview title, we need to only substitute one of the strings, leaving the other for JavaScript later to supply the title. So this is what I came up with to implement the above change, but it's not too pretty:

src/wp-admin/customize.php

@@ -78 +78 @@
 $body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
 
 if ( $wp_customize->is_theme_active() ) {
-        $document_title_tmpl = _x( 'Customize: {{title}}', '{{title}} is for JS template' );
+        $document_title_tmpl = _x( 'Customize: %1$s', '2: document title' );
+        $document_title_tmpl = sprintf( $document_title_tmpl, '{{title}}' );
 } else {
         $document_title_tmpl = sprintf(
-                _x( 'Live Preview %s: {{title}}', '%s is theme name, {{title}} is for JS template' ),
+                _x( 'Live Preview %2$s: %1$s', '1: document title, 2: theme name' ),
+                '{{title}}',
                 strip_tags( $wp_customize->theme()->display( 'Name' ) )
         );
 }

[celloexpressions]

Let's finalize our direction here during tomorrow's meeting and supply an updated patch.

[ocean90]

I think we should keep it simple here.

I'm fine with just "Customize Foo ‹ WordPress" and "Live Preview Twenty Thirteen ‹ WordPress". Adding the {{document_title}} is nice, but I don't think we will be in a position where you can see the full title because of the limited browser tab size. Or are there browsers which display the title somewhere else?

[westonruter]

Replying to ocean90:

I think we should keep it simple here.

I'm fine with just "Customize Foo ‹ WordPress" and "Live Preview Twenty Thirteen ‹ WordPress". Adding the {{document_title}} is nice, but I don't think we will be in a position where you can see the full title because of the limited browser tab size. Or are there browsers which display the title somewhere else?

Seeing the full title isn't necessary. I almost always can only see the first 2-3 words of windows' titles I have open in my tabs, but it is these first couple words that gives me all that I need to identify which tab I need to go to. So there is this benefit, but then also updating the document title gives the benefit of making the Customizer seem more seamless when opening it. A goal for the Customizer is for it to be openable without a jarring context shift, and persisting the original document title would be one step here.

[celloexpressions]

How about just "Customize {{document title}}" and "Live Preview {{document title}}"? That way you still see the change when navigating to different pages, which is extremely important along with the URL changing to understand that you can navigate within the Customizer just like you would on the front end.

[westonruter]

​https://github.com/xwpco/wordpress-develop/pull/32

[westonruter]

I believe I've addressed the feedback from our IRC discussion in 28542.2.diff​.

[celloexpressions]

28542.2.diff​ looks good to me.

[ocean90]

Should the document title be changed when site title and tagline is changed?

[westonruter]

Replying to ocean90:

Should the document title be changed when site title and tagline is changed?

That's a great question. Personally I think this is an edge case which can be tackled later once #27355 is committed, since themes could add a partialRefresh for the head > title element.

[westonruter]

Indeed: Core now has theme support for title-tag, and we can use this to live-update the document title for themes that support it: ​https://make.wordpress.org/core/2014/10/29/title-tags-in-4-1/

[ocean90]

In 30306:

Customizer: When navigating around the site within the Customizer preview, update the document title.

props westonruter.
fixes #28542.