カスタムブロックにsupportsで設定したUIが表示されない

  • 解決済 Isamu Takeda

    (@itmaroon)


    11ヶ月、 2週前

    日々カスタムブロックの作成にいそしんでいる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件中)
  • 水野史土

    (@ounziw)

    11ヶ月、 1週前

    実際に書いたコードを共有されると、回答しやすいのではないかと思います。

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

    Aki Hamano

    (@wildworks)

    11ヶ月、 1週前

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

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

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

    トピック投稿者 Isamu Takeda

    (@itmaroon)

    11ヶ月、 1週前

    早速、回答していただきありがとうございます。私が現在作成しているカスタムブロックは、すでに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
},

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

    Aki Hamano

    (@wildworks)

    11ヶ月、 1週前

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

    トピック投稿者 Isamu Takeda

    (@itmaroon)

    11ヶ月、 1週前

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

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