Gutenbergが1.1.0に

Gutenbergの1.1.0が公開されました。

どんなマイルストーンだったのか分かりませんが、1.0.0も（当たり前ですが）公開済みです。

Gutenbergで使われているReact.jsのライセンスに関する議論もあります（Github:gutenberg Issues、react-etc.net）が、それはそれ、というか、それがどうした、という感じで開発が進んでいるように見受けられます。

ブロック

少し触ってみましたが、見た目はスマートになっていい感じですが、ブロックという概念が直感的には分かりにくいかもしれません。

新規投稿画面は以下のようになっています。

英語の箇所は日本語に翻訳されると思います。
記事を入力してみましょう。

テキスト入力部分にカーソルがあると、エディタエリアの上に右寄せなどのメニューが表示されます。

さて、このテキストの下に画像を挿入しましょう。
画像・・・どこから挿入すればいいんでしょうか？
メニュー中にはそれらしいアイコンがない様子です。
マークで何かできるかもしれません。
クリックしてみましょう。。。と思ってカーソルを持っていくと「Paragraph」と「Image」というメニューが表示されます。

素直にImageを押してみます。

メディア挿入のエリアが表示されました。
このエリアがブロックです。

エディタエリアの上のメニューも、画像に沿ったものに変わっていますね。

ドラッグ＆ドロップで直接挿入できるので、この点では使いやすくなっています。

この画像の下にさらにテキストを入力する場合は、さらにのところから「Paragraph」を押して、テキスト入力ブロックを追加することになります。

を押すと、挿入できるブロックが表示されます。

他にも、埋め込み要素も挿入できます。

ちょっと見たことも無いサービスもずらりと並んでいます。
Embedは汎用的な埋め込みの様子です。
そのあとの、Twitter、YouTube、Facebook、Instagram、WordPressなんかはよく知っていますが、Animoto、Cloudup、CollegeHumor、などは全く聞き覚えがないのは、私が時代遅れだからでしょうか・・・

これらブロックや埋め込み要素は、プラグインなどで新たな種類を追加できるんだろうと思います。
予想ですけど。

また、右側の「Block」というメニューをクリックすると、現在カーソルが当たっているブロックに関する編集メニューが表示されます。
例えば、パラグラフでは以下のようになります。

しかしこれ、何かのスタイルを変えようとしたら、ブロック全体が変更されるんですよね・・・
テキストの範囲を選択してText Colorで赤を選ぶと、ブロックの文字全体が赤色になってしまいます。
部分的に変更する方法もあると思うんですけれど、ちょっとよく分かりませんでした。

テキスト入力

ここまではビジュアルエディタでの編集でしたが、テキスト入力もできます。
左上のメニューで切り替えます。

切り替えた結果がこちら

ブロック間が分かりやすいように

といったようなコメントが入っていますね。
このようなコメントは、実際に記事が表示される時にはHTMLに出力されないようです。
コメント内のwp:coreというキーワードで判断しているのかもしれません。
また、HTML5時代のタグになっており、figure タグが使われています。

感想

私個人的にはビジュアルエディタが非常に使いやすくなっていると思いました。
メディアもいちいちメディア挿入のダイアログを表示させなくても済みます。

しかし、ビジュアルエディタではブロックを並べていくのだというイメージが湧かないと、編集がやりにくいと感じられそうです。
一般の方にはちょっとハードルが高くなったなぁという感じです。