Kontrol Desain Blok melalui Plugin EditorPlus WordPress

Minggu lalu, saat saya melakukan pengeditan terakhir pada ulasan proyek Gutenberg Forms-nya, Munir Kamal sedang mempersiapkan peluncuran jenis lain dari plugin WordPress untuk editor blok. Yang ini disebut EditorPlus, dan itu akan membuat sistem desain untuk blok. Kamal dan timnya diam-diam memberikan sentuhan akhir pada versi 1.0 dan merilis plugin di repositori plugin WordPress beberapa hari kemudian.

Tidak seperti banyak plugin lain yang membuat blok khusus untuk mencapai hasil desain tertentu, EditorPlus memberi pengguna fleksibilitas untuk menyesuaikan halaman mereka dengan apa yang mereka miliki. Itu menambahkan banyak pilihan desain ke setiap blok WordPress yang ada. Di ujung depan, ia meninggalkan jejak ringan dengan hanya mengeluarkan CSS yang diperlukan untuk halaman itu dengan cepat.

Mungkin hal terbaik tentang plugin ini saat ini adalah ia meletakkan dasar bagi banyak fitur terkait desain yang kemungkinan akan menemukan rumah permanen di Gutenberg dan akhirnya inti WordPress. Tim Gutenberg dapat meminjam ide, mengulangi, dan memperbaikinya. Kita telah melihat lahan kontrol padding eksperimental di Gutenberg 8.3. Masuk akal jika tim pengembangan menindaklanjuti dengan kontrol desain tambahan di jalan. Hal yang baik tentang kontrol ini yang diluncurkan di plugin pihak ketiga terlebih dahulu adalah bahwa tim dapat melihat bagaimana pengguna bereaksi terhadapnya dan mengetahui apakah mereka akan bekerja secara langsung di Gutenberg sebelum melakukan apa pun.

EditorPlus tidak kekurangan barang bagi mereka yang suka memiliki banyak kebebasan desain tanpa menyentuh kode. Pada dasarnya, plugin adalah editor CSS tanpa perlu mengetahui CSS. Ini memberi pengguna akhir opsi untuk fitur CSS yang paling dibutuhkan melalui opsi blok. Ini adalah taman bermain bagi mereka yang suka bermain-main dengan desain dan cukup kuat untuk membuat tata letak yang unik tanpa membebani situs di ujung depan.

Cara Kerja EditorPlus

Setelah mengaktifkan plugin EditorPlus, pengguna akhir dapat mulai menggunakan opsinya segera dengan menuju ke editor posting atau halaman. Setelah memasukkan blok, plugin membuat delapan tab berikut tersedia di bawah panel opsi blok (masing-masing didahului dengan simbol + ):

• Berbatasan
• Bayangan Kotak
• Perekat
• Latar belakang
• Batas
• Lapisan
• Radius Perbatasan
• Ekstra

Tab ini hanya akan muncul untuk blok WordPress inti dan bukan blok plugin pihak ketiga saat ini. Selain tab Ekstra, setiap tab sesuai dengan rekan CSS-nya. Tab Ekstra menyediakan opsi "Tampilan" yang lebih canggih, yang memungkinkan pengguna untuk mengubah nilai display elemen pembungkus blok di CSS. Opsi ini sebaiknya diserahkan kepada pengguna yang lebih mahir. Ini juga menyediakan opsi transisi yang akan bekerja dengan baik dengan gaya hover.

Setiap tab opsi blok juga memiliki tombol "R" dan "H" yang misterius. Tombol "R" memungkinkan pengguna untuk mengaktifkan opsi responsif, yang berarti mereka dapat mengubah gaya blok berdasarkan layar desktop, tablet, dan seluler. Tombol "H" memungkinkan pengguna mengubah desain berdasarkan status kursor mouse.

Plugin ini mengemas banyak opsi dalam sedikit ruang. Semua tab desain baru dapat terasa sedikit berlebihan pada awalnya. Namun, dengan sedikit penggunaan, mudah untuk mendapatkan memori otot dan dengan cepat mengeluarkan tata letak khusus.

Setiap opsi plugin cukup mudah. Dan, jika tidak, Anda mendapatkan manfaat dari umpan balik instan melalui editor blok.

Ada beberapa area yang terbukti bermasalah bagi beberapa pengguna, tergantung pada bagaimana tema mereka menata blok tertentu. Misalnya, pengaturan lebar di bawah tab Ukuran mungkin tidak selalu berfungsi. Beberapa tema akan menambahkan lebar maksimum ke blok, yang akan membatasi lebar keseluruhan tidak peduli ukurannya. Dimungkinkan untuk mengesampingkan ini melalui plugin, tetapi Kamal telah memilih untuk tidak melakukan ini di versi 1.0.

Hati-hati dengan margin. Tergantung pada desain tema, mungkin menggunakan margin kiri dan kanan untuk menempatkan konten. Bahkan ketika hanya mengatur margin atas atau bawah, plugin akan secara otomatis menampilkan 0 untuk margin kiri dan kanan. Ini dapat merusak tata letak konten untuk beberapa tema.

Satu masalah yang saya temui dengan plugin adalah gaya tema aktif saya mengesampingkan gaya plugin secara umum. Misalnya, tema Twenty Twenty default menargetkan p.has-background di CSS-nya untuk menambahkan padding khusus. Oleh karena itu, ini mengesampingkan CSS plugin EditorPlus dengan spesifisitas yang lebih tinggi. Masalah ini diharapkan, dan pengembang plugin menambahkan solusi untuk itu dalam bentuk kotak centang "penting" untuk setiap opsi desain. Jika pengguna mencentang kotak ini, ia menambahkan !important ke aturan gaya pada output, yang memungkinkannya mengesampingkan gaya tema. Ini bukan solusi 100% bodoh. Jarak tempuh Anda mungkin berbeda-beda, tergantung pada temanya, tetapi ini akan berfungsi untuk sebagian besar kasus penggunaan.

Saya tidak menyukai gagasan tentang kotak centang penting di UI. Ini bukan sesuatu yang harus dikhawatirkan oleh pengguna. Namun, ini adalah realitas dunia di mana tema dan plugin tidak memiliki cara nyata untuk mengomunikasikan aturan desain mana yang lebih penting daripada yang lain. Meskipun tidak menginginkan ini di UI, itu adalah keputusan yang cerdas untuk memasukkannya. Jika tidak, terlalu banyak aturan gaya tema yang akan menimpa CSS plugin.

Pikiran Akhir

Untuk rilis versi 1.0, EditorPlus memulai dengan awal yang solid. Dalam pengujian saya, saya menemukan beberapa kekurangan. Masalah apa pun untuk rata-rata pengguna kemungkinan akan datang dalam bentuk konflik tema, dan konflik tersebut kemungkinan besar akan seputar tema yang menggunakan spesifisitas tinggi atau !important dalam CSS mereka.

Kamal menjelaskan di halaman web plugin bahwa ada lebih banyak lagi yang akan datang dari plugin ini. Saya tidak yakin fitur apa yang ada dalam pikirannya, tetapi saya berharap dapat melihatnya. Saya ingin melihat opsi teks-bayangan untuk blok terkait teks seperti Judul dan Paragraf. Akan menyenangkan juga untuk melihat beberapa opsi desain untuk gambar di dalam blok Galeri daripada hanya elemen pembungkus.

Apakah Anda harus menggunakan EditorPlus akan bergantung pada apakah Anda memerlukan kontrol desain tambahan. EditorPlus ditujukan untuk orang-orang yang membutuhkan sesuatu yang lebih mirip dengan pembuat halaman yang ringan tetapi ingin tetap menggunakan WordPress asli. Plugin ini adalah tampilan yang bagus dari apa yang mungkin dan merupakan indikator yang baik dari opsi desain potensial yang suatu hari nanti akan mendarat di WordPress.