Merancang Tema Anak WordPress Berbasis Blok Dengan File JSON Tunggal

Dari saat saya membuka toko tema pertama saya pada tahun 2008 hingga hari ini sebagai seseorang yang hanya bermain-main, rencana saya selalu membangun satu tema dalam cetakan CSS Zen Garden. Ini adalah proyek yang diluncurkan Dave Shea pada awal 2000-an untuk menunjukkan bagaimana desainer dapat memanipulasi situs melalui CSS saja. HTML akan tetap sama, tetapi desainnya bisa apa saja.

Saya telah mencapai tujuan itu beberapa kali dengan beberapa proyek. Secara teknis, yang saya butuhkan hanyalah markup arsitektural dalam tema WordPress dan CSS khusus dalam tema anak.

Konsepnya sederhana, tetapi seiring waktu, visi saya berubah. Saya ingin membuat sesuatu yang membuat mendesain tema anak jenis ini menjadi lebih mudah. Oleh karena itu, saya membangun sistem kustom untuk mengatasi kekurangan alat WordPress di ranah desain tema. Bukan untuk menyombongkan diri, tetapi saya merasa telah membuat beberapa metode praktis. Mereka mengizinkan desainer tema anak untuk memasukkan nilai ke dalam file konfigurasi, seperti nama font-family dan kode warna. Sebagian besar juga dapat ditimpa oleh pengguna akhir melalui penyesuai.

Pada tahun 2018, saya sudah bekerja keras untuk apa yang akan menjadi magnum opus saya, tema WordPress terbaik yang pernah saya buat. Saya juga telah merencanakannya sebagai yang terakhir. Saya telah mempertimbangkan untuk keluar dari permainan untuk sementara waktu. Tapi, ini adalah proyek yang harus saya selesaikan.

Kemudian, editor blok baru meledakkan semuanya. Saya telah bekerja dengannya selama berbulan-bulan sebelum diluncurkan, tetapi saya tahu pengembangan tema tidak akan pernah sama. Proyek Gutenberg akan terus matang dan membentuk kembali masa depan WordPress.

Saya akhirnya meluncurkan tema saya. Itu adalah salah satu produk komersial paling awal yang mendukung sistem blok baru. Namun, saya juga kewalahan.

Ini adalah hari-hari editor blok awal. Tidak ada yang benar-benar tahu apa yang akan kita lihat dalam tiga tahun atau lebih, tetapi jika Anda memberi sedikit perhatian, Anda dapat melihat bahwa tema akan berkembang menjadi sesuatu yang jauh berbeda dari pada saat itu. Saya menghabiskan lebih dari satu tahun membangun sistem tema yang akan menjadi tidak relevan dalam waktu singkat — memang, saya pikir kami akan tiba di tujuan ini lebih cepat.

WordPress 5.9 akan mengirimkan sub-komponen terakhir dari Pengeditan Situs Lengkap. Ini akan mencakup dukungan untuk tema blok di bawah tenda. Pengguna yang menginstalnya dapat menyesuaikannya melalui editor situs dan antarmuka gaya global.

Yang paling menggairahkan saya adalah hal yang membangunkan saya setiap pagi 13 tahun yang lalu: tema anak-anak.

Blokir tema anak sebagian telah berfungsi di plugin Gutenberg selama berbulan-bulan. Namun, fitur yang paling saya nantikan belum siap hingga seminggu yang lalu. Patch baru memungkinkan tema anak untuk menimpa nilai tunggal dari file theme.json induknya. Pada dasarnya, kedua file digabungkan, dengan anak didahulukan.

Mengapa saya sangat tertarik dengan fitur ini? Karena itu adalah sistem yang sama yang saya buat di tahun-tahun sebelumnya — tetapi lebih baik.

Setelah melihat tanah ini dalam versi pengembangan Gutenberg, hal pertama yang saya lakukan adalah memuat tema khusus yang telah saya coba. Ini adalah proyek yang saya bangun untuk kesenangan dan pengembangan saya sendiri.

Kemudian, saya membuat proyek baru di editor kode saya. Saya menambahkan file style.css yang diperlukan dan memasukkan bidang header yang sesuai. Saya tidak akan membutuhkannya lebih dari itu. Desain tema anak saya akan bergantung pada fitur lain sama sekali.

Saya menambahkan theme.json di tingkat akar tema anak dan mulai bersenang-senang lebih dari yang saya miliki dengan theme dalam waktu yang lama.

Saya memilih beberapa warna musim gugur dan font heading yang menyenangkan. Dalam beberapa menit, saya memiliki lapisan cat baru yang terciprat ke seluruh instalasi pengujian saya. Desainnya tidak revolusioner atau semacamnya. Saya hanya kagum dengan betapa mudahnya mengubah desain saya dengan memasukkan beberapa nilai.

Ini adalah jenis tema anak yang selalu saya dambakan. Saya ingin kekuatan untuk mengubah elemen desain tema saya untuk berbagai musim dan hari libur. Dan saya ingin dapat berbagi tema anak ini dengan orang lain.

Seperti yang saya katakan, saya telah membangun metode bertema anak seperti itu sebelumnya (saya menggunakan PHP alih-alih JSON). Namun, ini jauh lebih kuat karena bergantung pada sistem blok standar dan bukan sesuatu yang khusus yang hanya akan digunakan oleh segelintir orang.

Beberapa dari Anda mungkin bertanya mengapa saya tidak membuat perubahan ini melalui editor situs alih-alih membuat tema anak. Rich Tabor mengajukan, pada dasarnya, pertanyaan yang sama di Twitter hari ini. “Jika sebuah tema terdiri dari JSON dan templat blok yang keduanya dapat dimodifikasi melalui Global Styles, lalu untuk apa tema anak itu?”

Katakanlah saya telah menginstal tema blok dan membuat beberapa penyesuaian warna. Sekarang, berpura-puralah bahwa saya ingin mencampuradukkannya ketika Natal tiba — berikan beberapa warna dan temukan font liburan yang meriah. Saat saya melakukan perubahan ini, desain lama saya tidak akan ada lagi saat musim berakhir karena kustomisasi pengguna disimpan berdasarkan tema yang aktif. Saya tentu saja dapat mencatat semua pengaturan lama saya dan mengubahnya kembali nanti. Namun, melakukannya melalui tema anak berarti saya dapat mengganti tema kapan saja. Pengaturan lama saya akan tetap utuh.

Mungkin ini adalah kasus tepi. Siapa yang membuat perubahan musiman pada desain mereka akhir-akhir ini, bukan?

Bagian yang menarik adalah saya dapat membagikan tema anak yang dibuat dengan satu file JSON dengan orang lain.

Bertema anak telah menjadi hasrat saya sejak fitur tersebut mendarat di WordPress. Dalam beberapa hal, itu tidak banyak berubah. Themers masih dapat menimpa template dari induknya. Mereka dapat terus menambahkan CSS khusus jika mereka mau. Tetapi sekarang, mereka dapat mengonfigurasi bagian mana pun dari desain dari satu file standar. Itu adalah sesuatu yang layak untuk dikembalikan kepada pengembang saya dan membangun satu tema lagi.

Saya juga melihat masa depan tanpa tema anak yang masih memiliki manfaat yang sama dari berbagi elemen desain.

Direktori pola blok sudah menyediakan tata letak yang harus bekerja dengan tema WordPress apa pun yang dibuat dengan baik. Namun, ada komponen desain lain yang bisa kita pecahkan di masa depan.

Saya membayangkan masa depan di mana WordPress dapat memiliki palet warna yang dapat diinstal seperti yang ditawarkan oleh Color Lovers. Cukup telusuri direktori, instal, dan ubah skema warna Anda tanpa menemukan tema baru. Sesuatu yang mirip dengan plugin Adrian baru-baru ini dapat melayani tujuan yang sama untuk font. Ini adalah hal-hal yang mungkin ingin dipertimbangkan oleh komunitas di kemudian hari. Tidak ada ide yang harus keluar dari meja pada saat ini.

Untuk saat ini, saya senang memiliki kekuatan penuh dari tema anak yang saya miliki. Perubahan akan mendarat di Gutenberg 11.8 minggu ini dan WordPress 5.9 akhir tahun ini.