Gutenbergとは？
Gutenberg（グーテンベルク）とは、WordPress5.0より標準となった新エディターです。note.muやMediumなどのエディターに似ており、直感的に記事を書くことができます。「ブロックエディター」と呼ばれることもあります。
ここでは、新しいエディターを「Gutenberg」、古いエディターを「旧エディター」と呼ぶことにします。
SANGOのGutenberg対応方針
SANGOでは今後、Gutenbergで快適に執筆ができるように、アップデートを続けていく予定です。
ただし、Classic Editorを利用し続ける方の負担にならないよう、また、アップデートの負担を減らすため、Gutenbergに関わる機能やスタイルは全て「SANGO Gutenberg」というプラグインに統一します。SANGOでGutenbergを利用する場合、こちらのプラグインを導入してください。導入方法は後ほど説明します。
SANGOでGutenbergを利用する
以下の点をご確認のうえ、プラグインを導入してください。
- こちらのプラグインは、SANGOおよびWordPressの最新バージョンとの互換性のみを考慮して開発されます。Ver1.6以下では使用できないことにご注意ください。
- Gutenbergにはテーマに関わらず利用できるWordPress標準のスタイルが多く含まれています。SANGOでは、これらの標準スタイルはそのまま活かしていく方針です。これらの機能についてバグ報告や改善要望をいただいても対応できませんのでご了承ください。
- Gutenbergという名前のプラグインがありますが、このプラグインをインストールする必要はありません。
- Gutenbergの中でカスタムエディターを呼び出した場合、SANGOのスタイルがエディター上で反映されない部分があります。
- SANGO 3.0以上をご利用の方は不要です。逆に不具合の原因にもなりますのでインストールしないでください。
はじめて導入する場合は、以下のボタンよりSANGO Gutenbergプラグイン（zipファイル）をダウンロードしてください。
ただし、SANGO 3.0以上をご利用の方は不要です。逆に不具合の原因にもなりますのでインストールしないでください。
（ライセンス：GPL）
zipファイルは解凍せずに、WordPressダッシュボードの「プラグイン⇒新規追加⇒プラグインのアップロード」より選択してください。アップロード成功後、有効化をクリックしてください。
SANGO 2.4.0以降では管理画面のダッシュボードよりボタンをクリックするだけで、SANGO Gutenbergのインストール及び有効化が可能です
アップデートの方法
他のプラグインと同様に、ダッシュボード⇒プラグインより、自動更新することができます（上のような表示が出ていたら「更新」をクリックしてください）。テーマファイルをアップロードし直す必要はありません。
SANGO Gutenbergの機能
ここでは「SANGO Gutenberg」プラグインの機能をいくつか紹介します。
エディターにSANGOデフォルトのスタイルが反映される
見出し、引用、リストなどを挿入すると、SANGO標準のスタイルと同じ装飾でエディター上に表示されます。テーマカスタマイザーで選択しているメインカラーやアクセントカラーがこれらのスタイルに反映されます。
見出しブロック
Gutenberg専用のオリジナル見出しを用意しています。エディター上で⊕をクリックし「SANGO見出し」というブロックを選択することで、挿入できます。見出しのスタイルは、エディター右側のサイドバー（右上のをクリックして表示）で変更できます。
ボックス・ブロック
「タイトル付ボックス」という名前のSANGOオリジナルのブロックを使用することができます。ボックスの種類はエディター右側のサイドバー（右上のをクリックして表示）で変更できます。
アコーディオン・ブロック
アコーディオンとはクリックすると開く機能のことです。SANGO Gutenbergでは一切専門知識がなくとも、アコーディオンを配置することができます。
ここに文章や画像、ブロックなどを自由に書くことができます。
タイムライン・ブロック
ここにタイムラインの文章を書きます。
タイムラインの項目は必要な数だけ増やすことができます。
- リストや画像などを配置することもできます
- ブロックを使用するのに、専門知識は必要ありません
吹き出しブロック
吹き出しのブロックも用意されています
右から吹き出しを出すことも、背景や文字の色を変えることもできます
投稿一覧ブロック
文章の途中に記事一覧を差し込むことができます。カテゴリーやタグで絞り込んで表示することも可能です。 ショートコードでも記事一覧は差し込めるのですが、どのような表示結果になるかリアルタイムで確認できるぶん、ブロックを使った方が作業がはかどります。
タブブロック
文章の途中にタブをクリックすることでコンテンツを切り替えて表示するためのブロックを挿入することができます。
ここにタブ1のコンテンツが入ります
ここにタブ2のコンテンツが入ります
レビューボックスブロック
下のような評価テーブルを簡単に作成することができます。
参考ブロック
URLを入力するだけで簡単に参考リンクを作成できるブロック
関連ブロック
内部リンクを検索してカード形式で表示できるブロック
非公開: SANGO Gutenbergをお試しできるLive Demoページを用意しました
メッセージブロック
以下の様な注意事項や補足説明に利用できるブロック
このように補足メモを記事内に簡単に挿入することができます。
ここに注意事項が入ります
ボックスブロック
内容を囲って強調したい場合に利用できるブロック
ここに内容が入ります。
ボタンブロック
全18種類のボタンスタイルから選んで表示することができるブロック。アフィリエイトの計測タグも入力することができます。
リストブロック
全12種類のリストスタイルから選んで表示することができるブロック。
- リスト１
- リスト２
- リスト３
線ブロック
区切り線を入れるのに便利なブロック。
ヒーローブロック
トップページのメインビジュアルや記事の途中に注意を引きたいコンテンツがある場合に有効なブロック。
スライダーブロック
画像をスライドショーで表示するためのブロック。画像にリンクを設定することも可能です
条件ブロック
条件に応じて中身のコンテンツを出し分けるためのブロック。カテゴリーを判別してカテゴリーごとに広告を出し分けたり、モバイルとPCで表示するコンテンツを変えたりするときなどに便利です。
FAQブロック
よくある質問などを表現するのにぴったりなブロック。質問ごとに区切りをつけたい場合、「点線区切り」「線区切り」に変更できます。
コードボックスブロック
以下のようなコードをSANGOコードボックスブロックで表現できます。SANGOのカスタマイズ方法を記事にする場合などに最適かと思います。
<!DOCTYPE html>
<html>
<head>
<title>サルワカ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>ゼロからウェブデザインを勉強しよう！</h1>
<p>まずはHTMLについて学びましょう</p>
</body>
</html>フル背景ブロック
SANGOフル背景ブロックは、コンテンツの途中に背景色もしくは背景画像を設定することでコンテンツごとの区切りを強調するのに利用できます。フル背景ブロックの中には全てのブロックを入れることができます。
蛍光ペンやラベル装飾
段落やリストなどの好きなテキストを「蛍光ペン風」や「ラベル風」に装飾できます。
デフォルトブロックでもSANGOのスタイルが使用可能
「ボタン」や「画像」、「表」などのWordPress標準のブロックに対してもSANGO独自のスタイルバリエーションを追加しています。
テーブルブロックやリストブロックを選んだ状態で、ツールバーの［高度な設定］→［追加CSSクラス］に以下のクラス名を挿入すると、ブロック内のフォントサイズを変更できます ※ v1.5.2から対応
- font-small: フォントサイズを小さく
- font-smaller: フォントサイズをやや小さく
- font-larger: フォントサイズをやや大きく
- font-large: フォントサイズを大きく
問題の報告や要望について
下記リンク先よりお寄せください。
プラグインの更新情報
開発ロードマップ
今後の開発計画をしばらくはTrelloにまとめて公開します。