Jamie Marsland Membuat Ulang Beranda WordPress.org dalam 20 Menit Menggunakan Editor Blok

Menanggapi kontroversi baru-baru ini tentang berapa lama beranda baru WordPress.org dan desain halaman unduhan harus diterapkan, YouTuber Gutenberg Jamie Marsland memutuskan untuk mencoba membuatnya kembali dengan editor blok.

Matt Mullenweg telah mengomentari rencana untuk desain baru yang bergerak ke dalam pengembangan, mengatakan bahwa itu seharusnya memakan waktu "berjam-jam bukan berminggu-minggu untuk diterapkan." Komentarnya yang paling membara, yang memicu percakapan berikutnya tentang kenyataan bekerja dengan editor blok, merujuk pada pesaing WordPress.

“Ini adalah tata letak dasar, sulit membayangkannya membutuhkan satu orang lebih dari satu hari di Squarespace, Wix, Webflow, atau salah satu pembuat halaman WP,” kata Mullenweg.

Marsland memutuskan untuk mengambil tantangan menggunakan Gutenberg. Untuk latihan ini ia menggunakan tema default WordPress terbaru, Twenty Twenty-Two. Hasilnya tidak identik dengan desain baru WordPress tetapi sangat mirip, dan dia mampu membuka beranda dalam waktu sekitar 20 menit.

Dalam video (tersemat di bawah), Marsland menelusuri pembuatan setiap bagian beranda. Dia adalah apa yang bisa digambarkan sebagai pengguna yang kuat dengan editor blok. Dia dapat dengan cepat mengacak baris, kolom, dan grup di sekitar, menyesuaikan padding dan margin seperlunya, dan menetapkan setiap bagian warna yang sesuai untuk desain. Pada titik ini, ini bukanlah sesuatu yang bisa dilakukan oleh kebanyakan pengguna WordPress rata-rata, itulah sebabnya video tersebut mendapat tanggapan yang kuat dari pemirsa. Saluran YouTube Marsland dipusatkan untuk membantu pengguna menguasai pembuatan halaman menggunakan Gutenberg dan menyimpan dengan WooCommerce.

“Kesimpulan saya adalah cukup mudah untuk menyelesaikan 95% desain dengan cepat, tetapi 5% terakhir yang selalu membutuhkan waktu paling banyak dalam pengalaman saya,” kata Marsland. “Dugaan saya lebih ke proses internal yang menyebabkan penundaan, tetapi tanpa terlibat sulit untuk mengatakan dengan pasti. Saya benar-benar ingin menunjukkan bahwa itu bukan masalah Gutenberg dengan membangun desain (seperti yang disebutkan Matt Mullenweg Wix dan Squarespace dan pembuat halaman WP lainnya.)”

Alex Shiels, kontributor yang disponsori Automattic pada proyek tersebut, mengutip beberapa item yang tidak terkait dengan editor blok, yang menyebabkan penundaan, termasuk bekerja menuju "standar yang masuk akal untuk a11y, responsif, kompatibilitas browser, SEO, dan kinerja," serta berkolaborasi dengan kontributor di berbagai benua.

Menanggapi upaya Marsland, pengembang WordPress Patrick Boehner berkomentar tentang bagaimana detail kecil tetap sangat penting. “Anda pasti dapat mengetahui apa yang pertama kali didorong oleh desain vs dirancang di editor,” kata Boehner.

Lima tahun setelah debut Gutenberg di WordPress, pengembang tema masih ditantang untuk menghidupkan desain yang tidak dibuat dengan pendekatan blok-pertama.

“Saat ini pada dasarnya sulit untuk tidak mungkin mengambil desain halaman yang diolok-olok secara tradisional dan menjalankan desain itu menggunakan blok,” kata pengembang WordPress Jon Brown. "Ini adalah sebuah masalah.

“Tentu, blok boleh saja 'mendesain halaman di browser' dan menerima apa yang Anda dapatkan dari blok, tetapi blok terus kekurangan fleksibilitas dan kontrol yang diperlukan untuk menghasilkan tata letak piksel yang responsif, dapat diakses, dan sempurna berdasarkan mock-up .

“Apa yang biasanya membutuhkan satu hari dan selusin baris php dan selusin baris css, sekarang membutuhkan waktu berminggu-minggu untuk membangun blok khusus karena blok inti tidak dapat dengan mudah diubah melalui kait dan tidak memiliki kontrol dasar yang diperlukan.”

Kontributor Gutenberg membuat langkah dengan memperkenalkan tipografi cair dan melacak sejumlah masalah yang terkait dengan peningkatan konsistensi perkakas desain. Sementara itu, pengembang tema menanggung rasa sakit yang tumbuh saat editor blok matang untuk mengakomodasi mereka yang berharap membuat desain mereka langsung responsif.

“Saya telah membangun tema FSE lengkap dari awal dan terkejut melihat seberapa banyak desain saya yang berhasil saya tiru dengan editor, theme.json, dan CSS khusus yang minimal hingga tidak ada,” kata pengembang tema veteran Mike McAlister . “Tentu, butuh banyak mengutak-atik, tapi saya tetap terkesan.

“Namun, seperti yang disebutkan Jon, begitu Anda perlu menyesuaikan sesuatu untuk layar yang lebih kecil (atau layar yang lebih besar jika Anda berani mencoba desain mobile-first di editor), Anda menemui jalan buntu. Ini terutama terlihat dengan margin, padding, dan celah blok, yang belum memiliki kontrol responsif. Anda dapat melihat ini disesuaikan melalui CSS di tema baru di .org.”

Ketanggapan adalah salah satu masalah yang Shiels sebutkan mengapa mengimplementasikan desain membutuhkan lebih banyak waktu daripada sekadar membuat ulang desain di editor blok.

“Namun, ada petunjuk perbaikan yang datang untuk daya tanggap,” komentar McAlister. “Tipografi dan penjepit yang lancar () tentu saja telah membantu memeriksa tipografi, tetapi akan selalu ada keadaan di mana Anda membutuhkan kontrol yang lebih baik. Setiap pembuat situs lain telah memecahkan ini, tidak ada alasan untuk berpikir WordPress tidak bisa atau tidak mau. (Saya tentu berharap demikian, karena ~50-60% lalu lintas berasal dari perangkat seluler akhir-akhir ini!)

“Salah satu cara terbaik untuk melewati rasa sakit yang tumbuh ini adalah dengan melakukan dog-fooding sebanyak mungkin — menggunakan editor dan FSE untuk membangun sebanyak mungkin skenario kehidupan nyata untuk mengungkap titik-titik buta ini.”

Latihan singkat Marsland menunjukkan seberapa dekat Anda bisa membuat ulang desain WordPress.org dalam waktu singkat jika Anda tahu cara mengatasi editor blok. Dia berhasil membuktikan bahwa UI pembuatan halaman Gutenberg tidak menghalangi dalam mereproduksi desain yang dibuat di aplikasi lain. Sebaliknya, itu semua item daftar periksa terkait lainnya yang umumnya harus diselesaikan oleh pengembang di luar editor – termasuk aksesibilitas, daya tanggap, dan pertimbangan SEO. Semakin dekat Gutenberg dapat mengurangi pekerjaan ekstra yang terkait dengan daya tanggap dan aksesibilitas, semakin mudah didekati oleh pengguna biasa yang mencoba menghasilkan desain yang mereka impikan sendiri.