Komponen G2, Konsep Ulang Komponen WordPress Dari Awal

Perbarui beberapa hal.

Itulah tujuan yang ditetapkan Jon Quach, Desainer Utama di Automattic dalam peta jalan untuk mengintegrasikan proyek Komponen G2 ke Gutenberg dan, akhirnya, inti WordPress. Proyek ini adalah konsep ulang dari bagian-bagian yang membuat editor blok, perbaikan "dari awal" dari sistem komponen. Memperbarui semua hal atau bahkan banyak hal sekaligus berisiko merusak segalanya.

“Idealnya, yang seharusnya terjadi adalah Anda harus memperbarui beberapa hal dengan cara yang sangat terkontrol dan disengaja,” tulis Quach di postingan tersebut. Dia menyamakannya dengan mentransisikan kota, bagian demi bagian, dengan tenaga surya sampai pabrik listrik tradisional dapat ditutup. Anda mengonversi satu bagian, menguji, menemukan masalah, dan memperbaikinya sebelum pindah ke bagian berikutnya.

Itu adalah rencana untuk mengintegrasikan Komponen G2 ke Gutenberg.

“Komponen G2 adalah proyek yang mewujudkan gagasan untuk membuat antarmuka pengguna dan pengalaman pengguna menjadi lebih baik bagi orang lain,” kata Quach. “Saat ini, itu terwujud sebagai Sistem Komponen yang dirancang untuk bekerja dalam konteks dan lingkungan Gutenberg dan WordPress.”

Tujuannya adalah untuk menyediakan sumber daya untuk meningkatkan UI proyek Gutenberg. Komponen harus membuatnya lebih mudah untuk membuat UI yang lebih baru tanpa meretas kode bersama-sama. Quach mengatakan konsistensi dan pengalaman Sistem Komponen harus ditingkatkan dan memiliki efek riak di seluruh platform WordPress. Ini juga akan meluas ke pengembang blok pihak ketiga.

“Komponen kode hanyalah titik awal,” katanya. “Tujuan utama saya adalah agar ini melampaui kode dan memengaruhi serta meningkatkan desain — menciptakan Sistem Desain terpadu yang memungkinkan dan memberdayakan orang-orang untuk membuat pengalaman UI yang kohesif dan kaya fitur di dunia WordPress.”

Quach percaya bahwa platform mendapat manfaat dari pendekatan serupa. Dia menyebutkan Desain Material oleh Google telah meningkatkan platform Android dan membawa kohesi di seluruh produk perusahaan.

Tim Gutenberg telah mulai mengintegrasikan Komponen G2 ke dalam proyek. Integrasi ini menggantikan komponen WordPress (@wordpress/components) secara terkendali yang tidak boleh merusak implementasi yang ada dalam editor inti atau proyek pihak ketiga. Komponen baru akan ditukar saat sudah siap. "Seperti membalik saklar," kata Quach.

Video berikut adalah panduan selama satu jam dari Komponen G2 yang diposting Quach di YouTube:

Dia secara rutin memposting pembaruan di blog Komponen G2. Di samping itu adalah penyelaman yang lebih dalam ke pemikiran desainnya tentang proyek tersebut. Dia juga berbicara tentang proyek di aliran Twitch-nya hampir setiap hari.

Apa Itu Komponen?

Komponen adalah segalanya mulai dari tombol hingga sakelar hingga kotak centang. Mereka adalah bagian standar yang membentuk UI editor blok. Mereka tersedia untuk pengembang inti dan pihak ketiga untuk menciptakan apa yang dilihat dan berinteraksi dengan pengguna akhir. Namun, ada masalah dengan bagaimana sistem komponen asli dibangun.

“Komponen saat ini tidak dibangun dengan sistem dalam pikiran, melainkan untuk memenuhi kebutuhan mendesak,” kata Quach. “Detail desain khusus ini sangat penting. Pendekatan yang mengutamakan sistem dengan lebih mudah mendukung penambahan fitur baru, dan yang lebih penting, kustomisasi!”

Pendekatan baru adalah tentang membangun sistem desain asli untuk WordPress. Sistem seperti itu akan memungkinkan siapa pun untuk membangun di atasnya dan menciptakan pengalaman asli.

Quach mengatakan salah satu cara termudah untuk melihat ini adalah dari perspektif tema backend — Sistem Komponen juga memiliki sub-sistem tema. “Daripada metode tradisional menulis CSS sebagai 'kulit' ke lapisan di atas, estetika UI dapat disesuaikan melalui nilai konfigurasi — mirip dengan bagaimana WordPress dapat dikonfigurasi dengan definisi di wp-config.php ,” katanya. “Perbedaan ini penting karena nilai-nilai ini menyentuh langsung ke sistem Gaya, memungkinkan gaya dimuat dengan benar di tempat dan waktu yang tepat. Semua tanpa mempengaruhi gaya lingkungan saat ini, dan yang lebih penting, tidak terpengaruh oleh gaya lingkungan saat ini.”

Dia menanggapi pertanyaan saya tentang mengapa sistem komponen harus dibangun kembali dari awal. Idenya adalah untuk memiliki komponen yang "hanya bekerja" di lingkungan seperti admin WordPress, seperti memastikan keberadaan stylesheet tema WordPress tidak merusak komponen hanya dengan dimuat.

“Mengapa memikirkan kembali, membangun kembali, dan meningkatkan Input, Tombol, Modal, Dropdown, dan lainnya?” balas Quach sebagai tanggapan. “Agar Anda pengembang tidak perlu melakukannya.”

Apa Artinya Ini Bagi Pengembang?

Menghormati kompatibilitas mundur adalah sesuatu yang menurut Quach sangat serius ketika merancang arsitektur proyek Komponen G2. Dia juga mengatakan itu adalah bagian dari strategi integrasi yang dia usulkan.

“Saya telah menyebutkan bahwa proyek ini 'mewujudkan gagasan untuk membuat antarmuka pengguna dan pengalaman pengguna yang lebih baik bagi orang lain,'” katanya. “Memperhitungkan kompatibilitas mundur dan mendukung migrasi pihak ketiga benar-benar termasuk dalam kategori pengalaman pengguna.”

Saat tim Gutenberg terus mengintegrasikan komponen baru, seharusnya tidak mengubah apa yang telah dilakukan pengembang. Namun, itu bisa membuka beberapa kemungkinan baru.

“Sistem Komponen baru pasti akan membantu di departemen UI,” kata Quach. “Satu area yang sangat saya sukai adalah ruang pengembangan/prototipe yang cepat. Karena Komponen ini adalah unit mandiri, mereka dapat dibawa ke platform seperti CodeSandbox dan mereka…hanya…bekerja. Anda dapat mulai bekerja dan dengan cepat membangun dan berbagi prototipe (mulai dari yang kecil namun kuat hingga yang besar dan bertanggung jawab).

Dia mengatakan dia telah sukses dalam menguji desain komponen dan menunjukkan ide untuk umpan balik yang cepat. Dia juga bekerja dari arah yang berlawanan, membangun komponen kompleks di CodeSandbox dan membawanya kembali ke Sistem Komponen.

“Sebagai seorang desainer dan pengembang front-end, saya tidak bisa menekankan betapa efisien, efektif, dan kreatifnya membebaskan alur kerja 'bangunan mikro' ini,” katanya. “Ini adalah sesuatu yang saya senang untuk dialami orang lain juga.”