カスタムブロックの作成 [React/練習]

概要

画像アップロードと複数の入力フィールドを備えたブロックを作りました。環境構築はcreate-guten-blockを使用しました。

Wordpress4系のバージョンで採用特設サイトのWordpress構築を担当した時は、投稿画面にカスタムフィールドを羅列し説明文をつけて、ユーザーが迷わずに入力できるように構築していました。

5系のバージョンアップでブロックエディターができたことで、以前よりも視覚的・感覚的にページを作成できるようになりました。

ブロックの機能を活かしてカスタム投稿等を構築すれば、クライアント側のページ更新作業をより簡単にできるようになるのではと思い、サンプルとしてこのブロックを制作しました。

実際に公開されるデザインをそのままエディターに表示できるので「見たまま」に入力でき、ユーザーが迷う要素を減らすことができます。それぞれの入力フィールドには説明文としてプレースホルダーを入れました。

エディター側と公開側のスタイルを細かく調整する必要があり、特に、デフォルトで適用されるエディター内のCSSを確認しながらCSSを記述する作業に時間がかかりました。

カスタムフィールドのように、常に投稿画面に表示させることはできないか？という疑問が残ったので今後の課題にしたいです。

Githubで公開しています。

SCSS: prc-block/src/profile-box/style.scss/ （CSS for both Frontend+Backend）