Photosynthesic blog

Gutenberg 7.1 Hands-on をしてきました @Tokyo WordPress Meetup

2019-12-23

雨は夜更け過ぎまで降り続いていました。

こんにちは、みみです。

Tokyo WordPress Meetup 12月勉強会 LT 大会 & 忘年会 にてGutenberg最新のハンズオンをしてきました。スライドを使わずにローカル環境上でわちゃわちゃしただけなので、スライドの代わりに以下を共有しておきます。


12/11にリリースされたGutebnerg 7.1(7.0も含む)のハンズオンです。Gutenberg自体の説明は省きます。

7.1では161のPRがマージされていて、其のうちの大きな機能の5つほどをピックアップしてお話してきました。

ちなみに、このDemoのWordPressのバージョンは開発版最新(5.4-alpha-46582-src)です。一部機能はGutenbergのプラグインをインストールしただけでは動作しません。

その1. Navigation Block

ナビゲーションブロックがリリースされています。ブロックで自在にナビゲーションブロックが作成できます。外観 > メニューとかで作っていたものがブロックで作れる感じですね。

このサイトの適当カスタムテーマだと、まだ2019/12/23現在、全然対応してないので今の処、こんな感じになっちゃいます↓。が、サブメニューも簡単に作れて良い感じ。簡易に目次代わりに使っちゃっても良いかも。

こういう風にサイト全体の機能を追加できるブロック(今のところプラグイン入れただけでは機能しない)が、その他新しくいくつか追加されています。

その2. new welcome UI

What’s new in Gutenberg? (11 December) – Make WordPress Core より

ビギナーに向けてのウェルカムUIががらっとアップデートされました。いい感じです。(翻訳しなきゃ)

その他あれこれアップデートされていますが、この日主に話したかった部分はこの次です。

3. Experiments

Gutenberg のプラグインをインストールすると出てくる左メニューの Gutenberg > 実験中 で実験的な機能を試せるようになっています。あくまでほんとに実験的な機能なので、仕様変更どんとこい前提で聞いてください。現在5個の機能がチェックボックスでオンオフできるようになっています。

これらはMattさんが言っていたGutenberg のフェーズ2関連の機能に当たるのだと思います。

3-1. Widget / ウィジェット

オンにすると、Gutenberg > ウィジェット(ベータ)というメニューが表示されるようになります。

これは前から存在はしていました。まだ全然仕上がってないですが、大分と形になってきています。Widgetの機能をブロックとして扱えるようになっています。ユーザーの自由度は跳ね上がるけれど、開発コストにめまいがする感じは、コンテンツのブロック化の比じゃない気もする。

ここ時間ないので端折りましたが、対応テーマに乗っけるのは大分と出来るようになってきました。が、フックが難しいのか、設定変更の保存がうまくいかない場合があります。たぶんこの機能はプラグインを入れるだけで試せるので、ぜひ触ってみてください。

3-2. Block directory / ブロックディレクトリ

カスタムBlockを編集画面上で検索できる機能です。

Block Directory: a New Way of Extending WordPress – Gutenberg Times より

という感じで、該当するブロックが無い場合は、ポコポコと公式登録された(?ここの仕様がまだ良くわからないけれど多分公式ディレクトリに登録されたBlockから検索出来るようにする予定ぽい)Blockを入れられるようになっています。これ実は今の処、一個一個がプラグインなので、このまま実装されると、ちょっとまたカオスが生まれそうですが、簡単にブロックの使い心地をテストできるのは良いかも、しれない。

続いて、残り3つの機能を見てみます。3つとも関連した機能なのでまとめて。

3-3. Full Site Editing

文字通りサイト全体を編集できるようになるものです。

Site Editor (beta) というメニューが追加されます。

まだ設定の保存もできませんが、Site titlePost titlePost TitlePlaceholder投稿コンテンツなどのブロックが試せるようになります。

3-4. Full Site Editing Demo Templates

現在設定中のテーマがFull Site Editingに対応していればテンプレートが適応されます。

Twenty Twentyでしかまだ確認していませんが、表示が切り替わります。が、まだ特に機能が試せないので、デモはしませんでした。これをオンにしたら、lib/demo-block-templates/の設定が反映される様子。たぶんこのPR辺り参照。

3-5. Page Templates

ページテンプレートという機能が使えるようになります。これで、先日話題になっていたBlock Based Themeが有効になります。

この機能自体はテストとしてしれっと作られ始めていたのを、 #core-editor でテスト段階でいいからテーマレビューチームからドキュメント起こそうぜとワイワイやっていて一週間ぐらいでわーっと動いてたやつです。詳細はいつものようにCapital Pでどうぞ。SlackとかIssueでの主張大事だな、と眺めていて思った次第。

外観に TemplateTemplate parts というメニューが追加されて、テンプレートが登録できるようになっています。まだslug固定なのですが、例えばindex というslugでテンプレートを作成するとindex.phpのように振る舞います。

て文字で書いても分かりにくいと思うので、ここの詳細は続くToruさんのスライドをご参照ください(公開お待ちしています)。

2019/12/23 15:08追記: Toruさんのスライド公開されました。有難うございます!

https://speakerdeck.com/waviaei/future-of-the-themes-had-a-go-at-making-block-based-theme
テーマはこうなる? Block-Based Theme を作ってみた / Future of the Themes? — Had a go at making block-based theme – Speaker Deck

と、いうわけで、またまたぐわーっとアップデートしているので、ともかく一度、触ってみるのが良いのではないでしょうか。

コワーキングスペース茅場町 Co-Edo さんでの今年最後のTokyo WordPress Meetupは、すっかりこの1年余で見慣れた方だらけでしたが、お二人初参加の方がいらっしゃいました。告知がむっちゃ短かかったのに良くぞご参加くださいました。

あと懇親会がセットになっていて、ビールサーバーで美味しいビールが飲めるのはとても素敵でしたし、気軽で良いなあ。新しい人にお声がけをするのが実はかなり下手なのですが、居酒屋と違って移動しやすくて、疲れたら座れるのは良いですね。

そして何故か銀座SIXで飲む突発追加イベントにて強制英会話レッスン。有難い。

で、最終的にはまた有志でカラオケったのですが、気がつけば先月から何故かjonとカラオケに行き過ぎな気がするので来年は自重したいと思います。

いやはや、慣れと比例してどうにもオバサンらしい図々しさが顔を出すので気をつけたいなと反省だけはして、また歳を重ねるわけですね。初めてお会い出来た方、そしてお付き合いいただいた皆様、ありがとうございました!これに懲りずまたご一緒していただければ幸いです。メリー・クリスマス、そして、良いお年を!

この記事を書いた人

mimi

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