Divi 5 5 月の進捗アップデート: Divi 5 の速度のプレビュー

公開: 2023-06-02

私たちは Divi 5 という大規模なプロジェクトの真っ最中で、毎月コミュニティに進捗状況を更新したいと思っています。先月、私たちは Divi ユーザーにとって最も有利な方法でこのような大きなプロジェクトにどのようにアプローチしているかをよりよく理解するために、Divi 5 ベータプログラムの 5 つの段階を詳しく掘り下げました。私たちはフェーズ 1 の Dev Alpha にいますが、Dev Beta の開始に近づいており、その時点で新しい Divi 5 API が固まります。今年後半の最初の一般リリースに向けて取り組んでいる間、より多くの開発者をプログラムに参加するよう招待します。

今月のアップデートでは、Divi 5 に加えたアップデートについて説明します。また、Divi 5 がどれほど速いかを示し、その後、今後の Divi AI 機能を少しだけ紹介します。掘り下げてみましょう。

今月達成したこと

今月もたくさんのことができました！最初の公開リリースに少しずつ近づくにつれて、多くの小さなことを 1 つずつ埋めていきます。そこでは UI を磨き、しっかりした Divi 機能のセットを完成させる必要があります。セクション区切り、背景ビデオ、条件オプション、レスポンシブコンテンツに取り組み、いくつかのバグを修正しました。

私たちの作業のほとんどは、Dev Beta バージョンの目的である Divi 5 API を強化することに焦点を当てていました。ここでの一般的な傾向は、私たちのチームと開発コミュニティが優れた Divi モジュールと機能を簡単に作成できるようにするための基盤を構築しているということです。他のすべてが希望どおりに配置されるように、この部分を正しくする必要があります。

私たちは、Divi 5 の新しい REST API の統合と簡素化に取り組みました。私たちは、Divi モジュールの作成にかかる時間を大幅に短縮することを目的とした、いくつかの新しい関数とその実装を完了しました。繰り返しになりますが、私たちは Divi 5 プロジェクトの残りの部分がより速く進み、Divi 5 の後に追加されるすべてのモジュールと機能がより迅速に開発されるように、基礎レベルで追加の作業を行っています。

また、下位互換性において重要な役割を果たす Divi のショートコード変換メソッドもリファクタリングしました。

より詳細な情報に興味がある場合は、最新の変更ログエントリを以下に示します。

ディビ 5.0.0-dev-alpha.4

ショートコードモジュール設定モーダルの背景フィールドのレンダリングを修正
正規表現パターン条件を使用したショートコードモジュール設定フィールドの可視性を修正しました。
セクション区切りオプションのフロントエンドレンダリングを追加しました。
複数のセレクターを持つモジュールオプションのビジュアルビルダーおよびフロントエンドでホバーオプションが正しく動作しない問題を修正しました。
@divi/scripts パッケージをリファクタリングし、テストを追加しました
一般公開に備えて型パッケージを npm に公開しました

ディビ 5.0.0-dev-alpha.5

前のリクエストが自動的に中止された場合に、ショートコードモジュールが別のリクエストを送信できるようにします。
現在のショートコードモジュールがスティッキーである場合、スティッキーオプションボタンをレンダリングします。
現在のショートコードモジュールがスティッキーモジュール内にある場合、スティッキーオプションボタンをレンダリングします。
未使用のデフォルト値 Record<number, string | を削除しました。ショートコードモジュールの Record<string, string>> タイプ。
単一の製品ページに表示される誤った Woo ショートコードモジュール要素を修正しました。影響を受けるショートコードモジュール: Woo 製品通知、Woo 製品画像、Woo カートに追加、Woo 製品在庫、Woo 製品価格、Woo 関連製品、Woo 製品アップセル、および Woo 製品。
サポートされていないモジュールの名前を、モジュールスラッグ、REST API ルート、ラベル、テストケース、ストーリーブックとともにショートコードモジュールに変更します。
モジュールの背景オプションに背景ビデオフィールドを追加しました。
REST API 呼び出しを使用しない Visual Builder での背景ビデオのレンダリングがリファクタリングされました。
フロントエンドに背景ビデオモジュールオプションのレンダリングを追加しました。
フロントエンドで背景ビデオを初期化するための ScriptData を追加しました。
スティッキー状態のバックグラウンドビデオモジュールオプションのサポートが追加されました。
モジュールオプションの仕切りフィールドの表示設定を更新し、仕切りスタイルが選択されていない場合に追加のオプションを非表示にします。
繰り返しを明示的に拒否するディバイダースタイルオプションでは、モジュールオプションのディバイダー水平リピート設定の表示が非表示になるように更新されました。
全幅セクション設定で非表示になるように、モジュールオプションのディバイダー配置設定の表示を更新しました (デフォルト値「下」のみが許可されます)。
現在ディバイダに適用されている水平方向および/または垂直方向の反転を反映するように、モジュールオプションのディバイダスタイルフィールドプレビューを更新しました。
デフォルトのピクセル (「px」) 単位に加えてパーセント (「%」) 値を保存できるように、モジュールオプションの [ディバイダーの高さ] フィールドを更新しました。
正の数値 (「1x」以上) のみを受け入れるようにモジュールオプションのディバイダー水平リピート設定を更新しました。
作成者、ログイン、ユーザーロールの初期条件を含む条件オプションの基礎が追加されました。残りの条件は将来のリリースで段階的に追加されます。
<ElementStyle /> と同等ですが、レンダリングされた HTML 要素用の ElementComponents コンポーネントが追加されました。
elementClassnames() 関数を追加しました。これは <ElementStyle /> と同等ですが、クラス名を出力する関数用です。
フォント見出しレベルのエラーを修正しました。
ポートフォリオモジュールでトリガーされる PHP 警告を修正しました。
適切な REST 権限コールバックが、登録されているすべての REST ルートに追加されました。
D4 から D5 にリファクタリングされた機能のテストを含む、Divi の役割を決定するための新しい RoleEditor クラスが導入されました。
ET および WP nonce の自動追加やストリーム応答サポートなどの .sendRequest() 機能が fetch() に追加されました。
fetch() は保守性とスケーラビリティを向上させるために完全にリファクタリングされており、.sendRequest() のオプションなどの新しい複雑な条件や機能の導入が可能になっています。
すべての REST API 呼び出し、fetch()、loggedFetch()、および .sendRequest() が統合され、現在は loggedFetch() のみが使用されます。
モジュールの変換メカニズムがリファクタリングされました。

ディビ 5.0.0-dev-alpha.6

REST API の登録、ロジック、スキーマ、テストが改善され、合理化されました。 divi/ajax パッケージの名前を divi/rest パッケージに変更しました。
インラインテキストエディターに InlineTextEditorContainer コンポーネントと InlineTextEditor コンポーネントを追加しました。
インラインテキストエディターに onBlur、onClick、onDoubleClick、onKeyDown、onKeyUp、onMouseDown、および onMouseUp ハンドラーを追加しました。
インラインテキストエディターフィールドから属性値を更新するための保存メカニズムが追加されました。
インラインテキストエディターの編集モードを有効または無効にするイベントハンドラーを追加しました。
アクティブ化/非アクティブ化、および __empty、__editing、__html などのその他の状態に基づいた ClassName を追加しました。
インラインテキストエディターに CSS/インラインスタイルを追加しました。
WindowEventEmitterInstance をリファクタリングして、mousedown イベントリスナーを追加しました。
レスポンシブコンテンツ PHP ヘルパーを導入しました。
レスポンシブコンテンツ JS ヘルパーを導入しました。
FE スクリプトにレスポンシブコンテンツ機能を追加しました。
Team Member モジュールの Name、Position、Image、Content 要素にレスポンシブコンテンツの実装を追加しました。
Bar Counters モジュールの Use Percentage、Percent、Title 要素にレスポンシブコンテンツの実装を追加しました。
Button モジュールの Button Text 要素にレスポンシブコンテンツの実装を追加しました。
Toggle モジュールの Title 要素と Content 要素にレスポンシブコンテンツの実装を追加しました。
Text モジュールの Text Inner 要素にレスポンシブコンテンツの実装を追加しました。
Countdown Timer モジュールの Title 要素にレスポンシブコンテンツの実装を追加しました。
Audio モジュールの Title、Image、Artist Name、Album Name 要素にレスポンシブコンテンツの実装を追加しました。
Code モジュールの Content 要素にレスポンシブコンテンツの実装を追加しました。
CTA モジュールの Title、Content、および Button 要素にレスポンシブコンテンツの実装が追加されました。
Image モジュールにレスポンシブコンテンツの実装を追加しました。
Circle Counter モジュールの Title 要素にレスポンシブコンテンツの実装を追加しました。
Number Counter モジュールの Title 要素にレスポンシブコンテンツの実装を追加しました。
Tabs モジュールの Title 要素と Content 要素に応答性の高いコンテンツの実装が追加されました。
ログインモジュールの Title 要素と Content 要素にレスポンシブコンテンツの実装を追加しました。
Divider モジュールの Show Divider オプションにレスポンシブコンテンツの実装を追加しました。
全幅ヘッダーモジュールのタイトル、サブヘッド、コンテンツ、ロゴ画像、ヘッダー画像、ボタン 1 テキスト、およびボタン 2 テキスト要素にレスポンシブコンテンツの実装を追加しました。
全幅画像モジュールにレスポンシブコンテンツの実装を追加しました。
Portfolio モジュールの Title 要素と Content 要素にレスポンシブコンテンツの実装を追加しました。
ショートコードモジュール関連のコードをショートコードモジュールパッケージに再配置します。
ElementStyle コンポーネントにフォント見出しスタイルのレンダラーを追加します。

Divi 5 のスピード

今日の投稿を終える前に、速度について説明したいと思います。ご存知かもしれませんが、私たちは Divi 5 に多くの新機能を追加する予定はありません。しかし、この新しいバージョンに伴う最も重要な変更の 1 つは、特に Visual Builder における速度の大幅な向上です。、私たちは皆、多くの時間を過ごします。

Divi 5 UI はまだ完成しておらず、ビルダーには機能が欠けていますが、それでも私が話し続けているパフォーマンスの違いを少しだけ見ていただきたいと思いました。したがって、このビデオで物事がどのように見えるかについては判断を差し控えてください (変更される予定です)。インタラクションの速度だけに集中してください。

ページ上で要素をマウスオーバーすると、すべてが即座に表示されることがすぐにわかります。設定ポップアップを開くことも、デザイン設定を調整することも同様に素早く行えます。全体的に昼と夜の違いです。また、ページがどれだけ大きく複雑になっても問題ありません。 Visual Builder はこれを処理でき、高速なままです。

このレベルの速度を達成することは Divi 4 では不可能でした。これが、この Divi 5 の再構築が非常に重要である理由の 1 つです。

近日公開: Divi AI

今月の Divi 5 アップデートはこれですべてです。ただし、もう 1 つティーザーがあります。私たちのチームのほぼ全体が Divi 5 に集中していますが、Divi 5 の開発に影響を及ぼさない Divi 4 の機能に取り組んでいる少数の人々がまだおり、現在、非常にエキサイティングなものに取り組んでいます。

これは Divi AI と呼ばれ、大規模な言語モデルを活用して、ビルダー内で Divi Web サイトのテキストや画像などのコンテンツを作成できるようにします。 Divi に統合されているため、ビルダーと Web サイトに関する情報を教えて、理にかなった非常に直感的な方法でコンテンツを作成または改善できるようにすることができます。

Divi AI の概要については、今日の YouTube ビデオをご覧ください。

今後のアップデートにご期待ください

5月の進捗報告は以上です。ご質問がある場合は、必ずコメントを残してください。来月の更新をお楽しみに。また次回でお会いしましょう!