SANGOで「Gutenberg」を約2週間使って感じたこと

読了時間: 約618

Gutenberg

巷ではすこぶる評判が悪い「Gutenberg」です。
WordPressもついに大台(Version5)に乗りましたし、前回「Gutenberg」(グーテンベルグ)を使って、初めての記事を書いてみました。
『クラシックエディタ』もインストールしていますが、勉強の為あえて使わずに書きました。
しかしながらやはり不安はありましたね。
取り敢えず記事を一つしか書き終えていませんが、現時点での使い心地を感じたままで書いてみます。

私の現状とレベル

知っておいてもらったほうが話も分かりやすいんじゃないかな?


LEVEL
  • 2018年5月よりWordPressで1からブログを始める
  • それまでブログ経験は一切なし(現時点で89記事)Twitterでたまにつぶやく程度だった
  • WordPress 5.0.2 (SANGO Child テーマ)
  • 『クラシックエディタ』インストール済

MEMO
2019/01/10追記
4年ほど前2ヶ月間程ですが、アメブロをしていたみたいです(笑)
私の理解度
WordPress
(3.0)
HTML.CSS
(2.0)
Gutenberg
(2.0)
SANGO
(3.0)
総合評価
(2.5)

まぁこの程度だと思って読んで下さい。

現状クラシックブロックは必修

現状クラシックブロック無しで記事を書くのは無理ではないでしょうか?
ということは結局まだまだ過度期ということなのでしょうね。
何しろテーマ側の対応が追いついていません。
私は現在「SANGO」と言うテーマを使用していますが、「SANGO」に限らずほとんどのテーマが対応に苦慮しているのだと思います。
「SANGO」の中の人は精力的に動いてくれています。
「開発ロードマップ」をこちらに公開しています。

SANGO進捗状況

「SANGO」の進捗状況をネットに公開している画像です。
少しずつではありますが、着実に進んでいるようです。
今後に期待しています。

メリット

  • ページ内リンクが簡単
  • 表作成が出来る
  • ボタン作成が出来る
  • 記事の全体像が分かりやすい
  • ビジュアルエディタとテキストエディタを行き来しなくてすむ
  • 項目の順序を簡単に変えられる
  • よく使うものは「再利用ブロック」に保存しておける

ページ内リンクが簡単

私も結構使う機能ですが、「Gutenberg」では標準でサポートされています。
この機能をよく使う人には便利ですね。

HTMLアンカー

例えば見出しのブロックをクリックすると、「HTMLアンカー」の欄が出てきますが、そこに「jump」とか記述すれば飛ぶ機能ですね。ちなみに「ボタン作成が出来る」見出しまで飛ばします。
ここをクリック
「ここをクリックして戻る」ボタンを押して、又ここに戻って来れます。
やり方はいたって簡単です。

リンクボタンをクリック
  • 飛ばしたい見出しの前に例えば「jump」と記述
  • リンクボタンをクリックする
  • 飛ばす側に#jumpと記述

これが「クラシックエディタ」だと、テキストモードで例えば
<div id=”jump”></div>
と指定します。

見出し3の部分に飛ばすなら
<h3 id=”jump”>ボタン作成が出来る</h3>
後は飛ばす側の設定は上と同じ要領で、#jumpと記述すれば良いのですが、id=”jump”をテキストモードで指定してやらないといけないので、少し手間です。

MEMO
ちなみに今回は、サンプルとしてidの名前を jump にしましたが、これは jump じゃなくても半角の英数字であれば何でもOKです

記事の全体像が分かりやすい

見出し一覧
  • 単語数
  • 見出し
  • 段落
  • ブロック
  • 文章の概要

これらがひと目で分かるようになりました。
しかもクリックするとジャンプ出来ます。
長文書く人には便利な機能ですね。

表作成が出来る

表作成
 AB
12/28AB1BC2
12/29AB3BC4

以前は表作成をしようと思えば、ExcelやNumbersを使ってコピペするか、プラグイン「TinyMCE Advanced」や「TablePress」などを使わなければ作成出来ませんでした。
ちよっとした表作成なら標準で出来るので助かります。
(中・上級者の方ならHTMLで直接コードを書けば可能)

CHECK
サルワカさんのサイトで参考になる記事はこちらです。
表(table)の作り方と装飾の変え方【HTML&CSS】

ボタン作成が出来る

テーマ側でも徐々に対応してきています。
簡単なボタンなら標準で作成出来るようになりました。

SANGOボタンスタイル
SANGOも一部対応中

ビジュアルエディタとテキストエディタを行き来しなくてすむ

HTMLとして編集

これも結構大きなポイントですね。
<p>タグや<br>タグがおかしくないか、時々確認したりしています。

項目の順序を簡単に変えられる

動画を用意しました
この見出しを移動している様子です。
少し分かりにくいかもしれませんが、ドラッグして希望の場所付近に赤いラインが出ますので、ペーストすればOKです。

赤ライン上でペースト

よく使うものは「再利用ブロック」に保存しておける

再利用ブロックに追加

いわゆる「テンプレート」機能ですね。
出来るだけ「クラシックブロック」を使わないようにするために、結構入れてます。
今後テーマ側で対応状況が進めば、又使い方も変わってくるとは思いますが…

デメリット

  • AddQuicktagsが使えない・一部のプラグインが対応していない
  • テーマ独自の機能が使えない・もしくは一部しか対応していない

プラグインの対応

クラシックブロックにはテキストモードがないため、テキストモードで使えていたボタンは現状Gutenbergでは使えないですよね。
今後「AddQuicktags」がGutenbergに対応するのか少し気がかりではあります。
「TinyMCE Advanced」も同様です。

2019年2月9日 追記

「AddQuicktags」はクラシックモードでは使えますね。

「TinyMCE Advanced」もGutenbergに対応したようです。

クラシックブロックの挿入
  • ブロックの追加
  • フォーマット
  • 「クラシック」をクリック

テーマ側の対応

「SANGO」に関しては先程書いたとおりです。
精力的に対応してくれているようです。
私がよく使うものは既に「再利用ブロック」に保存していますが、現時点ではまだまだ未対応の部分が多いですね。
しかしながら例えば見出しなどは、「style.css」の子テーマでお気に入りのスタイルを指定している人が多いのではないでしょうか?
問題は「見出し」以外で今後テーマの作者さんがどう対応していくかでしょうね?

よく分からない点

  • エラー解析を見ても良く分からない
  •  追加CSSの欄があるが、どう使えば良いか分からない

エラー解析

見ても良く分からないのは、ひとえに私の実力です笑
例えばこんな感じでエラーが出たとします。

エラー表示
エラー画面

素直に指示に従い、変換のボタンを押してます。
しかしエラー解析をしてくれるのだから、これはメリットに含んでも良いですね。

追加CSS欄

追加CSS

まだ使い方がよく分かりません。
ここにコードを書くとデザインやレイアウトが個別に設定できる…と言う認識で良いのかな?
するとこれはテーマ作者の仕事かな?
スキルのある人以外触ることはないでしょう。

まとめ

使い始めてまだ2週間ほどですから、「Gutenberg」の良さも十分引き出せていませんし、今後もどんどんパワーアップするでしょうから楽しみです。
何だかんだ言ってもこれからブログを続ける限り、「Gutenberg」を遅かれ早かれ使うことになります。
まだ使っていない方は「習うより慣れろ」で行きましょう。
私は結構気に入ってますがね。
また役に立つ情報を仕入れたらアップします。
以上、お読みいただきありがとうございました。
こちらの記事も合わせてどうぞ
アイキャッチ画像【WordPress】プラグインのスリム化を目指す②最低限必要なのは7個です