Set Post Title to Read-only and Disable Permalink Slug Editor in Gutenberg

by

When using Gutenberg I would like to disable all users except administrator from being able to edit a post’s title even though I want to allow them to edit the post, and I would like to disable the permalink editor that pops-up just above the post title.

I want to do this for a custom post type where we will disable to the ability to add or delete posts and where we will pre-load all the posts for that post type when launching a site.

(The use-case is for condo units; once a condo complex is built there is rarely if ever a need to add or remove condo units, so I only want administrators to be able to add or remove them, and only administrators should be able to edit condo unit titles or their URL slugs.)

I have been able to figure out how to disable editing of the title, in a non-Gutenberg/hacky regular JavaScripty way, but have not been able to get rid of the permalink. Like a zombie, it keeps coming back. (Ideally I would use a Gutenbergy way to do this and not a hacky JS way.)

See code that I have below that does disable title editing but not disable permalink editing. I would prefer to get rid of this and use Gutenbergy code instead. I only include it here so I won’t get answers suggesting this approach.

jQuery(function($){
    var title;
    function makeTitleReadOnly() {
        var textarea = title.find("textarea");
        if (textarea.length > 0) {
            textarea.attr("readonly",true);
            return
        }
        setTimeout(makeTitleReadOnly,100);
    }
    function hidePermalink() {
        var permalink = title.find(".editor-post-permalink");
        if (permalink.length > 0) {
            permalink.hide();
            return
        }
        setTimeout(hidePermalink,123);
    }
    function waitForPostTitle() {
        title = $(".editor-post-title");
        if (title.length > 0 ) {
            makeTitleReadOnly();
            hidePermalink();
            return;
        }
        setTimeout(waitForPostTitle,100);
    }
    waitForPostTitle()
});

Ideally I will not have to create a separate plugin for this (I want to incorporate all code into an existing plugin) and so ideally I don’t want to have to add an npm/webpack build process meaning no JSX, and ideally create-guten-block will not be required as part of an to this question.

2 Answers
2

I used this, inline, on specific pages (using get_current_screen()). I’d hoped this would enable me to hide/show the permalink panel under certain conditions. However, removeEditorPanel() removes the permalink panel globally. This isn’t completely horrifying, since the css still works conditionally, and the permalink can still be edited via the editor (by clicking on the title) everywhere else. Hoping the Gutenberg documentation/options get better soon. If anyone has any suggestions, I’m all ears…

add_action( 'admin_footer', function() {
$screen = get_current_screen();
if ( $screen->id == 'WUTEVA' ) { ?>
<style>
  .editor-post-permalink{display: none !important;}
</style>
<script type="text/javascript">
  const { removeEditorPanel } = wp.data.dispatch('core/edit-post');
  removeEditorPanel( 'post-link' );
</script>
<?php }
} );

Leave a Comment