最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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.

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.

Share Improve this question edited Feb 21, 2019 at 11:44 fuxia 107k39 gold badges255 silver badges459 bronze badges asked Feb 21, 2019 at 10:33 MikeSchinkelMikeSchinkel 37.6k14 gold badges117 silver badges132 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 1

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 }
} );

You may also prevent user access to the dashboard and allow editing of post type custom fields, excluding the post title and permalink, in the front-end using plugins like Pods, ACF and Toolset. You won't be using Gutenberg in editing, but it will future-proof your application if all you need is editing of custom fields. Only allow dashboard access to the administrator.

发布评论

评论列表(0)

  1. 暂无评论