先日の記事でこんなのを書きました。
このメリット・デメリットを書く欄をBlock Labを使用して作成しているのですが、赤と青が違うだけで別のカスタムブロック（オリジナルのGutenbergブロックの事）を作るのなんて面倒臭いですよね…
という事で、今回はこれを一つのカスタムブロックで色を切り替えできるように作ってみました！
この時のPHP, CSSファイルを公開します。
BlockLabでこういうのを作りたい方は、ぜひ使ってみてください！
完成形
完成品は冒頭の画像の通りで、入力欄は以下のようになっています。
タイトルとテキストは普通に入力できて、「color」欄でREDかBLUEを選択できるようにしています。
こうすれば何かと使い勝手が良いですよね！
ちなみに名前は「PointBlok」と名づけました。以降はこの名前で呼びますね！
事前知識
冒頭でも言いましたが、今回のカスタムブロックは「Block Lab」というプラグインを使って作成しています。
以下の記事で基本的な使い方は解説していますので、今回は割愛しますね。
これからBlocl Labを使い始める方は先にこちらを読んでください！
Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。[…]
作り方
それでは早速作っていきましょう！
BlockLabの設定
まずはBlockLabの設定画面はこのように入力してください。
タイトルとSlug（ファイル名になる）はこちら
- Title: PointBox
- Slug: box-point-color(設定画面の右側に入力欄があります)
続いてFieldはこちら。
・Field 1. Title領域
・Field 2. 主テキスト領域
・Field 3. 色選択
あとの部分はお好きなように入力し、保存してください。
PHP, CSSの記述
BlockLabの設定ができたら、次はPHP, CSSの記述です！
本来こちらは最も難しい所ですが、今回はコピペでOK!
以下をコピーして、適切な箇所にファイルを配置してください。
・ bloc-point-color.php
・bloc-point-color.css
これで完成です！
使ってみる
それでは使ってみましょう！
タイトル、テキストを入力し、colorはBLUEにすると…
青色のボックスになりました！
まとめ
これでPointBoxの完成です！
BlockLabの基本的な使い方をマスターした人だったら、10分もかからず出来てしまうんじゃないかなと思います。
PHPもCSSもできない筆者が頑張って書いたコードです。
ぜひ使ってくださいね！
沢山使ってくれると筆者が報われますよ
使ってくれた事教えてくれたら更に喜びます…!!
今回の記事について、もし不明点があればコメント欄にてお問い合わせください。
TwitterのDMも受け付けていますので、お気軽にご連絡くださいね。