Reduce the number of steps from clicking on ‘customize’ to editing the page/post

[alcurrie]

User Steps
The current process to edit a page (or post) in Customizer, is as follows:

1. From the front end site page or post the user wants to edit, the user clicks Customize to open Customizer. As expected, the page appears in the preview window in Customizer.

However to actually edit the page in customizer the user has 3 more steps:
2. Click on Pages in the left navigation pane
3. Click on Name of Page
4. Click on [Open Editor]

Recommended Usability Enhancement
After clicking on Customize from a specific page or post in the customizer have that page/post already open/expanded in the left navigation pane, so the user only has to select to open editor.

See screen shots

[westonruter]

@alcurrie note, however, the “Edit” link that appears with the post/page in the preview. Clicking this will expand the panel and section for you. Also, shift-click on the content should do the same and expand the editor.

[danielbachhuber]

Here's a little code snippet I'm using the achieve this effect:

(function($,api){

    api.bind('ready', function(){
        api.previewer.bind( 'customized-posts', function( data ){
            _.defer( function() {
                var didFocus = false;
                api.section.each( function( section ) {
                    if ( section.params.post_id === data.queriedPostId ) {
                        section.focus();
                        didFocus = true;
                    }
                } );
                if ( ! didFocus ) {
                    api.panel.each( function( panel ) {
                        panel.collapse();
                    } );
                }
            })
        });
    });

}(jQuery,wp.customize))

[westonruter]

@danielbachhuber that looks very familiar 😄

[danielbachhuber]

One bug I noticed: if the section is already previewed, then calling focus() again will refocus it, thus closing the editor.

[westonruter]

I think I misunderstood @alcurrie's suggestion. All we need to do here is filter the link for the Customize admin bar link to include the autofocus query param to expand that post's section. This would be done when on a singular template where there is a queried_object() post for us to use.

I agree that this would be a nice usability improvement.