Gutenberg にカスタムブロックを追加してみよう

こんにちは、mimiです。

Gutenberg 3.0 がリリースされて、本年中のWordPress 5.0 リリースが現実味を帯びてきましたね。そろそろ、カスタムブロックの作り方ぐらい予習しておいても良さそうな感じなのでやってみました。

といってもやり方は
Creating Block Types – The new Gutenberg editing experience – WordPress
に全部載っているんですけども。

前提として Gutenberg プラグイン自体もインストールされている必要があります。

1. gutenberg-examples をダウンロード

https://github.com/WordPress/gutenberg-examples をダウンロードします。

これが WordPress のプラグインとして扱われます。ダウンロードしたものをプラグインディレクトリに入れてください。

2. 有効化の前にコメントアウト

現状、2018/06/14の時点では、そのまま有効化するとエラーが出るので、gutenberg-examples-master/index.php 内をいくつかコメントアウトします。

include '01-basic/index.php';
//include '01-basic-esnext/index.php';
include '02-stylesheets/index.php';
include '03-editable/index.php';
//include '03-editable-esnext/index.php';
include '04-controls/index.php';
//include '04-controls-esnext/index.php';
include '05-recipe-card/index.php';
//include '05-recipe-card-esnext/index.php';

ESnext で書いた場合のサンプルも入っているのですが、npm install して build しないと動かないようになっています。

ESnext の記述に慣れておいた方が良いので、書き方はそちらで覚えた方が良いと思いますが、ここでは取り敢えずカスタムブロックを表示することを目標にします。

3. サンプルがレイアウト要素として表示されます

有効化して、記事作成すると、「ブロックの追加」から追加したサンプルがレイアウト要素として表示されます。Example: Basic、Example: Stylesheets、Example: Recipe Cardの3つです。

日本語化してない時に撮ったスクショですみません。

ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。

Gutenberg 3.0.1がリリースされました

ああ!ちょっとPythonと遊んでいたら、Gutenbergがまたアップデートしてましたね!言い訳すると、WordPressの画面の更新のお知らせをスルーするのが長年の癖になってしまっていて、いつも気付くのが遅れてしまいます。

What’s new in Gutenberg? (5th June)

ブロックのリストの中身が変わっている!が、惜しいなー、よく使うブロック(Most Block)と共通ブロックのリストは被ってほしくないなあ…。でも改善されてて使い勝手がまたあがっています。

カスタムHTMLが!動き出したぞ!

そして。入れ子ブロックも進化しているー!

The editor has had support for nesting blocks since around the beginning of this year. With 3.0, a block author can now also register a block as being a child of another block by declaring parent: [ 'block-name' ]. This now causes a few changes in the interface: the root inserter won’t show child blocks unless the user is within the context of the right parent block. (It aims to reduce the amounts of blocks shown at any given time by making the inserter more contextual.)
Note that for a block to be effectively a child two conditions must apply:
The block must provide a valid parent property.
The parent must have an InnerBlocks area declared.

が、引用ブロックへの入れ子はまだ出来ないのね。でもこの感じだと作れそうな気配。

やっとこ、名前負けしない雰囲気が出てきたかもしれません。これは、そろそろ、ほんとに開発してみたくなってきましたね…。

Gutenberg 2.9.2 がリリース

先日、Gutenbergがまたまたアップデートしました。

What’s new in Gutenberg? (18th May)

プラグインがピンできるようになったのが大きな変更箇所っぽいですが、プラグイン入れてないので試せません。

先日、ブロックの入れ子に挑戦しているissueを見かけたので、おお?と思ったのですが、それはまだのようです。

でも現在進行系で開発されている様子がわかりますねー。リリース時に間に合わせるのかなー。

“Gutenberg 2.9.2 がリリース” の続きを読む

Gutenberg Meetup vol.2に参加してきた

Gutenberg Meetup vol.2 – connpass

に参加してきました!赤坂とか何年ぶりでしょうか。

そもそも、Gutenbergとは

えー、ここで言うGutenbergとは活版印刷技術の発明者ではなくて、WordPressに近々導入されるテキストエディタのプロジェクトの名前です。絶賛開発中。

現在はプラグインの形でリリースされていますが、WordPress5.0で公式エディタとして統合される予定になっているそうです。

一般向けの公式の紹介ページ的なのは多分ココ
The new Gutenberg editing experience – WordPress – A new editing experience for WordPress is in the works, code name Gutenberg. Read more about it and test it!
開発者向けなページは多分ココ
Introduction – The new Gutenberg editing experience – WordPress

えー、今この記事自体を頑張ってGutenbergで書いているのですが、6日前にアップデートが出ていました、今気がついた・・・(!)。リリースノートを見ると30個以上の変更点があるみたいです。アップデートしたら大分と改善されてたYO!もうほんと只今絶賛全力シャカリキに開発中です。

Githubのページはここ。多分、ココ見たほうが早いと思います。
WordPress/gutenberg: Printing since 1440. Development hub for the editor focus in core. Beta plugin is available from the official WordPress repository.

あ・・・!もしかしてショートコードの改行が効かない問題、解決したんじゃ・・・?!

TEST TEST 

あ、やっぱりそれはまだ駄目ぽいですね・・・。でも大分と期待される動きに近づいて来ています。凄いな・・・。

という訳で、いずれ来るGutenbergの荒波を共に乗り越えよう

というタカイココロザシを持った方々が集まった今日のMeetup、とても楽しかったです。参加者が10人ぐらい?で、言いたいことも聞きたいこともバシバシ発言できる丁度良い規模だったかも。

“Gutenberg Meetup vol.2に参加してきた” の続きを読む

【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。

こんにちは、みみです。

そういえばそろそろTwenty Eighteenまだ出ないのかなーとか思ってたら、Twenty Seventeenの1.5がリリースされていました。

Twenty Seventeen Theme Changelog « WordPress Codex
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.5

Various code improvements for formatting. (#41057)
Use consistent wording when referring to the front page in inline docs. (#42666)
Correct the number of recent posts in a comment in template-parts/page/content-front-page-panels.php. (#42621)
Remove unnecessary comment in front-page.php. (#42820)Underline links in comments. (#43317)

ということで大した変更はなさそうですが、そもそも1.3と1.4のリリース見逃してたよね・・・。特に大事がなくてほんとに良かった・・・。

“【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。” の続きを読む