ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
English

ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
English

WordPress 5.6 で気になる ブロックエディタ周りの新機能とアップデートのリストアップ

mimi

  1. HOME
  2. Staff Blog
  3. WordPress
  4. WordPress 5.6 で気になる ブロックエディタ周りの新機能とアップデートのリストアップ

アドベントカレンダーの途中ですが、臨時ニュースです

WordPress 5.6でブロックエディタ周りで追加された新機能とアップデートから、開発者目線で気になったり、細かいようで意外と重要なのではと思われるものをリストアップしてみました（FSEやウィジェット関連は除く）。
地味に時間がかかったのでブログ化しておきたいと思います。

開発者関係なく意外と影響範囲でかそう？なところにマーカーを引いています。
開発者目線で気になるものには紫のマーカーを引いています。

まずは公式のリンクのまとめから。

5.6に入るGutenbergのバージョンは 8.6 から 9.2 です。ちなみにGutenbergの最新バージョンは9.5です。
https://developer.wordpress.org/block-editor/handbook/versions-in-wordpress/

WordPress 5.6 Must Haves のボード
https://github.com/WordPress/gutenberg/projects/48

それぞれの公式ブログ記事がこちら。今回も盛りだくさんですね！

ではバージョンごとに見ていきましょう。

8.6

  • Add block variations’ keywords search support
    WordPress/gutenberg#24040
    Block variationもキーワード検索が可能にになりました。
  • Support disabling core block patterns.
    WordPress/gutenberg#24042
    コアブロックパターンがdisableできるようになりました。
  • Make the line height and custom units theme support flags consistent and opt-in.
    WordPress/gutenberg#23964
    WordPress/gutenberg#23904
    line-heightのカスタム単位についてのテーマサポート可能になりました。add_theme_support( 'custom-units', 'rem' );
  • Image: Add the ability for a plugin to disable Image Editor
    WordPress/gutenberg#23966
    画像の編集機能をOFFにできるようになりました。

8.7

  • Make “Attempt Block Recovery” the default option of block invalidation
    WordPress/gutenberg#24263
    「ブロックのリカバリーを試行」がデフォルトオプションになりました。分かりやすくなっていいですね。
  • Move “Convert to regular blocks” button to the reusable block toolbar. (24066)
    WordPress/gutenberg#24066
    再利用ブロックの「通常のブロックに変換」ボタンも移動。
  • Consistently autosave edits. (23962)
    WordPress/gutenberg#23962
    自動保存が60秒に1回走るように。ロジックが変わりました。
  • Use Post Type label for Document tab in Settings Header #17311
    WordPress/gutenberg#17311
    [設定]見出しの[ドキュメント]タブに[投稿タイプ]ラベルを使用するようになりました。解説のスクショなどにも地味に影響しますね。
  • Block Directory: Use local assets with automatic asset detection.
    WordPress/gutenberg#24117
    https://core.trac.wordpress.org/ticket/50732#comment:6
    ブロックディレクトリからブロックをインストールした時に関連するlocalizeのファイル群を自動で検知して画面リロードなしで読み込みするように。
  • Add support for delete operations to @wordpress/core-data entities.
    WordPress/gutenberg#21557
    delete[EntityName]でremover呼び出すことができるようになったらしいです。
  • Add server-side handling for the block ‘align’ supports flag
    WordPress/gutenberg#24122
    サーバーサイドのブロックでalignがサポート、wp-block-template-part のタグにalignのクラスが付与されます。
  • Add isDestructive style to Button.
    WordPress/gutenberg#22921
    isDestructiveのスタイルがボタンに追加されました。

8.8

8.9

  • Latest Post Block: Allow adding links to featured images.
    WordPress/gutenberg#24548
    最新記事ブロックのアイキャッチ画像にリンクが付与できるようになりました
  • List block: Add color controls.
    WordPress/gutenberg#21387
    リストブロックでも色の変更ができるようになりました
  • Disable the tools menu while the code editor is enabled
    WordPress/gutenberg#24923
    コードエディター時にツールメニューが触れないようになりました
  • Improve the UI of the custom gradient pickers.
    WordPress/gutenberg#23802
    グラデーションピッカーのUIが改良されました
  • Convert all px values in front-facing styles to relative (em) units.
    https://github.com/WordPress/gutenberg/pull/24523/files
    ！フロント側のCSSのpxをemに変換しました（マジか…！）

9.0

  • Add drag handle to block toolbar
    WordPress/gutenberg#24852
    ブロックを掴むエリアが追加されました。（これだけ何故か5.5.2ですでにコアに取り込まれています。）
  • Drag&Drop: improve single block case.
    WordPress/gutenberg#25107
    1個のブロックの時のドラッグアンドドロップがスムーズに。地味に使い心地向上に大事なアップデート。
  • Include the block variations on the inserter selector.
    https://github.com/WordPress/gutenberg/pull/25182/files
    インサーターにブロックバリエーションも含むようになりました
  • Polish menu item icon locations.
    https://github.com/WordPress/gutenberg/pull/25106/files
    メニューアイテムのアイコンの位置が変わりました
  • Improve the block and patterns search algorithm
    WordPress/gutenberg#25105
    ブロックとブロックパターンの検索アルゴリズムが改良されました
  • Allow inserting an h1 using # + space.
    WordPress/gutenberg#25075
    h1ブロックが# + スペースで挿入できるようになりました
  • Transform multiple heading blocks to list or paragraphs.
    https://github.com/WordPress/gutenberg/pull/24977/files
    複数の見出しブロックをリストや段落に変換する機能が追加されました
  • Search Block: Add button, label, and width options
    WordPress/gutenberg#24666
    検索ブロックにボタン、ラベル、幅のオプションが追加されました
  • Display labels instead of icons in top toolbar. & Add option to show icon labels
    WordPress/gutenberg#24234
    WordPress/gutenberg#24304
    ツールバーにアイコンの代わりに文字が表示できるようになりました
  • Add a “reinstall” button when a block type is not found.
    WordPress/gutenberg#22631
    ブロックタイプが見つからない時に、再インストールボタンが表示されるようになりました

9.1

  • Add “open in new tab” feature to Social Links Block.
    WordPress/gutenberg#25468
    ソーシャルリンクブロックに「新しいタブで開く」が追加されました
  • Add Image Size control to the Media & Text block
    WordPress/gutenberg#24795
    画像と文章ブロックで（large固定だったのが）イメージのサイズがプルダウンから選べるようになりました
  • Add block pattern category selection
    WordPress/gutenberg#24954
    メインのインサーターにブロックパターンのカテゴリを選べるプルダウンが付きました
  • Code block: Allow HTML editing & rich text content
    WordPress/gutenberg#24689
    コードブロックに「HTMLとして編集」が追加されました
  • Remove appender from unselected Buttons and Social Icons block.
    WordPress/gutenberg#25518
    選択されていないボタン（ズ）ブロックとソーシャルアイコンブロックにはインサーターの追加ボタンが表示されなくなりました
  • Buttons block: Lighten editor DOM.
    WordPress/gutenberg#23222
    ボタン（ズ）ブロックのDOMが軽量化されました！
  • Support the default link config for the Gallery and Image blocks (image_default_link_type).
    WordPress/gutenberg#25578
    image_default_link_type の設定が無視されていましたが有効化され、画像 & ギャラリーブロックの画像にデフォルトでイメージファイルへのリンクを付与することができるようになりました
  • Social Icons Block: let icons wrap
    WordPress/gutenberg#25334
    ソーシャルアイコンブロックで、オーバーフローした時にwrapされるようになりました
  • Add new ComboboxControl
    WordPress/gutenberg#25442
    ComboboxControlが新しく追加されました
  • Data Controls: Add new syncSelect control
    WordPress/gutenberg#25336
    syncSelectがstable扱いになりました
  • DateTimePicker: Add support for highlighting days.
    WordPress/gutenberg#22032
    DateTimePickerにisDayHighlightedがサポートされました

9.2

  • Transform multiple selected blocks to Columns block.
    WordPress/gutenberg#25829
    複数のブロックを選択してカラムブロックに一括変換できるようになりました
  • Table block: use hooks + API v2
    https://github.com/WordPress/gutenberg/pull/26065/files
    テーブルブロックがAPI v2化＆フックを使うようになりました（v2へのアップデートの参考になるかも）
  • Add single column functionality to the Columns block.
    WordPress/gutenberg#24065
    カラムブロックで1カラムが可能になりました
  • Add more writing flow options: Reduced UI, theme styles, spotlight.
    WordPress/gutenberg#22494
    設定からUIを減らした表示にしたり、テーマスタイルをオンオフできるようになりました
  • Make block supports server-side explicit
    WordPress/gutenberg#26192
    サーバーサイドブロックのサポートを明示させる関数get_block_wrapper_attributes が追加されました
  • Make the custom spacing theme support flag and block support API stable
    WordPress/gutenberg#25788
    カスタム余白のテーマサポートが追加されました。add_theme_support('custom-spacing')
    block.jsonは
"spacing": {
    "padding": true
}
"color": {
    "link": true
}

以上です。蓋を開けてみると、今回もガッツリアップデートがかかっていますね。API 2.0対応頑張りましょう…！

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。