Photosynthesic blog

自分で作ったテーマをGutenbergへ対応させていこう その1

2018-12-23

こんにちは、みみです。

冬休みの独り言として、WordPress5で正式導入された新エディター(Gutenberg)へのテーマでの対応をどうするのか、という事を書いてみようと思います。

・・・とはいえ、この半年ほどWordPressコミュニティに参加させて貰ってきて感じたのは、テーマをイチから作ってる人はあんまり居ないっぽいし、需要もそんなに無いっぽいので「独り言」としてみました。

スポンサーリンク

何に対応すれば良いのか?

そもそも現時点で言うところのテーマでのGutenberg対応ってなんぞ?という話なのですが、兎にも角にも先ずは各種ブロックを使用した場合の表示に対応する、というのが基本中の基本な気がします。テーマに合わせたカスタムブロックを作るとかエディタ側の表示を揃えるのはその次のフェーズな気がするのだけども、もうこの時点でめっちゃ大変かなと。だって、ブロックの組み合わせを全チェックしていくのめんどいですよね。

Gutenberg対応を思って最初から想像するだに、ずーっとめんどくさいなーと思っているのはこのパターン出しなのです。ユーザーの自由度をグンと上げてくれる素晴らしいエディターになってきたと思うのですが、その分、開発者泣かせなエディターです。

だから全パターンを書き出したテンプレとか出てないかな、と半年ぐらいチラチラ探しているのですが探し方が悪いのか見つけられていません。ご存知の方がいらしたら教えてください。誰かやってると思うんだけどなあ…。

2018/12/24 8:30 追記:Capital P で紹介されてました!見落としてたー!
Block Unit Test for Gutenberg | WordPress.org というプラグインがあるそうです。 Before Gutenberg – テーマをGutenbergに対応させる – Capital P より

そういうイメージなので、リリースギリギリまで仕様がコロコロ変わってきたGutenbergに対応してます!って宣言するのってかなり骨が折れるよなあと思っているので未対応って言い張るテーマがあるのもまあ頷けるのです。ただし言い張った時点で有料化は辞めるべきだとは思いますが。

つまり、だったら既にがっつり対応されている素晴らしいテーマ(Snow Monkey とか Snow Monkey とか)やプラグインを使えば良いじゃないか、とも思うのですが、やはり独立独歩が信条なWordPressユーザーとして他力本願がどうにも性に合わないので自前でもぽちぽちやって行こうと思います。

手始めに対応しておきたいブロック

という訳で、全ブロックに対応するのがしんどくても、早めに取り組んでおきたい優先度の高いブロックというのがある気がしています。完全対応している!とは言えないまでも、ここさえやっておけば取り敢えずは、というブロックです。

私が気になったのは以下の4つ。

レイアウト要素:ボタン(button)

ボタンブロックのデザインパターンは3つ。これに色の設定がありますが、まずベースのフォルムが落ち着かないと思うので好きに上書きしましょう。

(ってコレ書いてて、あっもう無理って思ったのが、is-style-っていうクラス名。なんじゃ is-style て!CSSやぞなめとnghjkl;)

ボタンのデザインをする時に、形の違いよりもサイズの大小とPrimaryとSecondaryを作るのがクセというか、よく使うパターンだから形違い3つなのも、スタイルという名前も色々とモヤモヤするブロックではありますが、その辺りはいずれカスタムブロックを作って解消していきましょう。

レイアウト要素:区切り hr

続いて区切り線hr。意外と目立つというか、デザインに影響を与える要素なのでスタイルを当てておいたほうが良いと思います。デザインも3パターンあります…。ユーザーがそれに気付くかどうかは別だけど…。


標準では小さめ。


幅広タイプ。


ドットタイプ。の3種類あります。

一般ブロック:引用 blockquote

引用ブロック、使ってますか?こういうやつです。

幸福は幸福の中にあるのではなく、幸福を手に入れた瞬間にある。

Happiness does not lie in happiness, but in the achievement of it.

Fyodor Mikhailovich Dostoevsky (フョードル・ミハイロビッチ・ドストエフスキー)

このブログではこういう格言めいたことはあんまり引用しませんが、公式の文章とかを引用する時とか、意外とあるので結構使います。

大きい引用…って何に使うのかな?

引用にもスタイルが2つあって、大きい引用(プルクオート)があるのですが、これはあんまり使わないと思うので今の処、このブログでは特にデザインを当てていません。ちょっと半端なのでソースは貼らないでおきます。

レイアウト要素:ページ区切り(nextpage)

最後はページ区切りです。ページ区切りは前からあるwp_link_pagesを使ったブロックなので、もともと対応している人には必要ない作業。テーマのsingle.phpなどに

とか書いて適切なCSSを適応しておいたら良いやつです。

以上4つのブロックをピックアップしてみました。


で、こういうの、需要は少ないとはいえ、天下のWordPressのことだから絶対同じような内容の記事誰か書いてる気がする…と思ったら見つけましたー。

Getting your theme ready for Gutenberg – Bill Erickson

ブロックのチョイスも被ってて嬉しい。私は長くなったので記事を分けようと思っていたのですが、エディター側のスタイルの事とかも書いてあります。待てない方(inai)は要チェック!あとblockquoteのソースも載ってますので参考になるかも。ていうかこの記事あれば別に次書かなくても良い気もしてきた…。


「テーマをGutenbergへ対応させる」関連の記事一覧

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter