Gutenberg Block Editor 自作その２ - id指定 | WordPressのカスタマイズ

♠

Page No.1

Contents

自分のサイトでは、自作ブロックばかりを使っているので気づかなかったのだけれど、依頼されたサイトを作っているときにグループブロックを使ってみてやっと気がついた。
htmlアンカーなどというものが指定できるようになっているではないか。これはなんだ？と思いつつ、早い話が id 属性なんだ。しかも、グループブロックは、section や article、div などタグの種類まで選べるようになってた。気づかなかったなぁ～、あれま。

これはいいや！ってことで、さっそく使いだしたのではあるのだけれど・・・。
生成される html を見てみると、グループブロックの場合、タグが二重になってしまっている。こんな具合で。

<section id="contents" class="wp-container-62229d7017353 wp-block-group jalang">
    <div class="wp-block-group__inner-container">
        <nav id="breadcrumb"><a href="https://localhost/wptr/?lang=ja">Home</a> > 会社概要</nav>

        <h1 id="株式会社なんたら-会社案内">株式会社なんたら 会社案内</h1>

        <article id="gaiyo" class="wp-container-62229d7010e32 wp-block-group comp">
            <div class="wp-block-group__inner-container">
                <h2 id="会社概要">会社概要</h2>

                <dl>
                    <dt>会社名</dt>
                    <dd><p>株式会社なんたら<br>Nantara Japan Ltd</p></dd>
                </dl>
            </div>
        </article>
    </div>
</section>

CopyExpand‹›

この ”wp-block-group__inner-container” という class のついている div がそうなんだけれど、section にしろ article にしろ div にしろしかり。はっきり言ってこれ全く必要なし。必要ならもう一つグループブロックを追加すればいいだけではないか。なぜ、わざわざデフォルトでご丁寧に二重にする必要があるのだろうか。どんどん無意味に階層が深くなってしまうではないか。階層は浅いにこしたことはないのに。Lighthouse からも注意されてしまうのに。

やはりというか、こういう自動的に生成するようなものは、要らないものばかりがひっついてくる。どうにも気に入らない。
と、いうことで、やっぱり自分で作るしか無いということになってしまう。
ほんとに、手間ばかりかかるんだよ、Gutenberg は。

block に id属性 ( html アンカー ) を指定できるようにする

デフォルトのブロックができるようになっているのであれば、と、ネットをうろついてみると、なんとかお目当ての情報に行き着くことができた。割と簡単にできそうである。
目的のブロックは、div や article など、他のブロックを内包するためのブロックなので、innerBlocks を使ったものとなる。基本としたのは、Block Editor Handbook – Nested Blocks: Using InnerBlocks にある下に示す超基本的な div のブロック。

( function ( blocks, element, blockEditor ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var useBlockProps = blockEditor.useBlockProps;
 
    blocks.registerBlockType( 'gutenberg-examples/example-06', {
        title: 'Example: Inner Blocks',
        category: 'design',
 
        edit: function () {
            var blockProps = useBlockProps();
 
            return el( 'div', blockProps, el( InnerBlocks ) );
        },
 
        save: function () {
            var blockProps = useBlockProps.save();
 
            return el( 'div', blockProps, el( InnerBlocks.Content ) );
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

CopyExpand‹›

これを元にして、html アンカー（ id属性）を指定できるようにちょっと手を入れる。

( function ( blocks, element, blockEditor ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var useBlockProps = blockEditor.useBlockProps;
 
    blocks.registerBlockType( 'stx-simple-article/simple-art', {
        title: 'STX simple id article',
        icon: 'smiley',
        category: 'design',

        attributes: {
            anchor: { type: 'string' }
        },

        supports: {
            anchor: true,
        },

        edit: function () {
            var blockProps = useBlockProps();

            return el( 'article', blockProps, el( InnerBlocks ) );
        },
 
        save: function ( props ) {
            var blockProps = useBlockProps.save();
 
            if ( props.attributes.anchor ) {
                blockProps.id = props.attributes.anchor;
            }

            return el( 'article', blockProps, el( InnerBlocks.Content ) );
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

CopyExpand‹›

これはタグが article にしてあるけれど、section でも div でも return el () の部分のタグ指定を変更するだけのことである。みそはマークしてある三箇所。これで id属性が指定できるようになった。このままでも使えるのではあるけれど、エディタにおいて、id、それに class も反映されない。そのうえ、使いづらそうな長ったらしいデフォルトの class 属性がひっついてくる。

ちなみに上の Block Editor Handbook のサイトからもらってきた基本となる div ブロックにおいても、「高度な設定」->「追加 css クラス」でクラスを設定しても、エディタでは反映されない。って、あのねぇ、いくら基本の基本である div ブロックとはいっても、それを参考にして勉強しているのだから、最低でもそれぐらいちゃんと適用されるようになっているものを掲載してもらいたいものである。んとに。なんだか文句ばかり言ってしまっている。

supports className false で class がダブってしまう

デフォルトの class を disable にすることはできるはずで、以前は Gutenberg Handbook にも書いてあったような気がする。supports で className に false 指定するだけのこと。

実際に適用してみると確かにデフォルトの長ったらしいものは消えてなくなるのではあるけれど、新たな問題が発生してしまう。サイドバーにて指定した class が2つ並んでダブって設定されてしまうのである。なんじゃこりや？って感じ。ネットで同様の症状を探してみるけれど、ほとんどなく、まったく同じではないけれど似たような件の記載のページがわずかに見られた。

いろいろと試してみたけれど、これがどうにも解決できなかった。情報もほとんどないようだし。迷宮に迷い込んでしまうと、ただただいたずらに時間だけが過ぎ去っていってしまう。ただただひたすらにイラつくだけのことで、正直、お手上げ、よくわかりません。
と、いうことで、苦し紛れに useBlockProps を使わない古いやり方に書き直してみたところ問題はおこらなくなってしまうのであって。

( function ( blocks, element, blockEditor ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    // var useBlockProps = blockEditor.useBlockProps;
 
    blocks.registerBlockType( 'stx-simple-div/simple-div', {
        title: 'STX simple id div',
        icon: 'smiley',
        category: 'design',

        attributes: {
            anchor: { type: 'string' }
        },

        supports: {
            anchor: true,
            className: false
        },

        edit: function ( props ) {
            const elems= { className: props.className };

            if ( props.attributes.anchor ) {
                elems.id = props.attributes.anchor;
            }

            return el( 'div', elems, el( InnerBlocks ) );
        },
 
        save: function ( props ) {
            const elems= { className: props.className };

            if ( props.attributes.anchor ) {
                elems.id = props.attributes.anchor;
            }

            return el( 'div', elems, el( InnerBlocks.Content ) );
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

CopyExpand‹›

edit: の方にも適用されるようにしたので、これで、エディタにおいても id、class が反映された。
たしか何かしら問題があって useBlockProps を使う方法に改善されたのだと思うのであるけれど、それを使わないことでかえって問題は発生せず、平和なんだなこれが。けれど、バージョンが進むと問題が起きるような気もするし。やはりそれを使う方法にしたほうがいいのだろうなとは思いつつ。

まぁ、そもそも長ったらしいデフォルトでひっついてくる class を気にしなければすむことではある。それにしてもやっぱり Gutenberg には親しみがもてないなぁ。React なんてのは本当に必要だったのだろうか？

自分は二冊ほど React の本を読んでみたりしたのであるが、その一冊には、「とにかく JSX を使った方が良い、始めのうちは違和感があるかもしれないがとにかく慣れなさい」、と言っていた。JSX を使った方が良いという理由は、タグの方が見ただけでわかりやすいからというもの。逆に言えばただそれだけのことである。でも、ちょっと待てよ！ただそれだけのためということでもないけれど（わかりやすいことの重要さは重々承知しているつもりであるから）、なんだか引っかかる。そのために JSX を通常の JavaScript の書式に変換する処理を通さないといけなくなるのである。

ページの大部分を React で生成するなんて場合はタグの量も多く、階層も深くなるだろうし、確かに createElement だと構造がとてもわかりづらくなってしまうだろうから、見てわかりやすくなるのが良いのは合点がいく。

しかし、Gutenberg のブロックの場合は、タグの量などたかがしれている。一つ二つしかないのであれば、createElement でも全くわかりづらくなどならないし、余計な変換の処理が入らないだけ、よほど処理は軽くなるのではなかろうか。実際のところ、どれだけ違いがあるのかはよくわからないけれど、投稿を書いていてブロックの数が多くなってくると、自分の非力な旧マシンではこれがなかなか重くなってくる。実際のページの表示においてはあまり影響はなさそうではあるが。自分としてはやはり負荷の少ない方に魅力を感じる。Gutenberg のブロックにおいては、あえて JSX を使わないという選択も一理あるのではないだろうか。

まぁ、それは置いといて・・・。欲しいブロックがあるので、もう少しじたばたが続く。
それは背景画像などがインラインスタイルで設定できる汎用のグループブロックというもの。

Gutenberg Block Editor 自作その２ - id指定

block に id属性 ( html アンカー ) を指定できるようにする

supports className false で class がダブってしまう

Leave a Reply！ コメントをキャンセル

Leave a Reply！コメントをキャンセル