前回の(参考)パート1から更にいろいろテストして見ました。
触ってみての感想としては、「便利!」
今後のテンプレート販売されるものに、こういったあらかじめデザインされたブロック要素がどんどん追加されて来そうですね。
制作会社としてもこの機能をうまく使うことで、制作期間の短縮に大いに活躍しそうです。
既に、いろいろなブロックが詰め込まれたプラグインがあるみたいですが、軽く触ってみた感じではそこまで多くのブロックはなかったです。
また、カスタムブロックを簡単に作れるプラグインもあったので、今回やっている事については、特に書く必要はないかなと思っています。
下記プラグインで恐らく簡単に出来るはずです。
それと気になるのは、カスタムブロックの作成を検索して出てくる情報は、ほぼほぼReactを使用している点です。あまりReactについての知識は深くないのですが、Wordpress的にはそちらを使うのが推奨されているのでしょうか?
そのあたりもよく分からないので、今回は前回のパート1で出したコードを紹介するに留めておこうかと思います。
上記動画では、管理画面の見た目と、表示側の見た目を同じになるようにしました。
position: rerative; を使用している場合、編集箇所が絡んでくると必ず表示が崩れてしまいます。
.editor-rich-text 辺りのクラスを弄ってあげて且つ、場合によってはデザイン自体をブロック要素で囲むことで、この辺りのズレを修正することが可能です。
※管理画面側のCSSと、表示側のCSSと分けて設定してあげる必要があります。
今後、CODE-BASEとしても、ここに汎用性の高いブロックをどんどん追加していき、制作短縮に役立てようと思います。