ブロック 3.0 の紹介

公開: 2023-02-22

これはあなたが待ち望んでいたエキサイティングなニュースです: Kadence Blocks 3.0 が登場しました!

人気の WordPress ページビルダープラグインの最新バージョンである Kadence Blocks 3.0 のリリースを発表できることを誇りに思います。開発およびベータプロセス全体をフォローしている場合は、この最新の更新により、Kadence Blocks に多数の基本的な変更が加えられたことに気付いているでしょう。これらすべてにより、サイト構築エクスペリエンスが向上します。同様に、この基本的な書き直しにより、開発チームが新しいブロックを含む新しい機能をより適切に追加できるようにする新しい構造が作成されます。 Kadence を使用して迅速かつ効果的なサイトを構築するすべての人にとって、エキサイティングな道のりが待っています。

新着情報？

コードの書き直し、最新化、クリーンアップ、および改善。

Kadence Blocks は、WordPress ブロックエディターの初期に構築されました。実際、ブロックエディターが WordPress コアの一部になる 3 か月以上前に最初にリリースされました。多くの点で、最初からブロックエディターに全力で取り組んできましたが、コアのコードベースとブロックエディター自体が大幅に変更されたため、多くのリファクタリングを行う必要がありました。年。所々でリファクタリングを行ったのと同じくらい、現在の WordPress コアのパスとの互換性を高め、ブロックエディターで革新する将来の機会を開くために、ほとんどのプラグインを再構築する必要があることが明らかな瞬間に遭遇しました。以下にいくつかのハイライトを示します。

ビルド構造を完全に更新し、コンポーネントライブラリを使用するようになりました
ブロックの React 構造を更新して機能させ、API v2 を使用する
ブロックのカスタマイズ用にフロントエンド CSS をコンパイルして出力する方法を再構築しました
wp_kses のストリッピングを防ぐために、SVG アイコンの保存と出力の方法をリファクタリングしました
jQuery スライダーを使用しないようにフロントエンド Javascript を再構築しました

ブロック設定の新しいユーザーインターフェース

Kadence Blocks 3.0 は、ブロック設定のユーザーインターフェイスに新たな改善をもたらします。これらの変更は、ページ上のブロックをいかに迅速かつ簡単に作成および管理できるかを最適化するために行われました。

タブで整理

ブロック設定は、一般、スタイル、詳細のセクションに直感的に整理されています。これにより、レイアウトとデザインを微調整するための適切な設定をすばやく簡単に見つけることができます。多くの設定をスクロールする必要はもうありません。

新規および更新された設定コントロール

ブロックスタイルの編集を簡単にしたいと考えていました。 WordPress コアは非常に優れた新しいコントロールをいくつか開発しましたが、コンポーネントを単純に採用することを妨げる問題が見つかりました。たとえば、WordPress コアには美しいグラデーションコントロールがありますが、グローバル変数の色は機能しません。これは、サイトをより速く簡単に構築したいと考えている Kadence ユーザーにとって非常に重要です。言うまでもなく、WordPress コアにはレスポンシブ設定コントロールを備えたコンポーネントがありません。これは、最新のサイト構築にも重要です. ここに衝撃的な絵文字を挿入します。

コンポーネントライブラリ用にかなりの数の独自のコントロールを作成しました。これらのコントロールの一部は WordPress コアに基づいており、カスタマイズされた Kadence コントロールでより良い方向性を提供できると思われるいくつかの小さな方法で出発するものもあります. これらはすべてレスポンシブデザインを念頭に置いており、ブロックコントロールに一貫性をもたらします。以下は、これらの新しいコントロールの一部の画像です。

視覚的なパディングとマージン

Kadence Blocks では常に、Row Layout Block で上下のパディングを視覚的に設定する機能が提供されています。 Kadence Blocks 3.0 では、行レイアウトや他の多くのブロックでこのエクスペリエンスが改善されています。パディングとマージンの設定にカーソルを合わせたときに表示される強調表示された領域により、設定がページレイアウトにどのように影響しているかを簡単に確認できるようになりました。

行レイアウトブロックによる変更点

Kadence Blocks プラグインの基礎の 1 つは、Row Layout Block です。行レイアウトブロックは、セクションをグループ化し、ブロックを使用した構築を容易にするコンテナーです。この基本的なブロックを使いやすくすることに多くの注意を払いました。

行レイアウト内でセクションを簡単に移動

Row Layout で私たち全員 (そうです、私たちも) が経験した 1 つのフラストレーションは、セクションをある領域から別の領域に移動するのが難しいことです。ブロックを使って組み立てるということは、多くの場合、右側の 1 つのセクションをコピーして貼り付けて左側に移動するという面倒な作業を意味します。行レイアウトブロックに多くのセクションブロックがあるため、セクションブロックを簡単に移動できるようにするために、行レイアウトを最初から再構築する必要がしばしばありました。

行レイアウトブロック内でのセクションブロックの移動がこれまで以上に簡単になりました。矢印をクリックするだけで、セクションを任意の場所にすばやく移動したり、ある行レイアウトブロックから別のブロックにドラッグしたりできます。

新しい行グリッドレイアウトオプション

行レイアウトにセクションのグリッドを含めることができるようになりました。たとえば、2 つの行を持つ 3 列のグリッドが必要な場合は、1 つの行レイアウトブロックでこれを行うことができます。これの優れている点は、タブレットで 2 列のグリッドにすることができることです。

行レイアウトは Grid CSS とその他の最適化を使用します

行レイアウトブロックが CSS を出力する方法と、使用する CSS の種類を最適化しました。 CSS Flexbox から CSS Grid に切り替えると、Kadence Blocks は CSS ファイルのサイズを大幅に削減できます (36kb -> 6kb)。それに伴い、出力内の HTML タグの量を 3 つから 2 つに減らし、DOM (Document Object Model) サイズをさらに最適化するのに役立ちました。この改善により、ページの速度が大幅に向上し、全体的なユーザーエクスペリエンスが向上します。

高度なテキストブロックに入力されたテキスト

まったく新しい機能の 1 つは、高度なテキストブロック内の Typed Text オプションです。一連の文字列を定義して、入力してコンテンツに置き換えることができるようになりました。これは、特定の見出しに注目を集め、サイトでエンゲージメントを生み出すのに最適です.

これをサイトに追加するには、テキストを選択し、高度なテキストブロックのツールバーにある矢印をクリックし、ドロップダウンで入力したテキストをクリックします。次に、すべてのタイプテキスト設定を含むパネルが開きます。

内部ブロックへの移行

Kadence Blocks が最初に作成されたとき、内部ブロックに関するコントロールは非常に不足していました。これは、いくつかのブロックでカスタム配列属性を作成して、実際には内部ブロックではないタイプの内部ブロックを作成する必要があることを意味していました。私たちのボタンブロックは、この良い例です。これは、ユーザーが 2 つのボタンを簡単に並べて追加できるようにするという重要な目的を果たしました。 WordPress コアの開発が進むにつれて、内部ブロックを使用して構築するためのツールが大幅に改善されました。これで、内部ブロックとして 1 つのボタンを持つコンテナーブロックを使用する方がはるかに理にかなっています。これにより、ボタンをクリックして編集できるようになり、設定パネルが大幅に簡素化されます。 Kadence Blocks 3.0 では、内部ブロックを利用して開発を容易にするために 4 つのブロックを移行しました。

高度なボタンブロック
証言ブロック
アイコンブロック
アイコンリストブロック

設定変数

Kadence Blocks 3.0 の多くの目標の 1 つは、設計上の決定をより直感的に行うことでした。多くのユーザーにとって、ピクセル、EM、または REM 単位の違いと、フォントサイズ、パディング、ガターなどのさまざまな設定に使用する必要があるものを理解することは、やることリストの一番上にはありません。

Kadence Blocks 3.0 では、デフォルトのサイズ設定の多くをカスタム変数を使用するように移動しました。これにより、標準の要素サイズ設定に小、中、大のサイズを設定し、残りを処理することができます。

ピクセルまたはブロック設定で必要なその他の単位を使用して、独自のカスタムサイズを簡単に設定できます。ただし、デフォルトの変数オプションを使用することで、デザインの一貫性を保ち、レスポンシブオーバーライドの必要性を抑えることができます。さらに、設計は長期的に管理しやすくなります。正確なコントロールが必要な場合、Kadence Blocks はその力を手に入れます。

CSSクランプによるレスポンシブデザイン

Kadence Blocks 3.0 では、使用しているデバイスに関係なくより優れた表示エクスペリエンスを提供するために、デザインの読み込み方法が根本的に変更されました。 CSS クランプの背後にある技術に興味がある場合は、ここで詳細を読むことができます。基本的に、CSS クランプは、ハイエンドのビューポートサイズ (デスクトップブラウザーなど) とローエンドのビューポートサイズ (携帯電話など) を確立します。また、サイトの読み込み方法や、ユーザーがブラウザーウィンドウのサイズを変更する方法に関係なく、サイトは、検出されたブラウザーウィンドウのサイズに基づいてこれらの要素のサイズを柔軟に変更します。

Kadence Blocks では、デスクトップ、タブレット、またはモバイルに基づいてサイズ指定を設定できますが、Kadence Blocks 3.0 では、これらのビューのサイズを変更する必要がなくなります。これで、Clamp を使用した変数ベースの設定に依存し、Kadence Blocks に作業を任せることができます。

スタイルのコピーと貼り付けの更新

スタイルをコピーして貼り付けるオプションは、しばらくの間 Kadence Blocks の一部でしたが、Blocks 3.0 で改良し、すべてのブロックに含めました。このツールをワークフローの一部にするためにはある程度の意図が必要ですが、開発が大幅に高速化されることをお約束します!

ブロックのデフォルトの更新

Kadence ブロックで常に何かを設定している場合は、ブロックの「デフォルト」を定義できます。行レイアウトを常にテーマコンテンツの最大幅を使用するように設定している場合は、ページに新しい行レイアウトブロックを追加するたびに、それをデフォルトにすることができます。これは、任意のブロックの任意の設定で行うことができます。 Kadence Blocks 3.0 より前のほとんどのブロックでこれを行うことができましたが、動作方法が変更されました。ブロックのデフォルトの設定がこれまで以上に簡単になりました。各ブロック内から、「詳細」をクリックしてから「ブロックのデフォルト」をクリックすると、ブロックのデフォルトが適用されているかどうかを確認できます。ブロックのデフォルトに含めたくない特定の属性を削除することもできます。ボタンをクリックするだけで、作業中の現在のブロックを使用して新しいデフォルトを定義できるため、非常に簡単です。ブロックのデフォルトをエクスポートして、他のサイトにインポートすることもできます。

完全な下位互換性

もちろん、このような大規模な書き直しでは、最大の懸念事項の 1 つは、完全な下位互換性を確保することです。 Kadence Blocks 2.* で構築したサイトが更新された 3.0 プラグインに簡単に移行できるように、開発プロセス全体を通してこの要件を考慮してきました。長いベータ期間中に、400 人以上が Kadence Blocks 3.0 のテストに貢献しました。さらに、Kadence Blocks で構築されたスターターテンプレートの大規模なライブラリを使用して、これらを使用して大量の内部テストを行うことができました。興味がある方のために説明すると、私たち自身も自分の Web サイトで Kadence Blocks 3.0 を使用しています。

Kadence Blocks 3.0 がテストされておらず、バグがまだ存在するというエッジケースが存在する可能性がありますが、そのようなケースはほとんどないと確信しており、3.0 への移行時にサポートチームがお手伝いします。

ブロックエディターでの更新のしくみ

Kadence Blocks を更新しても、投稿とページのコンテンツは自動的に更新されません。これらのページのコンテンツのほとんどは静的 HTML として保存され、以前のレンダリング方法と非常によく似た方法で Web サイトのフロントエンドにレンダリングされます。その HTML の一部がレンダリングされる方法を更新し、それと共に出力される外部 CSS および Javascript ファイルを更新しましたが、ブロックの基本構造は変わりません。

たとえば、Kadence Blocks 2.* の行レイアウトブロックは出力で 3 つの HMTL DIV を使用し、Kadence Blocks 3+ の行レイアウトブロックは 2 つの DIV のみを使用します。この変更は、すぐにウェブサイトに反映されるわけではありません。保存された HTML が最新の更新に再生成されるのは、ページまたは投稿を開くまではありません。

両方のバージョンを確実にサポートするために、行った HTML の変更とテストの数を制限しました。これらの変更は、サイトのパフォーマンスを改善するために行われました。

アップデートとトラブルシューティングのヒント

以下は、Kadence Blocks 3.0 への更新方法に関する提案と、問題が発生した場合に最初に確認できる事項です。

更新する前に

ウェブサイトをバックアップします。
おまけ: ステージングサイトを作成し、最初にそこで更新します。

更新後

サイトのキャッシュ (ブラウザ、ページキャッシュ、オブジェクトキャッシュ) をクリアします。
CSS と Javascript の両方の縮小スクリプトを再構築します。
サイトのページを表示して、すべてがスムーズに実行されていることを確認します。

トラブルシューティング

ページがフロントエンドに正しく表示されない場合は、ページを開いて再保存してみてください。これにより、ページコンテンツの静的 HTML が再構築され、ブロックフォーマットが更新されます。
フロントエンドでページが正しく表示されない場合は、追加したカスタム CSS を見直して、正しく動作するようにカスタム CSS を更新する必要があるかどうかを確認してください。

次は何ですか？

お気付きかもしれませんが、Kadence Blocks 3.0 には新しいブロックが含まれていません。これは、コア構造、設定、およびエディターのユーザーインターフェイスに焦点を当てるために、この更新の範囲を制限するという意図的な決定でした。 Kadence Blocks 3.0 アップデートは、すぐに登場する新しいブロックの出発点と、その他の優れた機能を提供します。以下は、Kadence Blocks に関するアイデアを提供するための簡略化されたロードマップです。

Kadence Blocks 3.1 – 1 か月未満
- 高度なフォームブロック
- プログレスバーブロック
新しいデザインライブラリ – Q1/Q2
Kadence Blocks Pro 2.0 – Q1/Q2
- Blocks 3.0 に合わせた構造と UI の更新
- 既存のブロックを改良します。
高度なクエリブロック – Q2
ダイナミックリピーターフィールドサポート – Q2

高度なフォームブロック

開発の大部分について、新しい Advanced Form ブロックを使用して 3.0 をリリースする予定でしたが、3.0 をこれ以上遅らせないことにしました。このブロックは間もなくリリースされる予定です。このブロックの最初のバージョンは、現在のフォームブロックよりもはるかに柔軟なフォームの作成方法を提供します。たとえば、行レイアウトブロックを使用してフィールドを列にグループ化できます。これは、すべてのフィールドが親フォームブロックの独自の内部ブロックになるためです。

このブロックはまた、カスタム投稿タイプで独自の投稿をきちんと作成するため、フォームを複数のページに追加し、1 つの場所から更新できます。最初のバージョンには、ファイルのアップロードや変換キットの統合など、待望の機能がいくつかありますが、これは始まりに過ぎません。年内には、条件付きフィールド、支払い、マルチステップフォームをリリースする予定です。

特別な感謝

Kadence Blocks 3.0 Beta のプロセス中に Kadence 開発チームに時間、バグレポート、およびアイデアを提供してくれたすべての人に感謝します。これは Kadence Blocks の動作の完全なオーバーホールであり、バグレポートがなければ、Kadence Blocks がすべての人に適切に機能することを完全に保証することはできませんでした。

Kadence Blocks 3.0 で何を構築しますか?

これらの新機能と改善点を皆さんにお届けできることを嬉しく思います。私たちが開発を楽しんだのと同じように、Kadence Blocks 3.0 を楽しんでいただけることを願っています。あなたの意見では、何が最も改善されましたか? 新しいアップデートについてどのような質問がありますか? 以下のコメントであなたの考えや経験を共有してください。また、2 月 23 日木曜日に YouTube でライブストリームに参加して、このリリースのハイライトを確認したり、Kadence チームに質問したり、Kadence Blocks を使用して構築するための今後のロードマップについて詳しく聞いたりする予定です。