Divi 5 の進捗状況アップデート: Divi 5 の拡張性の探求

公開: 2023-07-07

Divi 5 の進捗状況をまたお知らせします。 Divi 5 に詳しくない場合は、元の発表投稿をチェックしてください。簡単に言うと、パフォーマンス、安定性、拡張性、拡張性に重点を置いて、Divi 5 のビルダーをゼロから再作成しています。多くの新機能は搭載されませんが、はるかに高速かつ高機能になり、素晴らしい新しいモジュールと機能を本格的に開始するために必要なツールをチームとコミュニティに提供します。

先月、私は Divi 5 Visual Builder の超高速スピードを紹介するデモを行ったので、そのビデオを見逃した方はぜひチェックしてください。

今月のアップデートでは、Divi 5 の拡張性について説明し、簡単なデモンストレーションを行います。その前に、私たちのチームがこの 1 か月間何をしてきたかについて話しましょう。

今月達成したこと

先月、私たちは多くの進歩を遂げました。 Divi 5 ベータプログラムの次のフェーズである Divi 5 Dev Beta の開始が近づいており、次回の更新でそのリリースを発表したいと思っています。

目標に向かって取り組んでいる間、私たちはコミュニティのクリエイターや私たちのチームがより迅速に Divi 5 モジュールを構築できるように、モジュール作成プロセスを簡素化することに引き続き注力しています。このフェーズで費やした作業は、次のフェーズで報われ、最終的な目標は、より早く Divi 5 を手に入れることです。

変更ログエントリ:

現在構築されているすべてのモジュールをリファクタリングして、新しく改良された要素ベースの属性システムを組み込みました。
インラインテキストエディターから値を保存するための saveInlineEditorValue Util 関数を package/module-utils に追加しました
モジュール属性がインラインで編集できるかどうかを確認するために、packages/module-utils に canEditInline Util 関数を追加しました
クリップボードデータを処理するために、インラインテキストエディターに onPaste ハンドラーイベントを追加しました
ビルダーのインラインテキストエディターのイベントベースの className を data-* セレクター (例: et-vb-editable-element–empty、et-vb-editable-element–html) に置き換えました。
data-* セレクターを備えたインラインテキストエディター用の CSS を更新しました (例: [data-et-vb-editable-element])。
モジュールが編集可能かどうか、およびユーザーが適切な編集権限を持っているかどうかを確認するためにインラインテキストエディターを更新しました
インラインテキストエディターが編集モードのときにショートカットを無効にするためにキーボードショートカットストアをリファクタリングしました
タイトルのオーディオモジュールにインラインテキストエディター機能を追加しました
タイトルのブラーブモジュールにインラインテキストエディタ機能を追加しました
タイトル用のバーカウンターモジュールにインラインテキストエディター機能を追加しました
タイトルのサークルカウンターモジュールにインラインテキストエディター機能を追加しました
コード (HTML) コンテンツのコードモジュールにインラインテキストエディター機能を追加しました
タイトルのカウントダウンタイマーモジュールにインラインテキストエディター機能を追加しました
タイトルと小見出しの全幅ヘッダーモジュールにインラインテキストエディター機能を追加しました
コード (HTML) コンテンツ用の全幅コードモジュールにインラインテキストエディター機能を追加しました
タイトルのログインモジュールにインラインテキストエディタ機能を追加しました
タイトルの数値カウンターモジュールにインラインテキストエディター機能を追加しました
インラインテキストエディター機能を個人 (チームメンバー) モジュールに名前と役職用に追加しました
タイトル、サブタイトル、通貨、合計、および頻度のインラインテキストエディター機能を価格表モジュールに追加しました
スライド見出しのスライダーモジュールにインラインテキストエディター機能を追加しました
タブタイトルのタブモジュールにインラインテキストエディタ機能を追加しました
著者、役職、会社名の紹介モジュールにインラインテキストエディター機能を追加しました
タイトルのモジュールを切り替えるインラインテキストエディター機能を追加しました
モジュール管理ラベルのワイヤーフレームビューにインラインテキストエディター機能を追加しました
モジュール属性が空の値で編集されている場合にデフォルトのテキストを設定するためのインラインテキストエディター機能を更新しました (ワイヤーフレームビューモードの管理ラベルなど)
インラインテキストエディターの編集モードがロックされたモジュールに対してアクティブ化されないことを確認するテストケースを追加しました
インラインテキストエディターが期待どおりに動作することを確認するために、インラインテキストエディターを使用するすべてのモジュールにテストを追加しました。
リッチテキストのインライン編集用に、ビルダーに基本 InlineRichTextEditorContainer コンポーネントと InlineRichTextEditor コンポーネントを追加しました。
MultiViewElement クラスの簡易バージョンである ElementInnerContent クラスが導入されました。
MultiViewScriptData クラスが改善されました。
レスポンシブコンテンツ FE スクリプトにカスタムフィルターとフックを追加しました。
MultiViewElementクラスを導入しました。
動的コンテンツ: 新しい動的コンテンツ値の形式: `$variable(JSON_VALUE)$`。
動的コンテンツ: 動的コンテンツ属性に新しい属性変換機能が導入されました。
ダイナミックコンテンツ: フロントエンド部分に初期のダイナミックコンテンツレンダリングが導入されました。
動的コンテンツ値の処理に関する新しいアプローチ。動的コンテンツの値は、ドキュメントがブロック構造のリストに解析される前に、ブロックパーサーで処理されます。
フィールド名と設定に基づいて動的コンテンツの組み込みフィールド値とカスタムフィールド値を解決するコードをバックポートしました。
さまざまな条件に基づいて動的コンテンツの組み込みフィールドとカスタムフィールドを生成するコードをバックポートしました。
ダイナミックコンテンツ: VB での初期ダイナミックコンテンツレンダリングの導入
動的コンテンツ: 動的コンテンツ機能を「ModuleElements」クラスに統合しました。
動的コンテンツ: VB に動的背景画像機能を実装しました。
動的コンテンツ: VB のモジュール設定に初期の動的コンテンツ UI が導入されました。現時点では、これは、「site_title」動的コンテンツオプションのみをサポートする、証言モジュールの入力テキストのプロトタイプとして利用できます。
インラインリッチテキストエディター: コア TinyMCE 編集機能をリッチテキストインラインエディターコンポーネントに追加しました。
インラインリッチテキストエディター: 編集可能なコンテンツを取得し、編集したコンテンツを保存できるように、リッチテキストインラインエディターが更新されました。
モジュール属性のリファクタリング: アイコンモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: ソーシャルメディアモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: ビデオモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: モジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: 全幅コードモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: 価格表モジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: Accordion モジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: 全幅マップモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: 全幅スライダーモジュールの属性をリファクタリングします。
モジュール属性のリファクタリング: マップモジュールの属性をリファクタリングします。
コミュニティで報告されたバグ: モジュールクレジットメカニズムの実装。 module.json に Credit を追加して、モジュールのクレジットを表示します。
コミュニティで報告されたバグ: フィールドの説明で選択したタグを有効にする
トランジションオプション: ElementStyle を使用するすべてのモジュールにトランジションスタイルコンポーネントを追加しました。
モジュール要素: オーディオ、ブラーブ、CTA、および証言モジュールでの要素の作成を簡素化する ModuleElements クラスの導入。

Divi 5 の拡張性を説明する

Divi 5 の最も重要な側面の 1 つは拡張性です。私が拡張性について話すとき、私は API の観点から見て Divi 5 が機敏で有能であること、そしてそれらの改善のおかげで作成できる多くのユニークな機能について話しています。また、Divi 5 を WordPress の将来に合わせて調整し、ショートコードを削除し、WordPress ブロックパッケージの多くを Divi 5 に統合することについても話しました。

これらすべては Divi の将来にとって何を意味しますか?

私は開発チームのマネージャーに、Divi 5 の拡張性を視覚的に表すこのアップデートで何か楽しいものを共有できるように、これらの側面を説明する簡単なデモを作成する少しの自由時間を見つけてほしいと頼みました。彼は自動ブロックモジュールを思いつきました。すべての Gutenberg ブロックを Divi モジュールに変換し、Divi の幅広いデザイン設定でそれらを強化し、同じページ上でモジュールとブロックを混合できるようにするモジュールです。

ブロックモジュールはブロックから HTML 要素を取得し、そのデザインを完全に制御できるオプショングループを動的に生成します。任意の要素をターゲットにしてカスタマイズして、その場で新しいオプショングループを生成することもできます。

このブロックモジュールは遊び半分で作成したもので、完成も洗練もされていませんが、私たちが作成している新しい基盤のおかげで、Divi 5 で何ができるのか、そして比較的簡単にできることを示す素晴らしいデモンストレーションです。

API のオープンな性質のおかげで、私たちだけでなく、あなたや開発コミュニティにとっても簡単です。このブロックモジュールを完成させ、公式機能として Divi 5 に追加する可能性もあります。しかし今のところ、私たちはベータ段階を進めることに引き続き注力しています。

Divi AIはもうすぐ完成します!

今月の Divi 5 アップデートはこれで終わりです。その他のニュースとして、Divi AI の最初のバージョンがほぼ完成しています。これにより、ビジュアルビルダーで作業しながら、何もないところから素晴らしい画像を生成したり、AI を使用してコンテンツを作成および改善したりできるようになります。未完成バージョンでとても楽しく遊んでいるので、すぐに梱包して発送するのが楽しみです。

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

私は Divi 5 の進捗状況を毎月お知らせすると約束しました。そして、それを実行するつもりです。すべてのアップデートがエキサイティングなものになるとは約束できませんが、この巨大なプロジェクトを完了するために全力で取り組んでいることをご安心ください。毎日少しずつ近づいており、Divi 5 の基盤は少しずつ強化されています。私たちは間もなく Divi 5 Dev Beta を開始する予定で、これは基礎が完成することを意味します。そこからは、今年後半にパブリックアルファでテストできるユーザー向け機能の開発が本格的に始まります。

ご質問がある場合はコメントを残してください。次回の更新でお会いしましょう!