ブロックでもっと自由にページを作ってみよう
進化したブロックエディターには、機能やインターフェースの改善点が満載です。使いこなしてみませんか。
ブロックエディターに取り組んでいる開発チームは、ここ数年、皆さんが現在どのようにサイトを構築しているのか、そして将来どのようにサイトを構築したいのかについて、多くのことを学んできました。
最新版で、現在お使いいただけるエディターは、これらの発見の集大成であり、進化の次のステージを象徴しています。
より優れたビジュアルと高度な機能で、デザイナー、開発者、ライター、編集者の生産性と満足度を向上します。
新着情報
全体ビジュアルの刷新、多数の新機能、多数のバグ修正が施された新しいブロックエディターについて、たくさんの新しい情報をご紹介します。
刷新されたエディター UI
まず最初に気づいていただけるのは、洗練された UI (ユーザーインターフェース) です。ボタン、アイコン、テキスト、ドロップダウンはすべてコントラストが向上しました。ボタン、テキストラベル、メニュー項目の間には太い色を使用し、より多くのスペースを確保しています。
![The world is made of blocks](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/the-word-is-made-of-blocks.jpg?w=720)
エディターを操作すると、各項目がはっきりと強調表示されるので、選択したものがすぐに分かります。
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/block-editor-menu-navigation-1.gif?w=640)
ブロックツールバーをシンプルにし、最も一般的に使用される機能を表示するようになりました。たとえば、段落ブロックでは、太字、斜体、リンク書式設定ボタンのみが表示されます。追加オプションはすべてドロップダウンメニューに表示されます。
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/paragraph-option-menu.png?w=1024)
さらに、固定された高さのコンテナ内にブロックをリストアップする代わりに、ブロック挿入ツールがウィンドウの高さで表示されるようになりました。より少ないスクロールで、より多くのブロックとブロックカテゴリーを一度に見ることができるようになりました。
![Block inserter spanning the full height of the window](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/block-inserter-full-span-height.jpg?w=720)
ブロックパターンの導入
ブロックエディターをキャンバスとして使えば、想像可能なほとんどのレイアウトをデザインすることができます。しかし、複雑なページ構造を構築することで、クリエイティブなプロセスを邪魔すべきではありません。
ここでブロックの本領発揮です。エディターに、各ブロックに加えて「ブロックパターン」が追加されました。これは、定義済みで再利用可能なブロックレイアウトのライブラリーです。
利用可能なパターンのリストをチェックするには、右上にある黒白のブロックパターンのアイコンをクリックしてください。レイアウトの一覧が表示されます。
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/notice-the-block-patterns.jpg?w=1024)
使用したいパターンを選択するとそれがエディターに表示され、独自のコンテンツでカスタマイズする準備が完了です。
現在は、2列テキスト、2個のボタン、カバー、2画像を並べて表示、など、入門的なパターンがいくつか用意されていますが、今後も利用可能なパターンはどんどん追加されていく予定です。ブロックパターン API がサードパーティに開放されるようになれば、独自のパターンを開発して共有することもできるようになります。
(素晴らしいパターンのアイデアをお持ちでしたら、ブロックエディター開発者コミュニティへご連絡ください。積極的にアイデアを募集しています。より多くのアイデアが寄せられれば寄せられるほど、エディターはより良いものになるでしょう !)
どこでも色を活用
サイトは新聞ではありません。モノクロである必要はないのです。
新しい文字色の選択ツールを使って、文章の色を変更したり、各単語や文字の色を変更したりすることができます。変更したいテキストをハイライトし、矢印のドロップダウンをクリックして「文字色」を選択します。
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/text-color-editor.png?w=1024)
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/text-color-editor02.png?w=1024)
カラムの背景色を変更するには、カラムを選択してサイドバーの「色設定」に移動します。
![](https://cdn.statically.io/img/en-blog.files.wordpress.com/2020/03/column-color-picker-1.gif?w=640)
これからもブロックの改善は続きます
まだまだ長い道のりですが、ブロックエディターの開発者コミュニティは前へ進んでいます。ブロックパターンなどの機能の改良とともに、サイドバーやドロップダウンなどの UI 要素をさらに磨いていく作業を続けているところです。
サイトの編集体験をさらに向上させる方法があれば、ぜひ教えてください。私たちは、ウェブをより良い場所にするための方法をいつでも知りたいと思っています。
- 2020年4月20日
- 新機能