permalinks - Gutenberg Editor: dynamicaly change slug field with an ACF field

admin管理员组

文章数量:1200985

I have a custom field with ACF named "short_title" and I want the post's slug based on this field instead of the post title field.

I already wrote this code:

function testSlug($post_id)
{
    if (get_post_type($post_id) == 'my-custom-post-type') {
        if (defined('DOING_AUTOSAVE' && DOING_AUTOSAVE)) {
            return;
        }

        if (!current_user_can('edit_post', $post_id)) {
            return;
        }

        remove_action('save_post', 'testSlug');
        $updated_post              = [];
        $updated_post['ID']        = $post_id;
        $updated_post['post_name'] = sanitize_title($_POST['acf']['field_61f8bacf53dc5']);
        wp_update_post($updated_post);
        add_action('save_post', 'testSlug');
        clean_post_cache($post_id);
    }
}
add_action('save_post', 'testSlug');

this works great and edit the slug, but on the editor, the slug field is not synchronised with this field and when we click on "Save" or "Publish" button, the slug field is filling with the post title slug.

But, if we refresh the edit page, the correct slug is shown.

I tried to do some JS to synchronise input event of the ACF field with the slug field, but it doesn't work because when the panel is close, the element disapear from the DOM. Plus, even if the panel is open when the page load, the script run too early, when the editor is not fully loaded, and it return undefined because the field have a dynamic ID (inspector-text-control-X, with X is 1, 2, ...).

How can I synchronize the slug field with my custom field? And how can I prevent the event from the post title field to edit the slug field?

I have a custom field with ACF named "short_title" and I want the post's slug based on this field instead of the post title field.

I already wrote this code:

function testSlug($post_id)
{
    if (get_post_type($post_id) == 'my-custom-post-type') {
        if (defined('DOING_AUTOSAVE' && DOING_AUTOSAVE)) {
            return;
        }

        if (!current_user_can('edit_post', $post_id)) {
            return;
        }

        remove_action('save_post', 'testSlug');
        $updated_post              = [];
        $updated_post['ID']        = $post_id;
        $updated_post['post_name'] = sanitize_title($_POST['acf']['field_61f8bacf53dc5']);
        wp_update_post($updated_post);
        add_action('save_post', 'testSlug');
        clean_post_cache($post_id);
    }
}
add_action('save_post', 'testSlug');

this works great and edit the slug, but on the editor, the slug field is not synchronised with this field and when we click on "Save" or "Publish" button, the slug field is filling with the post title slug.

But, if we refresh the edit page, the correct slug is shown.

I tried to do some JS to synchronise input event of the ACF field with the slug field, but it doesn't work because when the panel is close, the element disapear from the DOM. Plus, even if the panel is open when the page load, the script run too early, when the editor is not fully loaded, and it return undefined because the field have a dynamic ID (inspector-text-control-X, with X is 1, 2, ...).

How can I synchronize the slug field with my custom field? And how can I prevent the event from the post title field to edit the slug field?

• permalinks
• block-editor
• slug

Share Improve this question asked Apr 28, 2022 at 9:13 AuraylienAuraylien 4155 bronze badges 4

• There is a way to fix the slug issue, but I noticed you're just using a POST-ed data, so how about using the wp_insert_post_data filter instead? Have you tried that? – Sally CJ Commented Apr 29, 2022 at 7:49
• @SallyCJ I've just try this but I can't save my post, got a "Response is not a valid JSON response" – Auraylien Commented Apr 29, 2022 at 9:47
• I made a mistake with my code and I got it works, but I always have the same problem (slug is not visualy updated without refreshing the page). I noticed that the visual update of the slug field is made before save_post and wp_insert_post_data, so how can I visualy update it without refresh the page? – Auraylien Commented Apr 29, 2022 at 13:45
• Sorry, I forgot about this, and you're right - the meta box is updated after the block editor saves the post (via the REST API), but anyway, glad you found a solution. =) – Sally CJ Commented May 6, 2022 at 5:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I've found a way to dynamicaly change the slug field with the short title custom field.

jQuery(document).ready(() => {

    const acfField = 'field_61f8bacf53dc5';
    const inputShortTitle = document.getElementById('acf-' + acfField);

    const slugify = (str) => {
        return str.toLowerCase().replace(/ /g, '-')
            .replace(/-+/g, '-').replace(/[^\w-]+/g, '');
    }

    const updateSlug = () => {
        wp.data.dispatch('core/editor').editPost({slug: slugify(inputShortTitle.value)});
    }

    if (inputShortTitle !== null) {
        inputShortTitle.addEventListener('input', () => updateSlug());
    }
});

wp.data.dispatch('core/editor').editPost({slug: 'my-slug-value-here'});

is the command that can change React Gutenberg slug field component. No more PHP is needed because when I pressed the Save button, the actual value filled by my script is send to the API.

本文标签： permalinksGutenberg Editor dynamicaly change slug field with an ACF field