サポート » テーマ » カスタムブロックにsupportsで設定したUIが表示されない

  • 解決済 Isamu Takeda

    (@itmaroon)


    日々カスタムブロックの作成にいそしんでいるWeb制作者です。
    最近theme.jsonによるグローバルスタイルの設定を行っているのですが、theme.jsonのsettingsセクションにborderをセットし、カスタムブロックのblock.jsonのsupportsセクションにborderをセットしたところ、borderに関するUIが表示されませんでした。
    そこでblock.jsonのsupportsセクションに__experimentalBorderをセットするとUIが表示されました。
    これは、gutenbergのソースコードからコピーさせてもらったものです。
    これはborderのUIに関しては、まだ、実験段階ということなのでしょうか?
    WordPressのバージョンは6.3.2です。ご存じの方がいらっしゃればご教示ください。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 実際に書いたコードを共有されると、回答しやすいのではないかと思います。

    ここにペーストするのが大変なら、githubへのリンクとかでもよいでしょう。

    そこでblock.jsonのsupportsセクションに__experimentalBorderをセットするとUIが表示されました。

    これは想定された仕様です。theme.jsonのプロパティ名とblock.jsonのプロパティ名が一致するとは限りません。他にも __experimental プレフィックスが付くサポートは沢山あります。

    このプレフィックスが付くサポートはJSON スキーマでも定義されていない(=自動補完で候補にでてこない)ので、既に試されている通りGutenbergのコアブロックのblock.jsonを参考にすると良いと思います。

    トピック投稿者 Isamu Takeda

    (@itmaroon)

    早速、回答していただきありがとうございます。私が現在作成しているカスタムブロックは、すでにGithubで公開しています。
    今回質問したブロックはhttps://github.com/itmaroon/block-collectionsからダウンロードできますので、よかったらご覧ください。
    ただし、まだ未完成部分が多く、実用には耐えられない段階です。そのため、しょっちゅう更新しています。

    「theme.jsonのプロパティ名とblock.jsonのプロパティ名が一致するとは限らない」ということで合点がいきました。つまり、カスタムブロックにUIを表示させることと、そのUIを使用できるようにすることは別物ということなのですね。
    たとえば、borderであれば、block.jsonのsupportsセクションに

    "__experimentalBorder": {
     "color": true,
     "radius": true,
     "style": true,
     "width": true
    }

    と記載したうえで、theme.jsonのsettingsセクションに

    "border": {
     "color": true,
     "radius": true,
     "style": true,
     "width": true
    },

    とすれば表示されるようになりました。
    そういう理解でいいと思っていますが、間違っているところがあればご指摘いただけるとありがたいです。

    はい、そのような理解で合っています。

    トピック投稿者 Isamu Takeda

    (@itmaroon)

    ありがとうございました。この件についてはすっきりしました。今後ともよろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カスタムブロックにsupportsで設定したUIが表示されない」には新たに返信することはできません。