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

plugin development - WP Gutenberg Blocks - How to limit firstroot blocks

programmeradmin1浏览0评论

I want to do the following. I want to limit the first root block types to two types. These inner types can have all but the first root types.

Now, from what I understand you cannot tell the root block to limit it. So I was thinking of the following:

  • Root block
  • Set the first block with gutenberg templates
  • Custom wrapper block
  • Limit the wrapper block with <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
  • limit the possibility to add more blocks to root

Or in other words. The root should only allow 2 block types

  • my-bootstrap-blocks/container
  • my-bootstrap-blocks/spacer

Since I don't see a way to do this I populate the root with a default wrapper block and remove the possibility to add new blocks by hiding the appender button with css.

I was thinking of the following:

functions.php

add_action( 'init', 'insert_template' );
function insert_template() {
  $post_type_object = get_post_type_object( 'page' );
  $post_type_object->template =[ [ 'my-bootstrap-blocks/wrapper'] ];
}

my-bootstrap-blocks/wrapper block.js (detail from code)

edit( { className } ) {
        const ALLOWED_BLOCKS = [ 'my-bootstrap-blocks/container', 'my-bootstrap-blocks/spacer' ];

        return (
            <div className={ className }>
                <InnerBlocks
                    allowedBlocks={ ALLOWED_BLOCKS }
                />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },

editor.css of the wrapper block

.is-root-container {
  > .block-list-appender{
    display: none;
  }
}

This way the appender gets hidden only in the root container of the gutenbergblocks.

One thing remains, the appender in the top left still remains active and gets to add new blocks to the root. Now I don't want that.

The question

  • Is this the best approach?
  • Is there a way to do this better?
  • If this is considered a good approach, how can I disable the root appender top left. But keep it when it's selected in an InnerBlock
发布评论

评论列表(0)

  1. 暂无评论