G2コンポーネント、WordPressコンポーネントのゼロからの再想像
公開: 2020-12-15いくつかのものを更新します。
AutomatticのプリンシパルデザイナーであるJonQuachが、G2コンポーネントプロジェクトをGutenbergに統合し、最終的にはコアWordPressに統合するためのロードマップに示した目標でした。 このプロジェクトは、ブロックエディタを構成する要素を再考したものであり、コンポーネントシステムの「ゼロから」のオーバーホールです。 すべてのもの、または多くのものを一度に更新すると、すべてを壊すリスクがあります。
「理想的には、何が起こるべきかというと、非常に制御された意図的な方法でいくつかのものを更新する必要があります」とQuachは投稿に書いています。 彼は、従来の電力工場が閉鎖されるまで、都市をセクションごとに太陽光発電に移行することに例えました。 次のセクションに進む前に、1つのピースを変換し、テストし、問題を見つけて修正します。
これが、G2コンポーネントをグーテンベルクに統合するための計画です。
「G2コンポーネントは、ユーザーインターフェイスとユーザーエクスペリエンスを他のユーザーにとってより良いものにするというアイデアを具体化したプロジェクトです」とQuach氏は述べています。 「現時点では、グーテンベルクとワードプレスのコンテキストと環境内で機能するように設計されたコンポーネントシステムとして具体化されています。」
目標は、グーテンベルクプロジェクトのUIを改善するためのリソースを提供することです。 コンポーネントを使用すると、コードをハッキングすることなく、新しいUIを簡単に作成できるようになります。 Quach氏は、コンポーネントシステムの一貫性とエクスペリエンスは拡張可能であり、WordPressプラットフォーム全体に波及効果をもたらすはずだと述べました。 これは、サードパーティのブロック開発者にも適用されます。
「コードコンポーネントは出発点にすぎません」と彼は言いました。 「私の究極の目標は、これがコードを超越し、デザインにも影響を与え、向上させることです。WordPressの世界で、人々がまとまりのある機能豊富なUIエクスペリエンスを作成できるようにし、力を与える統一されたデザインシステムを作成することです。」
Quachは、プラットフォームが同様のアプローチを持つことで恩恵を受けていると信じています。 彼は、GoogleによるマテリアルデザインがAndroidプラットフォームを強化し、会社の製品全体にまとまりをもたらしたと述べました。
グーテンベルクチームはすでにG2コンポーネントのプロジェクトへの統合を開始しています。 この統合により、WordPressコンポーネント（@ wordpress / components）が制御された方法で置き換えられ、コアエディターまたはサードパーティプロジェクト内の既存の実装が破損することはありません。 新しいコンポーネントは、準備ができ次第交換されます。 「スイッチを入れるように」とQuachは言いました。
次のビデオは、QuachがYouTubeに投稿したG2コンポーネントの1時間のウォークスルーです。
彼は定期的にG2コンポーネントのブログに更新を投稿しています。 それらに加えて、プロジェクトに関する彼のデザイン思考について深く掘り下げています。 彼はまた、ほぼ毎日、Twitchストリームでプロジェクトについて話します。
コンポーネントとは何ですか？
コンポーネントは、ボタンからトグル、チェックボックスまですべてです。 これらは、ブロックエディタのUIを構成する標準化された部分です。 これらは、コア開発者とサードパーティ開発者の両方が、エンドユーザーが見たり操作したりできるものを作成するために利用できます。 ただし、元のコンポーネントシステムの構築方法に問題がありました。
「現在のコンポーネントは、システムを念頭に置いて構築されているのではなく、差し迫ったニーズを満たすために構築されています」とQuach氏は述べています。 「この特定の設計の詳細は非常に重要です。 システムファーストのアプローチは、新機能の追加、さらに重要なことに、カスタマイズをより簡単にサポートします。」
新しいアプローチは、WordPressのネイティブデザインシステムを構築することです。 このようなシステムでは、誰でもその上に構築してネイティブエクスペリエンスを作成できます。
Quach氏によると、これを確認する最も簡単な方法の1つは、バックエンドのテーマの観点からです。コンポーネントシステムにはテーマサブシステムもあります。 「CSSを「スキン」として上に重ねて書く従来の方法の代わりに、UIの美学を構成値で調整できます。これは、WordPressをwp-config.phpファイルの定義で構成する方法と似ています」と彼は言います。 「これらの値はスタイルシステムを直接利用するため、この区別は重要です。これにより、スタイルを適切な場所に適切なタイミングで正しくロードできます。 現在の環境のスタイルに影響を与えることなく、さらに重要なことに、現在の環境のスタイルに影響を与えることはありません。」
彼は、コンポーネントシステムを最初から再構築する必要がある理由についての私の質問に答えていました。 アイデアは、WordPressテーマのスタイルシートの存在が単にロードされるだけでコンポーネントを壊さないようにするなど、WordPress管理者などの環境で「正しく機能する」コンポーネントを持つことです。
「入力、ボタン、モーダル、ドロップダウンなどを再考、再構築、強化するのはなぜですか？」 それに応じてクアックに対抗した。 「開発者がそうする必要がないように。」
これは開発者にとって何を意味しますか？
下位互換性を尊重することは、G2コンポーネントプロジェクトのアーキテクチャを設計するときに彼が信じられないほど真剣に受け止めたとQuachが言ったことです。 彼はまた、それは彼が提案した統合戦略の一部であると述べた。
「このプロジェクトは、ユーザーインターフェイスとユーザーエクスペリエンスを他のユーザーにとってより良いものにするというアイデアを具体化したものだと述べました」と彼は言いました。 「下位互換性を考慮し、サードパーティの移行をサポートすることは、絶対にユーザーエクスペリエンスのカテゴリに分類されます。」
グーテンベルクチームは新しいコンポーネントを統合し続けているので、開発者がすでに行っていることを変えるべきではありません。 しかし、それはいくつかの新しい可能性を開く可能性があります。
「新しいコンポーネントシステムは、UI部門で間違いなく役立ちます」とQuach氏は述べています。 「私が特に興奮している分野の1つは、急速な開発/プロトタイピングスペースです。 これらのコンポーネントは自己完結型のユニットであるため、CodeSandboxなどのプラットフォームに組み込むことができ、…ただ…機能します。 着実に実行し、プロトタイプを迅速に構築して共有することができます（小さいながらも強力なものから、大きくて責任のあるものまで）。」
彼は、コンポーネントの設計をテストし、迅速なフィードバックのためのアイデアを示すことに成功したと述べました。 彼はまた、反対方向から働き、CodeSandboxで複雑なコンポーネントを構築し、それらをコンポーネントシステムに戻しました。
「デザイナーおよびフロントエンド開発者として、この「マイクロビルディング」ワークフローがどれほど効率的、効果的、そして創造的に解放されるかを強調することはできません」と彼は言いました。 「他の人にも体験してもらいたいと思っています。」