Jika Ini Pengembangan Tema WordPress Modern, Daftarkan Saya

Saya memiliki ide tema blok yang berputar-putar di otak saya untuk sementara waktu. Selama berbulan-bulan, saya telah mempertimbangkan untuk membangun satu halaman profil/tema kartu, dan akhirnya saya duduk dan mengerjakannya selama akhir pekan. Sebagian, saya hanya ingin melakukan ini untuk bersenang-senang. Namun, bagian lain dari diri saya ingin melihat bagaimana tema blok berkembang dari perspektif pengembang.

Inspirasi untuk tema ini datang dari beberapa orang dan proyek lain. Eksperimen halaman arahan dua kolom Kjell Reigstad dari Oktober 2020 pertama kali memicunya. Sebuah pertanyaan baru-baru ini ke kolom Ask the Bartender tentang tema kompak dan nyaman membuat jus kreatif saya mengalir lagi. Namun, melihat Tim Tema menyetujui tema blok serupa, Miniblock OOAK, oleh Carolina Nymark berarti bahwa aturannya sekarang cukup longgar untuk mungkin menempatkan sesuatu seperti ini ke dunia.

Salah satu masalah adalah bahwa tema berbasis blok telah membakar saya sebelumnya. Saya menghabiskan waktu berbulan-bulan untuk membangun proyek baru tahun lalu di waktu luang saya yang berharga hanya agar pembaruan plugin Gutenberg menghapus kemajuan saya beberapa minggu kemudian. Saya tahu banyak hal dapat berubah dengan fondasi perangkat lunak tingkat alfa yang tidak stabil, tetapi itu masih mengempis. Tak perlu dikatakan, saya tidak pernah bisa menemukan motivasi untuk mengambilnya kembali.

Dengan WordPress 5.9 dan sistem bertema blok yang lebih stabil hanya beberapa hari ke depan, sudah waktunya untuk mencobanya lagi.

Saya ingin mempelajari tema blok secara mendalam . Satu-satunya cara yang bisa saya lakukan adalah kembali ke awal. Saya perlu mengenalkan kembali diri saya dengan elemen-elemen dasar HTML, CSS, dan PHP biasa. Dan lupakan semua yang saya pikir saya tahu membangun di atas web modern. Saya harus menjadi noob lagi.

Secara teknis, tidak mungkin untuk melupakan semua yang saya tahu tanpa menimbulkan semacam amnesia. Namun, mungkin — mungkin saja — saya bisa kembali ke blok pembangun web.

Bisakah saya memutar tema WordPress tanpa web dependensi kompleks yang mencakup lebih dari 900 proyek di folder /node_modules saya?

Bisakah saya membuat sesuatu tanpa dengan patuh menarik skrip PHP dasar saya melalui Komposer?

Bisakah saya, Anda tahu , hanya membuat tema WordPress?

Langkah pertama adalah memeriksa ego saya di pintu. Ketika saya menyisihkan bertahun-tahun perkakas modern dan alur kerja yang dibangun di sekitarnya, apa yang saya temukan adalah sistem tema sederhana yang indah yang memberi penghormatan kepada akar WordPress tetapi cukup fleksibel untuk diperluas untuk pembangunan lanjutan.

Ini bukan untuk mengatakan bahwa tidak ada cegukan di sepanjang jalan, tetapi kami cukup mendengar tentang itu. Plus, saya menganggap pemrograman/pengembangan sebagai seni memecahkan masalah.

Saya mengalami akhir pekan yang gelisah. Saya mendapat empat, mungkin lima, jam tidur nyenyak antara Jumat dan Sabtu malam. Mungkin saya memiliki begitu banyak proyek dan hal-hal yang terjadi sehingga pikiran saya tidak dapat menutupnya. Bagaimanapun, saya kembali bangun pada pukul 3:30 pagi pada hari Minggu pagi, lelah tetapi tidak dapat menangkap Z yang sangat dibutuhkan itu. Jadi, saya membuka editor kode saya dan membuat proyek tema baru.

Dalam satu jam, itu berhasil. Itu dalam bentuk yang cukup layak untuk dibagikan dengan teman-teman melalui Twitter menjadi dua.

Berikut ini adalah tangkapan layar dari beranda saat ini. Secara teknis, ini adalah satu-satunya halaman. Saya telah bermain-main sedikit sejak saya mendorong komit pertama saya secara langsung.

Ini adalah pola blok bernama "Refleksi." Foto gunung yang terpantul di danau berasal dari Foto WordPress dan diambil oleh Anne McCarthy. Gradien yang digunakan untuk latar belakang juga merupakan refleksi dari warna gambar, yang menurut saya adalah sentuhan yang bagus.

Tema mencakup beberapa pola lainnya. Tujuannya adalah untuk memungkinkan pengguna memilih favorit mereka untuk kartu profil mereka, menyesuaikan konten, dan menyimpan. Mudah. Saya menemukan masalah dengan ini, yang saya selami di akhir posting. Sebagian besar, semuanya berjalan dengan baik.

Apa yang Saya Pelajari dari Pengalaman

Membuat tema WordPress dengan blok itu mudah. Kebanyakan hal terstruktur dan bermain dengan seperangkat aturan standar. Template pergi di sini. Bagian pergi ke sana. Pasang pengaturan Anda di sana. Kami cenderung melihat lebih banyak struktur di versi WordPress mendatang.

Saya membangun tema dari awal hanya menggunakan editor kode saya dan instalasi WordPress lokal. Tidak ada modul Node. Tidak ada pustaka PHP. Tidak ada pengaturan build apa pun.

Saya kemungkinan akan menggunakan hal-hal itu sebelum proyek ini selesai. Beberapa alat hanya membuat pengembangan lebih mudah. Namun, tidak membutuhkannya atau menyelami API PHP yang lebih kompleks telah menurunkan hambatan untuk masuk.

Rasanya seperti saya dibawa kembali ke pertengahan 2000-an, hanya dengan sistem yang lebih baik untuk menangani semua bagian yang rumit. Untuk sekali ini, saya hampir bisa sepenuhnya fokus pada desain.

Ada banyak masalah dengan sistem yang mendasarinya. Keanehan seperti elemen pembungkus ekstra di sekitar blok rata lebar masih ada di editor. Dan, beberapa blok perlu diperbarui — Saya melihat Anda Blok file karena tidak menggunakan kembali blok Button yang ada .

Pada dasarnya, ada keanehan. Sebagai seorang tema, Anda belajar untuk bekerja dengan mereka dalam pikiran, menunggu perbaikan di hulu, atau mempertaruhkan kewarasan Anda untuk mencoba menemukan solusi.

Saya ragu untuk membagikan pekerjaan yang belum selesai, tetapi saya juga harus menunjukkan bukti. Mereka yang tertarik dapat melihat repo GitHub pada tanggal artikel ini, setidaknya sebelum saya melakukan sesuatu yang terlalu gila dengannya.

Beberapa penulis tema mungkin melihat proyek saya dan menganggapnya sebagai contoh yang terlalu sederhana. Namun, saya dapat dengan mudah menerapkan segala sesuatu tentangnya ke tema yang lengkap. Standarnya sama, terlepas dari ukurannya.

Mungkin kita harus mulai memikirkan kembali apa itu tema . Dengan tema berbasis blok yang masih sangat muda, kita semua harus melakukan sedikit eksperimen.

Kesempatan yang Terlewatkan

Saya akan mendapatkan sedikit teknis dalam bit ini karena sangat penting untuk menjelaskan peluang yang terlewatkan untuk pengalaman pengguna yang menyeluruh. Editor situs berada di tempat yang mudah dibuat untuk pengguna yang lebih mahir. Pola membantu menjembatani kesenjangan bagi mereka yang kurang teknis, tetapi itu tidak cukup.

Pikirkan tentang bagian utama halaman web. Potongan seperti header, footer, sidebar, konten, dan bahkan sub-bagian dari itu. Sebagai pengguna, bagaimana Anda mengganti seluruh desain area konten yang sudah ada di layar dengan pola konten yang berbeda?

Anda bisa menghapus yang ada dan memasukkan pola baru. Namun, menghapus dan menyisipkan bagian halaman adalah tindakan berisiko tinggi.

Jika area yang ingin Anda ubah adalah bagian Templat, Anda bisa mengganti satu dengan yang lain. Itu dengan asumsi penulis tema telah mendaftarkan apa pun untuk area itu. Ini adalah tindakan berisiko rendah dan salah satu fitur terbaik dari editor situs.

Misalnya, berikut adalah templat tajuk yang didaftarkan oleh Dua Puluh Dua Puluh Dua saat muncul di bawah item menu bilah alat “Ganti”:

Namun, itu bukan keseluruhan susunan pola tajuk tema — totalnya ada 18. Saya membayangkan bahwa sebagian besar pengguna akhir tidak akan pernah menemukannya.

Salah satu kelemahan dari membuat pola yang dimaksudkan untuk bagian templat tertentu adalah bahwa pengguna akhir tidak memiliki cara untuk mengganti atau mengubah bagian grosir dengan pola baru.

Penulis tema dapat menduplikasi upaya mereka dengan menyalin kode pola ke dalam bagian template, dengan asumsi tidak ada campuran PHP di dalamnya. Atau, mereka dapat membuat bagian-bagian itu dan menarik pola terkait melalui blok Pola:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Masalah dengan pendekatan ini adalah editor situs tidak menampilkan konten pola di tarik-turun "Ganti" ( apakah saya baru saja menemukan bug? ):

Solusinya harus sederhana. Pola yang didaftarkan untuk bagian template harus dapat dipertukarkan melalui UI. Atau, bagian yang menggunakan blok Pola harus ditampilkan dengan benar di menu tarik-turun "Ganti".