0

I'm using javascript in the editor to look at the content of the post and, if it contains certain strings, change the selected template.

Here's a picture of the form and the button behind it. The button's content it "default template". If I select a new option, the button will change to reflect the new selection.

enter image description here

I want to do this in javascript.

I've tried making a click on the "page" tab, wait for the button, click on "button", then setting the value like this:

selector = document.querySelector("select#inspector-select-control-0");
selector.value = 'article.php'

I've also tried the other clicks & setting the value and adding "selected" to the option I want:

Array.from(document.querySelector("select#inspector-select-control-0").options).forEach(function(option) {
    if ('article.php' === option.value){
        option.selected = true;
    }
});

These can change the value in the form but the button doesn't update and when I publish/update/save the post the template isn't changed.

I tried using this:

wp.data.dispatch('core/editor').editPost({
    meta: { _wp_page_template: 'article.php' },
});

But this doesn't have any effect. I'm really at a loss here. Why can't I use the form for this?

1
  • I presumed you are using an FSE/block-based theme? But even if not, you can still try the sample implementation in my answer - it's not to be simply copied/pasted though, instead, you can take it as a guide on correctly subscribing to changes in the post content/data.
    – Sally CJ
    Jul 28, 2023 at 5:36

1 Answer 1

1

You are already using the correct action, i.e. wp.data.dispatch( 'core/editor' ).editPost(), however, you should instead change the property named template. I.e.

wp.data.dispatch( 'core/editor' ).editPost( { template: 'article.php' } )

Also, for completeness, here's a sample implementation based on what you're trying to do:

const { subscribe, select, dispatch } = wp.data;

// The text you want to find.
const TEXT_TO_FIND = 'foo';

// The template you want to change to when the above text is found.
const TEMPLATE_SLUG = 'article.php';

let previousTemplateSlug = '';

const unsubscribe = subscribe( () => {
    const postContent  = select( 'core/editor' ).getEditedPostContent();
    const templateSlug = select( 'core/editor' ).getEditedPostAttribute( 'template' );

    // Build the regular expression pattern for searching the text.
    const RE = new RegExp( '\\b' + TEXT_TO_FIND + '\\b' );

    if ( ( TEMPLATE_SLUG !== templateSlug ) &&
        postContent && RE.test( postContent )
    ) {
        dispatch( 'core/editor' ).editPost( { template: TEMPLATE_SLUG } );
        previousTemplateSlug = templateSlug;
    } else if ( previousTemplateSlug && ! RE.test( postContent ) ) {
        // Revert to the previous template.
        dispatch( 'core/editor' ).editPost( { template: previousTemplateSlug } );
        previousTemplateSlug = '';
    }
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.