Hook for when a page template is changed

admin管理员组

文章数量:1414903

I know that you can remove the editor section of the page editor page ( :/) depending on the template chosen using add_action( 'load-page.php', 'hide_editor_function' ); (with proper functionality of course). The problem with this though, as you should be able to tell, is that this will only work on a page load/reload. Not as soon as the template is changed.

As far as I can find, there is no specific hook for this. So my question really is, is there a hook for when the user changes the page template for a page in the admin panel? And if not, what would be the best way to have 'instantaneous' hiding/revealing of the editor (and add custom meta boxes)?

Thank you for your time, Lyphiix

I know that you can remove the editor section of the page editor page ( :/) depending on the template chosen using add_action( 'load-page.php', 'hide_editor_function' ); (with proper functionality of course). The problem with this though, as you should be able to tell, is that this will only work on a page load/reload. Not as soon as the template is changed.

As far as I can find, there is no specific hook for this. So my question really is, is there a hook for when the user changes the page template for a page in the admin panel? And if not, what would be the best way to have 'instantaneous' hiding/revealing of the editor (and add custom meta boxes)?

Thank you for your time, Lyphiix

• hooks
• page-template

Share Improve this question asked May 28, 2015 at 11:19 LyphiixLyphiix 1377 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

If you want to toggle the editor "on the fly", you'll need to revert to a pure JavaScript solution, and only ever "visually" hide it (as opposed to removing it server-side):

function wpse_189693_hide_on_template_toggle() {
    $screen = get_current_screen();
    if ( $screen && $screen->id === 'page' ) :
        ?>

<script>
    jQuery( "#page_template" ).change(
        function() {
            jQuery( "#postdivrich" ).toggle( jQuery( this ).val() === "my-template.php" );
        }
    ).trigger( "change" );
</script>

<?php
    endif;
}

add_action( 'admin_print_footer_scripts', 'wpse_189693_hide_on_template_toggle' );

The reason you can't keep your hide_editor_function is, whilst this will work to initially hide the editor, once the user saves and reloads the page the editor will no longer be in the source to "toggle". So it always has to be there, even if it's just hidden.

For anyone using the Gutenberg editor, I found that (in addition to my comment on the accepted answer) there's more work which needs doing here.

Gutenberg injects children of .block-editor__container on the fly, so it's not enough to amend the selectors to catch the change event, you have to watch for the correct element being inserted. Using MutationObserver (since this is the better practice which replaces the soon-deprecated DOM Mutation Events and has full browser support), this is how I accomplished catching the template change:

$ = $ || jQuery; // Allow non-conflicting use of '$'

$(function(){

    // Create an observer to watch for Gutenberg editor changes
    const observer = new MutationObserver( function( mutationsList, observer ){

        // Template select box element
        let $templateField = $( '.editor-page-attributes__template select' );

        // Once we have the select in the DOM...
        if( $templateField.length ){

            // ...add the handler, then...
            $templateField.on( 'change', function(){

                // ...do your on-change work here
                console.log( 'The template was changed to ' + $( this ).val() );

            });
            observer.disconnect();

        }

    });
    // Trigger the observer on the nearest parent that exists at 'DOMReady' time
    observer.observe( document.getElementsByClassName( 'block-editor__container' )[0], {
        childList: true, // One of the required-to-be-true attributes (throws error if not set)
        subtree: true // Watches for the target element's subtree (where the select lives)
    });

});

Hope this helps someone!

本文标签： Hook for when a page template is changed