Gutenbergが1.1.0に

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

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

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

ブロック

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

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

英語の箇所は日本語に翻訳されると思います。
記事を入力してみましょう。
Gutenbergテキスト入力
テキスト入力部分にカーソルがあると、エディタエリアの上に右寄せなどのメニューが表示されます。

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

素直にImageを押してみます。
Gutenbergメディア挿入
メディア挿入のエリアが表示されました。
このエリアがブロックです。

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

ドラッグ&ドロップで直接挿入できるので、この点では使いやすくなっています。
Gutenbergメディア挿入結果

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

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

Gutenbergのブロック

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

Gutenbergの埋め込み

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

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

また、右側の「Block」というメニューをクリックすると、現在カーソルが当たっているブロックに関する編集メニューが表示されます。
例えば、パラグラフでは以下のようになります。
Gutenbergのブロックメニュー
しかしこれ、何かのスタイルを変えようとしたら、ブロック全体が変更されるんですよね・・・
テキストの範囲を選択してText Colorで赤を選ぶと、ブロックの文字全体が赤色になってしまいます。
部分的に変更する方法もあると思うんですけれど、ちょっとよく分かりませんでした。

テキスト入力

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

切り替えた結果がこちら
Gutenbergのテキストエディタ

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

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

感想

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

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

楽天市場

Amazon.co.jpアソシエイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)