Gutenberg（グーテンベルク）とは？
Gutenberg（グーテンベルク）は、WordPress 5.0 で搭載される予定のビジュアルエディターです。
2018年8月現在、WordPress 4.9.8 のダッシュボードからプラグインとしてインストールし、「Gutenberg を試す」ことができます。
Gutenbergでは、「ブロック」という機能によって、見出し、文章、画像などの要素を組み合わせて作成することができます。 HTMLを記述しなくても、リッチなページを簡単に作成できるようになります。
Gutenbergの名前の由来は、活版印刷を発明した、ヨハネス・グーテンベルク（Johannes Gensfleisch zur Laden zum Gutenberg）です。
Gutenbergの使い方
※2018年8月現在、Gutenbergは開発段階です。本番環境でのご利用には十分にご注意ください。※以下は記事執筆時点の情報です。Gutenbergのバージョンによって使い方が異なる場合があります。
Gutenberg を試す
WordPress 4.9.8 の管理画面ダッシュボードで、「Gutenberg を試す」ボタンを押下します。
これで、Gutenbergが有効になります。
なお、外部プラグイン等がGutenbergに対応していない場合、 Classic Editor プラグイン をインストールして、切り換えの準備ができるまで旧エディターを使い続けることができます。
新しい編集画面
投稿の編集画面です。エディターのデザインが大幅に変わっていることが分かります。
ブロックの作成
まずは、ブロックを作成してみましょう。左上のプラスアイコンを押下すると、ブロックの候補が表示されます。
「見出し」を選択すると、ページ下部に見出しブロックが追加されました。
文字を入力したり、見出しレベルを変更することができます。
「段落」を作成すると、背景色やテキスト色を変更することもできます。
埋め込み
次に、埋め込みブロックから「Twitter」を追加してみます。表示したいツイートのURLを入力するだけで、埋め込みが完了しました。
他にも、YouTube、Facebook、Instagram、などなどを簡単に埋め込むことができます。
カバー画像
次に、「カバー画像」を追加してみます。
画像を選択すると、テキスト入力エリアが表示されます。
テキストを入力すると、画像の上に重ねて表示されます。
画像自体に文字を入力しなくても、簡単にキャッチコピー付きの画像が作成できました。
HTMLとして編集
ブロック右側のメニュー（3点リーダー）から「HTMLとして編集」することもできます。
HTMLを直接編集できるようになりました。
再利用ブロック
ブロック右側のメニュー（3点リーダー）から「再利用ブロックに追加」することもできます。「再利用ブロック」は、編集したブロックの内容を保存して再利用できる、テンプレート機能です。
「再利用ブロック」の名前をつけて保存します。
すると、「再利用可能」ブロックの中に、保存したブロックが表示されます。
これを選択すると、保存したブロックと同じものを簡単に作成することができます。
コードエディター
画面上部右上のメニュー（3点リーダー）から「コードエディター」に切り替えることができます。旧テキストエディターのように、HTMLを編集することができます。
なお、ブロックはHTMLコメントで識別できるようになっています。
<!-- wp:cover-image -->...<!-- /wp:cover-image -->
既存ページの編集方法
旧エディターで作成した既存ページは、「クラシック」というブロックにまとめられます。ブロック右側のメニューから、「HTMLとして編集」または「ブロックへ変換」することができます。
※「ブロックへ変換」すると、CSSクラスやDIV等が削除されるため注意が必要です。
パーマリンク設定
記事のタイトル部分にフォーカスすると、現在のパーマリンクと編集ボタンが表示され、編集することができます。
テーマの対応状況
LIQUID PRESS シリーズテーマでは、Gutenbergの検証を行っております。LIQUID PRESS
現在、クリティカルな問題は確認されておりません。引き続き、Gutenbergの特長をより活かせるようなアップデートを行う予定です。
また、Gutenbergは、LIQUID PRESS と相性が良いため、様々な便利な使い方があります。
Gutenbergの便利な使い方
LIQUID PRESS をご利用の場合、Bootstrap4に対応しているため、豊富なCSSクラスを利用してレイアウトやスタイリングを行うことができます。 旧エディターでCSSクラスを追加するには、テキストエディタでHTMLを入力する必要がありましたが、 Gutenbergならブロックに対して簡単にCSSクラスを追加することができます。影付きのブロック
ブロックのメニュー＞詳細＞追加CSSクラス に、影を付ける「shadow」、パディングを付ける「p-3」を入力すると、 簡単に影付きのブロックが作成できます。
複数のCSSクラスは半角スペース区切り。
枠線付きのブロック
ブロックのメニュー＞詳細＞追加CSSクラス に、ボーダーを付ける「border」、パディングを付ける「p-3」を入力すると、 簡単にボーダー付きのブロックが作成できます。
画面サイズによる出し分け
ブロックのメニュー＞詳細＞追加CSSクラス に、表示用クラス「d-none d-xl-block」と入力すると、 大きい端末でのみ表示され、スマートフォンでは表示されないブロックが作成できます。
Bootstrap4公式ドキュメント
上記は、まだまだほんの一例です 😉使用可能なCSSクラスについて詳しくは下記をご覧ください。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
開発状況の公開
LIQUID PRESS では、GitHubにてテンプレートの開発状況および更新履歴を公開しています。詳しくは下記をご参照ください。
https://github.com/lqdjp/liquid-press/issues
