WordPress5.8の新機能

公開: 2021-06-24

WordCamp Europe 2021でのプレゼンテーション、特に、ブロックエディターで提供される新機能のビデオを含むMattMullenwegとMatiasVenturaの間の講演を見た後、私はこの新しいバージョンのWordPressを試してみたいと思いました。 7月中旬にリリースされようとしている5.8。

そこで、WordPress 5.8-beta2バージョンをインストールして、今後の新機能について説明できるようにしました。このバージョンはWordPress.orgのTwentyTwenty-oneテーマでテストしたものであり、サイトにインストールしたテーマによっては、記載されている機能の一部が利用できない場合があることに注意してください。

ネストされたブロックとブロックパターン

WordPress 5.5の登場により、ブロックエディターにはブロックパターンの概念が含まれていました。ブロックパターンの考え方は非常に単純です。これらは、ページや投稿の作成に使用できるブロックのグループで構成される事前定義されたセクションまたはスニペットです。ブロックパターンは、2つのボタンを表示するセクションや、人目を引く複雑なレイアウトの価格設定セクション、またはページ全体のレイアウトのような単純なものにすることができます。

ブロックやブロックパターンの編集をより簡単で快適にするために、多くの作業が行われています。そして、特に、それらの挿入と移動をより速くするために。まず、左側のメニューバーに表示されているブロックとパターンのリストからそれらを選択し、ページの領域にドラッグして挿入します。

グーテンベルクでパターンを選択して挿入するスクリーンショット — ブロックとパターンのリストから、ページに直接挿入するブロックまたはパターンを選択してドラッグできます。

最近、ドラッグアイコン（6ドットアイコン）も追加され、コンテナ内の任意のブロックを移動できるようになりました。

グーテンベルクエディタでブロックをドラッグするオプション — ドラッグアイコンをクリックすると、列タイプのブロック内にあるカバーブロックを移動できます。

ブロック内にいるときは、 Escキーを押して選択モードに切り替え、 Enterキーを押して編集モードに戻ります。

グーテンベルクエディタの選択モード — グーテンベルクエディターでは、EnterキーとEscキーを使用して、選択モードから編集モードに切り替えることができます。

選択モード（ Escキーを押すことを忘れないでください）では、ブロック構造間のナビゲーションが最適化されます。ブロック内でマウスを動かすと、そこに含まれる各ブロックの境界を確認できます。このようにして、親ブロック内の構造とドラッグブロックを理解しやすくなります。

ブロックエディタでネストされたブロックを選択するスクリーンショット — 選択モードでは、カバーブロック内でマウスを動かすと、そこに含まれる各ブロックの境界を確認できます。

そして今、この新しいバージョンでは、編集モードに切り替える（ Enterキーを押す）と、ブロックを移動するときにそのコンテナーの境界も表示されるため、選択、ドラッグ、およびドロップのプロセスがはるかに簡単で直感的になります。

WordPress5.8エディターでブロックをドラッグするオプション — WordPress5.8エディターでブロックオプションをドラッグするスクリーンショット。

画像版

ブロック編集を改善するという考えを続けると、重要なブロックは画像タイプのブロックです。画像、テキスト、メディアタイプのブロック、または列などの任意のコンテナタイプのブロックに画像をドラッグすることで、画像を挿入できることはすでに見てきました。

しかし、すばらしい目新しさは、メディアライブラリに移動しなくても、エディタ自体で挿入された画像を編集および変更できることです。

ブロックエディタの画像編集オプション — ブロックエディタで画像を編集するためのオプション。

中央に配置して画像リンクを追加するアイコンに加えて、WordPress 5.8には、切り抜き、テキストの追加、デュオトーンフィルターの3つの新しいアイコンがあります。

クロップ画像

切り抜きアイコンをクリックすると、ズーム、アスペクト比の変更、画像の回転という3つの追加メニューオプションが表示されます。

ブロックエディタで画像を編集するスクリーンショット — 切り抜きオプションを選択した後、必要なズーム、アスペクト、回転の変更を行い、変更を適用します。

ご覧のとおり、画像を必要な方法で表示するためにメディアライブラリにアクセスする必要はありません。

デュオトーンフィルター

WordPress 5.8に付属するもう1つの新機能は、デュオトーンで任意の画像をフィルタリングする機能です。画像に適用するフィルターの2つの色を選択すると、画像には2つのトーンしかありません。

WordPressの画像デュオトーンオプションのスクリーンショット — image duotoneオプションを使用して、画像を2つのトーンで表示します。

テキストを追加

この新しいアイコンは、画像にテキストを追加するためのものであり、画像をカバータイプのブロックに変換するのと同じです。そしてもちろん、この変更後、過去に行ったように、カバーブロックに必要なテキストを追加できます。

グーテンベルクで背景ブロックを編集するスクリーンショット — グーテンベルクでカバーブロックを編集するスクリーンショット。

さらに、ブロックプロパティで確認できるように、間隔を変更したり、テキストにパディングを追加したりできるようになりました。これにより、テキストが画像内の目的の場所に正確に配置されます。パディングは、テキストの4つの辺のそれぞれに対して同じまたは異なるように定義できます。

個人的には、メディアライブラリにアクセスせずに、これらすべての変換をエディターで直接追加して実行できるのは素晴らしいことだと思います。それでも、SEOに合わせて画像を最適化したい場合は、ライブラリにアクセスする必要があります。

ブロック変換

ブロックを画像タイプからカバータイプに変換する方法を見てきましたが、ブロックエディタには他のタイプの変換が組み込まれています。たとえば、3つの段落を選択して、見出し、列、リストなどに変換できます。変換を実行する前に、変換の新しい外観がプレビューされます。

段落から列への変換プレビューのスクリーンショット — 段落から列への変換のプレビュー。

変換プレビューを一覧表示する段落のスクリーンショット — 段落から列への変換のプレビュー。

同様に、画像タイプのブロックのセットを画像ギャラリータイプのブロックに変更したり、ボタンのセットなどに変更したりすることもできます。

カバーブロック

これらすべての新機能がエディター自体に含まれているため、カバーブロックを使用すると、これまでとはまったく異なるデザインを作成できます。たとえば、2つのネストされたカバーブロック（子と親の間にパディングがあります）を作成し、それぞれに独自の色、テキスト、フォーカスを設定できます。

グーテンベルクにネストされた2つの背景ブロックを示す画像 — 2つのネストされたカバーブロックを示す画像。

ナビゲーションブロック

WordCampで紹介されたビデオのブロックエディタプレビューのもう1つの優れた新機能は、新しいナビゲーションブロックです。このブロックはインストールされているベータバージョンには含まれていませんが、Gutenbergプラグインの最新バージョン10.8.1に含まれています。

このブロックを使用すると、訪問者が他のページに移動できるように、任意のページにリンクのメニューを追加できます。これは、WordPressですでに知っているナビゲーションメニューの代わりになることを意図したものではなく、ページに追加のメニューを挿入したい場合の代替手段です。

メニューを水平にするか垂直にするかを示す以外に、メニューを作成するときにいくつかのオプションがあります。

グーテンベルクでナビゲーションメニューを作成する — ブロックエディタでナビゲーションメニューを作成する際のオプション。

既存のメニューから作成する：サイトですでに作成したメニューを表示するように選択できます。
空に作成：これにより、ナビゲーションに表示する各リンクを手動で追加するための空白のメニューが作成されます。
すべてのトップレベルページから作成する–これにより、サイト上の既存の各ページがリンクとして自動的に追加され、編集および再配置できます。ここにはトップレベルのページのみが追加されます。

ナビゲーションに新しいリンクを追加するには、次のいずれかを選択できる+アイコンをクリックする必要があります。

ページリンク：サイトのページ。
投稿リンク：あなたのサイトへの投稿。
カテゴリリンク：特定のカテゴリのすべての投稿。
タグリンク：特定のタグが付いたすべての投稿。
カスタムリンク：外部URL。
ソーシャルアイコン：ソーシャルネットワークのアイコン。
検索：訪問者がコンテンツを検索するための検索ボックス。

メニューを作成したら、そのスタイル（フォント、フォント、背景色）を変更したり、サブメニューを追加したり、アイテムを移動したりすることもできます。

したがって、このブロックを使用すると、メニューデザインを非常に簡単に作成できます。

ご覧のとおり、この新しいタイプのブロックは、ページや投稿のデザインにさらに多くの可能性を提供します。

テンプレートデザイン

この新しいバージョンのWordPressエディターでもたらされるもう1つの大きな変更は、テンプレートデザインがブロックエディターに完全に統合されていることです。このようにして、作成したページからテンプレートを作成できます。また、左側のサイドバーにその構造を一覧表示できるオプションも追加されます。

WordPressでテンプレートをデザインする — WordPressでのテンプレートのデザイン。左側に、テンプレートの構造が表示されています。

テンプレートの構造を移動でき、各要素がエディターで強調表示されるため、必要に応じて変更を加えるのが非常に簡単で、各コンテナーブロックにネストされているすべての要素をすばやく表示できます。

そしてもっと…

そして最後に、WordCamp Europeで発表されたビデオでは、テーマのグローバルスタイルをブロックエディターで直接定義して、カラーパレット、タイポグラフィなどを変更するオプションも示されました。 WordPress 5.8バージョンは、Webサイトページの作成に他のページビルダーを必要としないという目標にますます近づいています。

UnsplashのXPSによる注目の画像。