グーテンベルク・エディタへようこそ

jifulive アバター

山と印刷機について

この新しいエディタの目的は、WordPressへのリッチコンテンツの追加を簡単かつ楽しいものにすることです。この投稿全体は、レゴのブロックに少し似たコンテンツの断片で構成されており、それらを自由に移動させたり操作したりすることができます。カーソルを動かしてみると、さまざまなブロックが輪郭線や矢印でハイライトされるのがわかります。矢印ボタンを押せば、コピー&ペーストの過程でデータが失われる心配をすることなく、ブロックを素早く再配置できます。

今、あなたが読んでいるのは「テキストブロック」です。これは、すべてのブロックの中で最も基本的なものです。テキストブロックには、投稿内の任意の場所に自由に移動できる独自の操作機能があります…

… 例えば、これのように右揃えになっているもの。

見出しも独立したブロックとして扱われるため、コンテンツの構成や整理に役立ちます。

「百聞は一見に如かず」

画像やメディアを細心の注意を払って扱うことは、新しいエディタの主な重点事項です。キャプションの追加や、画像を全幅表示にするといった操作が、以前よりもはるかに簡単で堅牢になったことを実感していただければ幸いです。

美しい風景
お使いのテーマが対応している場合、画像ツールバーに「ワイド」ボタンが表示されます。ぜひ試してみてください。

キャプションを選択して削除または編集してみてください。これで、誤って画像や他のテキストを選択してしまい、プレゼンテーションを台無しにしてしまう心配がなくなります。

インサータツール

WordPressでできるすべての機能が、インターフェース上の同じ場所で、すぐに利用できるようになると想像してみてください。HTMLタグやクラスを理解したり、複雑なショートコードの構文を覚えたりする必要はありません。これこそが、インサーターの根底にある考え方であり―― (+) エディタの周囲に表示されるこのボタンをクリックすると、利用可能なすべてのコンテンツブロックを閲覧し、投稿に追加することができます。プラグインやテーマは独自のコンテンツブロックを登録することができ、これにより、リッチな編集や公開に向けたさまざまな可能性が広がります。

ぜひ試してみてください。WordPressでは、投稿に追加できる機能のうち、あなたがまだ知らなかったものがたくさんあるかもしれません。現在利用可能な機能の簡単な一覧を以下に示します:

  • 本文と見出し
  • 画像・動画
  • ギャラリー
  • YouTubeやツイート、その他のWordPress記事などの埋め込みコンテンツ。
  • ボタン、ヒーロー画像、セパレーターなどのレイアウトブロック。
  • そして、もちろん、こんなリストもね 🙂

ビジュアル編集

ブロックの大きな利点は、その場で編集してコンテンツを直接操作できることです。引用文の出典やボタンのテキストなどを編集するためのフィールドを用意する代わりに、コンテンツを直接変更することができます。次の引用文を編集してみてください:

当編集チームは、リッチな投稿を簡単に作成できる新しいページ作成・投稿体験の実現に努めます。また、「ブロック」機能により、現在ではショートコードやカスタムHTML、あるいは「謎めいた」埋め込み方法が必要とされるような操作も、より簡単に行えるようにします。

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

引用元に関する情報は、画像のキャプションと同様に別のテキストフィールドに表示されるため、引用元を選択・変更・削除しても、引用の構成は維持されます。必要に応じていつでも簡単に元に戻すことができます。

ブロックには、必要なものを何でも配置できます。たとえば、テキストの構成の一部として控えめな引用文を追加したり、スタイリッシュな巨大な引用文を表示したりすることも可能です。これらのオプションはすべて、インサーターで利用できます。

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

メディアリッチ

新しい「ワイド」および「フルワイド」の配置をギャラリーと組み合わせれば、非常にメディアリッチなレイアウトをあっという間に作成できます:

アクセシビリティは重要です。画像のalt属性を忘れないようにしましょう

確かに、全幅の画像はかなり大きくなることがあります。でも、その価値がある場合もあります。

上記は、画像が2枚だけのギャラリーです。フロートを扱う必要がなく、視覚的に魅力的なレイアウトを簡単に作成できます。また、ブロックスイッチャーを使用すれば、ギャラリーを個別の画像に戻すことも簡単にできます。

どのブロックでも、これらの配置設定を適用できます。埋め込みブロックにもこれらの設定があり、デフォルトでレスポンシブに対応しています:

静的でも動的でも、装飾的でもシンプルでも、お好きなブロックを作成できます。以下は引用ブロックの一例です:

コードは詩である

WordPressコミュニティ

追加のブロックの作成方法についてさらに詳しく知りたい場合や、このプロジェクトへの協力に興味がある場合は、GitHubリポジトリをご覧ください。


Gutenbergのテストにご協力いただき、ありがとうございます!

👋

コメントを残す

メールアドレスは公開されません。 *印の付いた項目は必須です