今すぐ Divi 5 アルファデモをお試しください!

公開: 2024-05-02

Divi 5 の別のアップデートを携えて戻ってきました。今日、Divi 5 のデモ Web サイトが利用可能になったことを発表できることを嬉しく思います。さらにいくつかの機能をまとめ、見つかったバグに対処したら、パブリックアルファをリリースします。これをダウンロードして Web サイトでテストできます。それまでの間、デモは 2 週間ごとに更新されますので、フォローしていただけます。

Divi 5 デモを試してみる

また、Divi 5 用の新しいランディングページもセットアップしました。そこには、デモ Web サイトへのリンクと、毎月の Divi 5 のすべてのアップデートのリストが表示されます。

以下のビデオで詳細をご覧ください。

Divi 5 デモを探索する

Visual Builder の新しいバージョンがほぼ完成していることがわかります。不足している機能としては、クイックアクション、検索と置換、プリセット、WooCommerce モジュール、一部の条件オプションなどがあります。デモに何かが欠けているとしても、それは私たちがそれを削除したからではありません。まだ追加されていないだけです。

これはプレアルファ版のビルドです。インターフェイスのバグや癖に遭遇することになるでしょうが、そのほとんどはすでに私たちの注目に値しています。バグに気づいた場合は、サポートチームに報告してください。私たちはまだ磨きをかけており、このデモをリリースすることで、公開前にパブリックアルファをさらに良い状態にすることができます。

Divi 5では何が変わったのでしょうか？

Divi 5は少し違って見えます。すべては Divi 4 とほぼ同じように機能しますが、注意すべき変更点がいくつかあります。

カスタマイズ可能なインターフェイス: Divi 5 は、複数のパネル、結合されたパネルウィンドウ、カスタムドッキング構成をサポートしています。
より簡単なレスポンシブ編集:オプションレベルでレスポンシブ編集を有効にする代わりに、レスポンシブ編集はアプリケーションレベルで制御されます。任意のビューに切り替えると、そのビューで加えた変更が自動的に適用されます。
新しいインタラクションモード: Divi 5 ではインタラクションモードも異なります。現在は「インタラクションレイヤー」と呼ばれており、要素オプション、親要素オプション、要素のアウトラインなど、ホバー時に要素のどのレイヤーを表示するかを選択できます。任意の要素をクリックすると、その設定パネルが開きます。歯車アイコンをダブルクリックまたはクリックする必要はありません。すべてのアクションは右クリックで実行できるため、インターフェイスを簡素化し、重複を避けるためにすべてを非表示にしたい場合は、それが実行可能なオプションです。
直感的なナビゲーション:設定パネル内のドッキングされたレイヤーパネルとパンくずリストのおかげで、ページ内のナビゲーションも簡単になりました。
驚くべきパフォーマンス: Divi 5 ははるかに高速であり、すぐに気づくでしょう。さらに、大規模で複雑なデザインでも行き詰まることはありません。あちこちをクリックしたり、すばやく複製したり、さまざまな設定を試してみると、どれだけ速いかがわかります。
シンプルで合理化されたインターフェイス: Divi 5 インターフェイスはより合理化されています。より小さく、より効率的です。よりきびきびしており、不必要なアニメーションやエフェクトがありません。各パネルには時代遅れの保存ボタンとキャンセルボタンがありません。ダークモードも搭載しています。 Divi 4 の大きくてゆっくりとした遊び心のあるデザインに親しみを感じるかもしれませんが、Divi 5 に慣れると、その新しい長所が分かるでしょう。

未来を見据えて

Divi 5 での最も重要な変更点は、目に見えないものです。舞台裏の新しい基盤により、開発の観点から Divi の機能が向上し、私たちのチームとコミュニティが Divi 4 では不可能だった新機能を構築できるようになります。

Divi 5 をリリースしたら、本当の楽しみが始まります。私たちは全力で前進し、皆さんが必要としているすべての機能を作成するからです。私を信じて; ループビルダー、フレックスボックスと CSS グリッド、アクセシビリティの向上、より多くのモジュール、より良いメニュー、ヘッダーオプションなど、多くの重要な機能が必要であることは承知しています。それはすべて私たちのレーダーにあり、仕事を得るためにこのハードルを乗り越えるのが待ちきれません。

今月達成したこと

続いて、毎月の進捗報告をさせていただきます。私たちは新しいインターフェイスの磨きを続け、それらの改善を Divi の他の領域に拡張し、テーマビルダー、テーマオプション、ロールエディター、および Divi ライブラリに新たなペイントを施しました。私たちはバグ修正ミッションを継続し、さらに 100 件以上のバグを修正し、管理可能なものになるまでリストを少しずつ修正しました。グローバルカラーとレイヤービューの大部分を終了し、動的アセットや静的 CSS ファイルの生成など、残りのフロントエンド機能の作業を開始しました。

また、Divi Cloud を Divi ライブラリの新バージョンに接続し、小規模な Divi AI/Cloud チームを招いてこれらの機能を実装し、Divi 5 をもう少し早くゴールラインに到達できるようにしました。

最新の Divi 5 変更履歴エントリは次のとおりです。

VB にプリセット選択コンポーネントを追加しました。
VBのモジュール要素にプリセット項目クラスを追加しました。
管理バーが無効になっている場合の間違った上マージンを修正しました。
場合によっては、ブレークポイントと状態の出力の CSS が適切な順序にならない原因となる、CSS レンダリングのバグを修正しました。
アップロードフォント入力スタイルを更新しました。
VB でモジュールを保存/プレビューする際のエラーを修正しました。
ポップアップスタイルの保存時のエラーを修正しました。
拡張されたアイコンピッカーのモーダル寸法と位置を修正しました。
複数のモジュールで右クリック > [レイヤーに移動] オプションをクリックすると、サイドバーの左側でレイヤービューが複数回レンダリングされる問題を修正しました。
[モーダルの高さを追加] を設定して、利用可能なビューポートの高さに自動調整します。
グローバルカラーがない、またはゼロの場合、[色の追加] ボタンが表示されず、グローバルカラーが 1 つある場合、その色が非表示になり、[色の追加] ボタンのみが表示される問題を修正しました。
グローバルカラーを追加すると、モジュールのエリアインタラクション/マウストラップが無効になる問題を修正しました。
ポータビリティモーダルへのインポートおよびエクスポートタブの動的アクションラベルの問題を修正しました。
[リダイレクトを有効にする] ボタンがオフになっているのに、URL フィールドが表示されるという設定パネルの問題を修正しました。
ラッパーコンポーネントに渡されるクリアレイヤーのモーダルサイズを修正しました。
投稿/ページを保存する際の舞台裏のコードをクリーンアップしました。
グローバルカラーの同期が公開/プレビューではなくドラフトでのみ行われる問題を修正しました。
削除されたグローバルカラーが保存時にレイアウトから削除されない問題を修正しました。
黒から白の色の範囲でカラーピッカーの不具合が発生する問題を修正しました。
修正: モーダルを開くとモジュール設定値が変更される。
多数のグローバルカラーがある場合、[保存/最近のカラー] タブを展開してからグローバルカラータブを開くと、色見本が保存/グローバル/最近のタブのタイトルに重なって表示される問題を修正しました。
グローバルカラー属性値がコピー/貼り付けられることを確認するために、クリップボードのコピー/貼り付け機能のテストを追加しました。
TextArea フィールドコンポーネントに showPlaceholderOnEmpty 属性のサポートが追加されました。
コンテンツの長さが「コンテンツを表示」に設定されている場合に、ブログモジュールの設定を非表示にする機能を追加しました。
ユーザーがレイヤービューから列を削除すると、列が削除されてしまうバグを修正しました。
ユーザーがビルダーで一部のテキストを選択したときの、インラインエディターのツールバーの誤った予測不可能な位置が修正されました。
D5 ブログモジュールの「ページネーションを表示」オプションが無効になっているときに、フロントエンドでページネーションが非表示にならない問題を修正しました。
D5 ブログモジュールの [抜粋を表示] オプションを無効にしても、Visual Builder プレビューで抜粋が非表示にならない問題を修正しました。
@wordpress/hooks を FE のマルチビュースクリプトの依存関係として登録することで、外部依存関係に移動されたことによるレスポンシブコンテンツの破損を修正しました。
リッチテキストフィールドの誤った更新シーケンスを修正しました。
不正な divi スタイルの静的スタイルのレンダリング順序によりボタンに追加される不要なテキストの下線を修正します。
不足しているページのショートカットを追加しました (ページの保存、ページを下書きとして保存、ビジュアルビルダーの終了、ポータビリティを開く、応答性の高いズームイン/ズームアウト、ワイヤーフレームモードへの切り替え)
初めて開いたときのポータビリティとライブラリモーダルへの保存の間違った位置を修正しました。
ホバースタイルをリセットすると、代わりにデスクトップスタイルがリセットされる問題を修正しました。
ボタンのグラデーションがデスクトップ状態で停止し、値がホバーグラデーションの停止で使用される値に変更される問題を修正しました。
ドラッグ中に元の位置にある要素の表示部分が非表示になる問題を修正しました。
表示されているチェック/チェック解除に基づいて「無効にする」リセットアイコンの表示/非表示を修正しました。
キーボードショートカットが正しく機能しない問題を修正しました。
チェックボックスで「リセット」ボタンが機能しない問題を修正しました。
不足している列機能を専門セクションに追加します。
管理バーを無効にするビルダー設定オプションを追加しました
レイヤービューでモジュールをドラッグアンドドロップした後、VB でドロップされたモジュールまでスクロールする機能が追加されました。
レイヤービューでモジュールをドラッグアンドドロップした後、VB でドロップされたモジュールまでスクロールする機能が追加されました。
ページバーにクリアレイアウトボタンが追加されました。
ページバーにカラーモードの切り替えを追加しました。
追加された機能により、ドラッグされたモジュールが正しいモジュールの子孫である場合にのみレイヤーグループが展開されます。
ユーザーがモジュールをドラッグし、200 ミリ秒後にレイヤーグループの上にマウスを移動するとレイヤーを展開する機能が追加されました。
レイヤービューモーダルにカーソルを置いたときに、レイアウト内の実際のモジュールを強調表示する機能を追加しました。
モジュールの「default」属性と「defaultPrintedStyle」属性を独自の JSON ファイルで宣言するメカニズムを追加しました。
HTML、スタイル、およびスクリプトデータを生成する属性を抽出するためのメカニズムを追加しました
ビジュアルビルダーを終了するためのページバーボタンを追加しました
フロントエンドでビルダーの現在の状態をプレビューするためのページバーボタンが追加されました。
行内の唯一の列が削除されたり、別の行に移動されたりしないようにするための防止機能が追加されました。
プリセット設定モーダルのプロトタイプを追加しました
開いたときにレイヤービューをサイドバーの左側に自動的にドッキングします。
「ライブラリから追加」モーダルがページ領域の中央に表示され、最大幅と高さがフレームの両端から 4 辺すべて 32 ピクセルに等しいことを確認します。
ホバー状態が選択されたときにスタイルが VB でレンダリングされない原因となっていた、ホバーセレクターの Blurb モジュールのバグを修正しました。
モジュール設定でスティッキー状態を選択すると、スティッキー状態スタイルが VB でレンダリングされない Divi 5 のバグを修正しました。
動的プロパティに関連する PHP 8.3 の非推奨メッセージを修正しました。
PHP 8.2 以降で発生した Email Optin モジュールの PHP 非推奨通知を修正しました。
モジュール設定またはワイヤーフレームモードから変更すると、レイヤービューモーダル内で管理者ラベルが同期しない問題を修正しました。
特定のカテゴリが選択されている場合でも、ビジュアルビルダーのブログモジュールにすべての投稿が表示される問題を修正しました。
オーバーレイの背景色とオーバーレイアイコンがフロントエンドで正しくレンダリングされない問題を修正しました。
モジュールを上部/下部ウィンドウのビューポートの近くにドラッグするときに壊れた自動スクロールを修正しました
Contact Form および Email Optin モジュールの設定パネルの電子メールアカウントおよびスパム保護フィールドのボタンの背景色とボタンのテキストの色を修正しました。
アイコンモジュールが最初にロードされるときのデフォルトのアイコン選択を修正しました。
アコーディオンなどのモジュールの子要素のタイトルの設定における動的コンテンツの表示を修正しました。
yarn test-unit コマンドの実行中に発生するエラーを修正しました。
間違った証言モジュールのクラス名を修正しました
インラインエディタの間違った固定位置を修正しました。
下書きを保存すると常に代わりにページが公開される問題を修正しました。
一部のモデルと選択メニューが最初の間違った位置から正しい位置に点滅する問題を修正しました。
タブモジュールにタブが表示されない問題を修正しました。
ワイヤーフレームビューでのドラッグアンドドロップの遅延を修正しました
人物モジュールで欠落していた画像アニメーションクラスを修正しました。
バックグラウンドタブに表示されないツールチップを修正しました。
クリックしたときにモジュールオプションアクションが機能しない問題を修正しました。代わりにモジュール設定を開きます。
ホバー状態でアコーディオンモジュールの余分な下部スペースが表示される問題を修正しました。
レイヤーを下から上にドラッグするときのスムーズなスクロールを修正しました。
ダークモード時のリッチテキストエディターのコンテンツのテキストの色を修正しました。
宣伝文モジュールのアイコンのホバーの問題を修正しました。
レイヤーモジュールリストの一番下にあるモジュールをドロップする原因となった、下部エリアのドロップゾーンの問題を修正しました。
レイヤーモジュールがホバーされていないにもかかわらず、モジュールオプションが表示される問題を修正しました。
ギャラリーモジュールFEで低品質のギャラリー画像が表示される問題を修正しました。
行設定での子列名の更新と、ドラッグ時の列の並べ替えが修正されました。
Color Picker コンポーネントに機能拡張が導入され、拡張性とモジュール性が向上しました。
重複する変換 CSS を解決する、変換フィールドの新しい基本コンポーネントの導入。
モーダルのドッキング/ドッキング解除状態を維持し、最後に閉じた状態に基づいて再度開かれるようにします。
作成したモジュールをドラッグアンドドロップで任意のモジュール表面領域から初期化できます。
管理バーから終了ボタンを削除する
ライブラリモーダルからのロードからドラッグ可能とサイズ変更可能を削除しました。
レイヤービューモーダルの専門セクションの列からモジュールオプションを削除しました。
問題を適切に修正した後、ログインモジュールの冗長なホバーセレクターを削除しました。
使用されていないキーボードショートカットを削除しました。
Divi 4 のモードベースの UX をインタラクションレイヤーの UX に置き換えました。
合理化されたビジュアルビルダー UI (フィールドコンポーネントとモーダルコンポーネント)
履歴が展開されるまで、ページバーの [元に戻す] ボタンと [やり直し] ボタンを一時的に非表示にします。
グローバルカラー機能が更新および改良され、新しいグローバルカラー ID 形式が導入され、モジュール属性のサポートが改善されました。
CSS 変数を使用してレイヤービューのカラーを設定し、レイヤードラッグハンドルコンポーネントでの不必要な useSelect の使用を置き換えてパフォーマンスを最適化し、レイヤービューの useSelect の使用内でセレクターの名前を付けるために一貫して selectStore を使用しました。

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

今月の進捗報告は以上です。最新情報を見逃さないように、メールでフォローしたり、YouTube チャンネルに登録したりすることを忘れないでください。 Divi 5 は大規模なプロジェクトですが、毎月戻ってきて進捗状況をお知らせします。