SANGO Gutenberg 1.68.0よりカスタマイズブロックが追加されました。これはブロックを完全に一から自作するためのブロックになります。SANGOのブロックだけではどうしても表現できないデザインがある場合などにご活用ください。
例えば以下のようなアイコンブロックやマップブロックを【SANGO カスタマイズブロック】で作ることができます。
SANGO カスタマイズブロックの呼び出し方
まずはエディターを開き、ブロック追加ボタンをクリックします。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/1b96824b9df1ea2c6f072271d87e12e8.png)
クリックすると、ブロック一覧が表示されるのでその中から「SANGO カスタム」と書かれたブロックを選択します。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/33115138ee01151995d099092ac89e35.png)
もしくは /custom とショートカットコマンドをエディター内で入力いただくことでスムーズに呼び出すことが可能です。
SANGO カスタマイズブロックの使い方
以下の画像のようなイメージで、右セクションにあるカスタムHTMLを設定していきます。またHTMLには以下の画像のようにMustache記法が利用できます。
カスタムコントロール で設定した変数をカスタムHTML内で出力することが可能です。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/4fdf44ffff375601dbf95b1ba381dbcd.png)
また、{{#isAdmin}}ここに内容{{/isAdmin}} このようにisAdmin 変数を使うと記事の編集画面でのみHTMLの内容を出力したりすることも可能です。
カスタムHTMLを記述するとエディター内にもリアルタイムでHTMLの出力結果が表示されます。以下出力イメージです。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/9e98e457fe7a75ba9c5c973bba6fe70e-1000x196.png)
またHTML内では必要に応じてクラス名をつけて、同じく右セクションにあるカスタムCSSで装飾したり、カスタムJSで動きをつけたりしましょう。カスタムCSSに限ってはそのブロックだけにCSSが適用されるので他のブロックにCSSが影響されることはありません。
また、カスタムJSについてもブロックを block.querySelector で取得いただくことで該当のブロックを安全に取り出すことができます。また、カスタムJSについては編集画面では実行されず、実際の表示側でのみ有効です。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/3a0f28e567bdd2eb40208932307b77f7.png)
HTML内では、右セクションのカスタムコントロールで設定した変数が利用できます。例えば以下の画像のようにカスタムコントロールで、customIcon という変数を設定した場合、HTML(Mustache)の中でcustomIcon を変数として利用できます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/edabbf4db9abd2dc7f5692128d2b3dca.png)
カスタムコントロールで設定した内容はカスタム設定として右セクションに表示されます!
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/569da0d525c9cbf6c872f35edceb1c5a.png)
カスタムコントロールについての詳しい記事はこちらをご覧ください。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/05/custom-control-1-160x160.png)
プリセット機能で使いまわそう
一度HTMLなどを設定したカスタムブロックはプリセットとして使いまわしましょう!設定をプリセットとして保存すればいつでもブロックを呼び出すことができます。
詳しくは以下の記事をご覧ください!
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/customize-block-160x160.png)
SANGO Landにご協力ください
SANGOには他のユーザーが作ったブロックをみんなで共有して使えるようにする試みとしてSANGO Landというギャラリーサービスがあります。是非こちらのSANGO Landに自作ブロックを投稿いただけますと嬉しいです!
![](https://saruwakakun.com/sango/wp-content/uploads/2021/10/contents-160x160.png)
コメントを残す