この新しいエディターのゴールは、WordPress へのリッチコンテンツの追加をシンプルで楽しくすることです。この投稿全体がコンテンツのパーツ—LEGO ブロックのようなもの—により構成されており、動かしたり操作できるようになっています。カーソルを動かすと、様々なブロックが枠線と矢印とともにフォーカスされます。矢印を押すとブロックをすばやく並び替えることができ、コピー & ペーストしているうちに内容が消えてしまう恐れがありません。

自由度の高い管理画面

Gutenberg を試してみよう

現在ご覧いただいているのがテキストブロックで、すべてのブロックのうち一番基本のブロックです。テキストブロックは、投稿内を自由に移動できる独自のコントロールがついています。

…例えば、右揃えのこれのようなものです。


百聞は一画像にしかず

見出しは別ブロックとなっており、コンテンツのアウトラインと構成に役立ちます。

画像とメディア取り扱いへの高い気遣いは、新しいエディターのメインフォーカスです。キャプションを追加したり、全幅にするのがより簡単で強力になっているのにお気づきいただけるでしょう。

美しい風景
テーマでサポートされていれば、画像ツールバーに「幅広」ボタンが表示されます。お試しください。

キャプションを選択、削除、編集してみてください。画像や他のテキストを間違って選択して、表示を台無しにしないよう気を使わずに済むようになりました。

Table

スイカ
リンゴ赤い
ぶどうレモン黄色
マスカット薄緑メロン
みかんオレンジさくらんぼピンク
桃色かぼちゃ馬車

Tableの例です

果物の特徴を描きました

見出しH3 タイトルサンプルタイトルサンプルタイトルサンプルタイトルサンプルタイトルサンプルタイトルサンプル

見出しH4 タイトルサンプル

WordPress ができるすべてのことが、すばやく、同じ場所・インターフェイスで可能であると想像してみてください。HTML タグやクラスを理解したり、複雑なショートコード構文を覚える必要はありません。これこそが「挿入」ツール—エディター中にある (+) ボタン—の真髄で、すべての利用可能なコンテンツブロックを閲覧し、投稿に追加することができます。プラグインとテーマは独自のブロックを登録することができ、リッチな編集や公開の可能性を広げます。

お試しいただくと、WordPress が投稿に追加可能でありながら、ご存知ではなかったものを見つけていただけるでしょう、以下はこの投稿が使用しているブロックの簡単なリストです。

大阪はグルメの町


  • テキストと見出し
  • 画像と動画
  • ギャラリー
  • YouTube、ツイート、他の WordPress 投稿などの埋め込み。
  • ボタンやヒーロー画像、区切りなどのレイアウトブロック。
  • もちろん、このようなリストも ^^

ビジュアル編集

ブロックの大きな利点は、それぞれの場所で編集し、コンテンツを直接操作できることです。引用ソースやボタン内テキストなどを編集するためのフィールドを持つのではなく、コンテンツを直接変更できます。以下の引用を編集してみてください:

このエディターは、リッチな投稿や固定ページの作成を簡単にする、新しい執筆体験を生み出そうとしています。また「ブロック」によって、現在はショートコード、カスタム HTML、外部埋め込みコード自動ディスカバリー機能が実現していることをより簡単にします。

マット・マレンウェッグ、2017

引用の​​ソースに対応する情報は、画像下のキャプションに似た別のテキストフィールドです。このため、ソースを選択、変更、または削除しても、引用自体の​​構造は保護されます。いつでも簡単に戻すことができます。

ブロックは、必要なもの何でもかまいません。たとえば、テキスト構成の一部として目立たない引用符を追加してもよいでしょう。または、巨大で装飾的なものを表示させることもできます。これらのオプションはすべて挿入ツール内で利用できます。

サイドバーのブロックインスペクターでスライダーをドラッグすると、ギャラリーのカラム数を変更できます。

メディア重視

新しい幅広全幅配置をギャラリーと組み合わせると、非常にメディアリッチなレイアウトをすばやく作成できます。

アクセシビリティは重要です — 画像の Alt 属性をお忘れなく。

全幅画像はかなり大きくなる場合もありますが、画像によってはそうする価値があることもあります。

上は2つの画像のみのギャラリーです。フロート調整を行うことなく、魅力的な見た目のレイアウトを簡単に作成することができます。またブロックを切り替えて、ギャラリーを個別の画像へ簡単に戻すこともできます。

あらゆるブロックでこれらの配置を選択できます。埋め込みブロックでも利用でき、ボックス外でもレスポンシブ対応しています:

静的または動的、装飾的またはプレーンなものなど、お好みのブロックを構築できます。こちらがプルクオートブロックです。

Code is Poetry

WordPress コミュニティ

追加ブロックを作成する方法を学んだり、プロジェクトに協力したりすることに興味がある場合は、GitHubリポジトリへ移動してください。


Gutenberg をテストしていただき、ありがとうございます !

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Fudousan Plugin Ver.6.2.1