WordPressブロックエディタのブロック要素の使い方を解説

ブロックエディタの概要

Gutenbergは、WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。現在、プロジェクトは WordPress のあらゆる部分と関連する4フェーズのプロセス、編集、カスタマイズ、コラボレーション、多言語対応の最初のフェーズにあり、新しい編集体験「ブロックエディター」にフォーカスしています。

WordPressブロックエディタは、WordPress 5.0から導入された新しいコンテンツエディタです。従来のテキストベースのエディタとは異なり、段落、画像、見出しなどを「ブロック」と呼ばれる要素として扱い、それらを組み合わせてページや投稿を作成します。

ブロックエディタの主な特徴:

• 直感的な操作: HTMLやCSSの知識がなくても、ドラッグ＆ドロップなどの操作で簡単にレイアウトを作成できます。
• WYSIWYGに近い編集: 編集画面でコンテンツがどのように表示されるかを確認しながら作業できます。
• 豊富なブロック: テキスト、画像、動画、リスト、引用など、様々な種類のブロックが用意されています。
• 柔軟なレイアウト: カラムレイアウトやメディアとテキストの配置など、より複雑なレイアウトも比較的簡単に作成できます。
• 再利用可能なブロック: よく使うブロックを保存しておき、再利用できます。

ブロックエディタのメリット:

• 初心者でもリッチなコンテンツを作成しやすい。
• レイアウトの自由度が高い。
• 編集作業の効率化が期待できる。

ブロックエディタは「Gutenberg（グーテンベルク）」という開発コード名でも呼ばれています。

テキストブロック

Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor」 は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

テキストブロックには記事を書くためによく使われる要素が配置されています。

• 段落は<p>タグで囲まれ文章を記述できます。
• 見出しは<H2～６>タグで囲まれ、見出しを記述できます。
• リストは<ul,ol>タグで囲まれ箇条書きを記述できます。
• 引用は<BLOCKQUOTE>で囲まれ引用を埋め込むことができます。
• コードはプログラムのソースコードを記述。
• 整形済みテキストは<PRE>タグで囲まれスペースや改行などをそのまま等幅フォントで表示
• プルクオートは強調された引用を記述できます。
• テーブルは表を記述
• 詩は歌詞などの引用に使います。

メディアブロック

WordPressでは、文章や画像などをブロックという単位で管理するブロックエディター（Gutenberg）が標準搭載されています。ブロックエディターでは、HTMLやCSSの知識がなくても、文章や画像の位置調整やレイアウトの変更が簡単に行えます。

• 「画像」は画像を挿入することができます。
• 「ギャラリー」は複数の画像をギャラリー形式で表示できます。
• 「音声」は音声プレーヤーを埋め込みます
• 「カバー」はテキストオーバーレイを含む画像か動画を追加できます。
• 「ファイル」はファイルをダウンロードするリンクを追加します。
• 「メディアとテキスト」では画像と文章を横並びのレイアウトにします。
• 「動画」は動画を埋め込むことができます。

Gutenberg

Gutenberg はWordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロックを利用して見出しや本文、画像等を作成し組み合わせていきます。ブロックや文章を入力するエリア以外は基本的に従来と同じ使い方ができます。

「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」

サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。

メリット	デメリット
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる	高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる
コンテンツの色やサイズを細かく設定できる	ブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する
ブロックごとに簡単にコピーしたり入れ替えたりできる	クラッシックブロックがビジュアルエディタにしか対応していない

Gutenberg への移行

「Gutenberg」はいづれWordPressのデフォルトエディタになることは間違いないでしょう。当初の予定では2021年12月31日で「Classic Editor」のサポートを終了するはずでした。しかし、その後思ったほど「Gutenberg」の使用率が高くないため、2022年以降、必要ならばサポート保守される方針に変更されました。

WordPress導入時から「Gutenberg」を利用しているサイトは問題ありませんが、「Classic Editor」でサイトを構築している場合はそれなりに準備をされることが推奨されます。エディタを切り替えることで表示されない等はありませんが、編集に戸惑ってしまう、編集に関するプラグインが利用できないといったことは発生します。（「Add Quick Tag」は機能しなくなります。）この際徐々に変更されるのがお勧めかもしれません。

WordPressのブロックエディタ（Gutenberg）は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは？