Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alcurrie opened this issue Apr 25, 2016 · 5 comments

Comments

Projects
None yet
4 participants
@alcurrie
Copy link

commented Apr 25, 2016

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
customize_step1_clickcustomize
customize_step2_clickpages
customize_step3_clicknameofpage
customize_step4_openeditor

@westonruter

This comment has been minimized.

Copy link
Contributor

commented Apr 25, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented May 25, 2016

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

This comment has been minimized.

Copy link
Contributor

commented May 25, 2016

@danielbachhuber that looks very familiar 😄

@danielbachhuber

This comment has been minimized.

Copy link
Contributor

commented May 25, 2016

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

@westonruter

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.