Bagaimana Kami Membuat Situs Web Kami Menggunakan Editor Blok

Jika Anda belum menyadarinya, tampilan situs web kami sedikit berubah . Kami menata ulang situs web kami, memperbarui font, gaya, palet warna… pindah dari ini:

untuk ini:

Namun yang paling menarik dari perubahan ini bukanlah tampilannya—kami memutuskan untuk membangun kembali situs web kami dari awal sehingga dapat menjadi situs yang sepenuhnya berbasis blok. Hari ini saya ingin menjelaskan kepada Anda bagaimana kita beralih dari tema yang dibuat khusus berdasarkan templat halaman ke tema lain yang sepenuhnya dipersonalisasi yang bergantung pada blok WordPress untuk semuanya .

Dari Mana Kami Berasal?

Ketika kami meluncurkan Nelio Content tiga tahun lalu, kami memutuskan untuk sepenuhnya mengatur ulang semua situs web kami dan memusatkan kehadiran online kami di bawah satu domain dan merek: neliosoftware.com . Logikanya, salah satu tugas yang kami lakukan adalah menghubungi Silo Creativo untuk membantu kami mendesain gambar situs web baru kami. Di sini Anda dapat melihat salah satu proposal pertama yang mereka buat:

Ketika kami memberikan persetujuan untuk desain awal itu, dan mengikuti permintaan kami, Ricardo dan Veronica mulai bekerja dan menerapkan tema yang dibuat khusus dengan semua templat yang diperlukan untuk berbagai bagian situs web kami : halaman utama, blog , posting, bantuan halaman, … Mereka mendesain segalanya dan setiap desain diimplementasikan ke dalam templat halaman. Kami memiliki halaman cepat yang sulit untuk diedit.

Dan kemudian Gutenberg tiba.

Memahami Konten Situs Web Kami

Editor blok WordPress baru, Gutenberg , adalah perubahan paradigma ke pembuatan konten di WordPress . Hingga saat ini, membuat halaman adalah proses yang membosankan dan tidak ramah bagi pengguna, kecuali jika Anda menggunakan pembuat halaman. Tapi Gutenberg datang dengan janji : membuat konten yang menarik secara visual di WordPress harus dapat dijangkau oleh siapa saja . Dan kami ingin menguji klaim ini dan melihat apakah kami benar-benar dapat membuat situs web yang indah hanya dengan mengandalkan Gutenberg.

Jika Anda pernah melihat web yang kami miliki sebelumnya, Anda akan tahu bahwa web tersebut memiliki desain yang sederhana dan elegan , termasuk elemen-elemen seperti:

• Halaman dengan gambar unggulan yang menempati lipatan pertama
• Blok dengan teks deskriptif dan gambar dan/atau video
• Formulir kontak
• halaman hukum
• Tabel harga
• Testimonial dari pengguna kami
• Daftar fitur

Tidak ada yang terlalu mewah, tapi tetap menarik. Bisakah kita membuat semua ini di Gutenberg ? Kami pikir begitu, dan kami mencoba. Inilah yang kami lakukan dan kami temukan.

Tema Baru Kami

Hal pertama yang kami lakukan untuk mendesain situs web baru adalah membuat tema dari awal. Untuk ini, kami memutuskan untuk memulai dari tema awal yang terkenal "garis bawah". Ini adalah tema super dasar yang hadir dengan template minimal dan diperlukan untuk memiliki tema WordPress yang beroperasi, dan didokumentasikan dengan baik dan terorganisir dengan baik.

Mengadaptasi garis bawah

Setiap tema WordPress memiliki serangkaian halaman yang umum untuk semua instalasi WordPress dan terlepas dari konten apa yang akhirnya Anda hasilkan di situs web Anda. Saya sedang berbicara tentang, misalnya, halaman blog tempat posting terakhir muncul, tata letak satu posting, halaman kesalahan 404, halaman hasil pencarian, dll. Jadi langkah pertama untuk membuat tema kita menggunakan blok WordPress adalah menyesuaikan garis bawah dengan gaya kita sendiri sehingga "generik" ini memiliki tampilan dan nuansa yang kita inginkan. Dan itulah yang kami lakukan.

Jika Anda melihat tangkapan layar sebelumnya, Anda akan melihat bahwa kami mengunduh tema dengan ekstensi _sassify! opsi diaktifkan, jadi tema diunduh dengan gaya dalam format SASS, diatur dalam banyak file dan membuatnya sangat mudah untuk diedit. Kami membutuhkan beberapa jam untuk menulis CSS dan beberapa penyesuaian PHP di functions.php , tetapi kami bisa mendapatkan tema yang tepat:

Blok WordPress Sebagai Blok Bangunan

Setelah kami memiliki tema awal yang kami rasa nyaman (dalam kasus kami, tema yang kami buat dari garis bawah, tetapi dalam kasus Anda itu bisa menjadi tema yang Anda temukan di wordpress.org , tema premium yang Anda beli beberapa waktu lalu, atau bahkan tema yang dibuat khusus seperti milik kita), saatnya untuk menata semua halaman kita menggunakan blok WordPress .

Jadi, tanpa basa-basi lagi, mari kita lihat semua "tantangan" yang kita hadapi selama tahap ini dan bagaimana kita mengimplementasikan semuanya menggunakan blok WordPress.

Blok Default

Blok yang disertakan WordPress secara default agak terbatas: paragraf, gambar, galeri… Tidak ada yang terlalu mewah—semuanya tampak lebih fokus pada pembuatan posting blog daripada tata letak halaman.

Tapi tidak apa-apa.

Tidak apa-apa karena, sebagai permulaan, ada banyak halaman di situs web yang terlihat seperti posting blog. Misalnya, halaman dengan informasi hukum atau kebijakan privasi dan cookie lebih dekat dengan posting blog daripada yang mungkin Anda pikirkan sebelumnya.

Tetapi juga tidak masalah karena kita dapat membuat halaman yang indah dengan komponen yang sangat sederhana. Misalnya, dalam kita dapat menggabungkan teks dan video. Ini adalah sesuatu yang dapat kita capai dengan mudah dengan blok Media & Teks :

Cukup dekat, ya?

Menggabungkan Blok Default

Blok sederhana bisa sangat kuat jika digabungkan. Misalnya, pertimbangkan tangkapan layar berikut, di mana kami memiliki daftar fitur:

Bagaimana cara mengatasi ini? Nah, jika Anda melihatnya dengan cermat dan logis, Anda akan melihat bahwa setiap fitur adalah kombinasi dari sebuah gambar dan beberapa teks (apakah ini terdengar familiar?). Kemudian, Anda akan melihat bahwa kita jelas memiliki tiga kolom jadi… bagaimana jika kita menggabungkan blok Media & Teks dengan blok Kolom ?

Tidak buruk, kami cukup dekat! Saat menggabungkan blok, Anda harus pintar. Menggunakan satu blok Kolom berarti bahwa fitur mungkin tidak disejajarkan dengan benar secara horizontal, karena setiap kolom diatur secara independen dari yang lain. Untuk mengatasi masalah ini Anda harus sedikit cerdik: daripada menambahkan satu blok Kolom dengan beberapa fitur di setiap kolom, mari buat beberapa blok Kolom untuk memastikan hanya ada satu fitur di setiap kolom:

Dan BUM! Sekarang kami memiliki tiga kolom fitur dengan baris yang disejajarkan dengan benar.

Blok Default Dengan Steroid

Ada kasus di mana blok default cukup dekat dengan apa yang kita inginkan, tetapi tidak terlihat benar. Jika kita menghadapi masalah visual, kemungkinan besar kita dapat menyelesaikannya menggunakan CSS, dan bagian terbaiknya adalah Gutenberg bekerja sangat baik dengan kelas CSS.

Misalnya, jika kita ingin blok gambar kita memiliki bayangan (opsional), kita dapat membuat kelas CSS sederhana yang menambahkan bayangan ke gambar dan kemudian menerapkan kelas tersebut menggunakan bagian Lanjutan dari blok gambar:

Masalah dengan solusi ini adalah kami mencampur antarmuka pengguna dengan detail implementasi (nama kelas CSS). Mengapa saya harus tahu bahwa ada kelas yang disebut shadow yang menambahkan bayangan ke gambar? Nah, ini juga punya solusi sederhana.

Antarmuka pemrograman editor blok WordPress memaparkan fungsi yang disebut registerBlockStyle , seperti namanya, mendaftarkan gaya blok. Sesuatu yang sederhana seperti:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

memungkinkan kita mendaftarkan gaya baru untuk blok gambar ( core/image ) yang disebut Shadow yang, ketika diterapkan, menghasilkan blok gambar yang memiliki kelas has-style-image-with-shadow :

Blok Kustom

Terakhir, untuk kasus di mana tidak ada blok default yang memotongnya, Anda dapat membuat blok Anda sendiri (atau menggunakan blok pihak ketiga yang sudah ada). Kami menerapkan solusi ini dalam beberapa kasus: di tabel harga Nelio Content dan Nelio A/B Testing, peta yang muncul di halaman kontak kami (yang, omong-omong, ditunjukkan secara mendalam di posting kami tentang cara membuat blok), dan hasil dalam hal kegunaan sangat mengesankan:

jika Anda tidak tahu cara atau tidak ingin membuat blok Anda sendiri, saya akan memberi Anda beberapa plugin yang menyertakan blok tambahan untuk banyak hal:

• GhostKit
• Blok Atom
• CoBlock
• Blok Kadence

Pengalaman Kami

Beberapa bulan yang lalu kami memutuskan bahwa kami harus sedikit merenovasi situs web kami dan menerapkannya menggunakan Gutenberg. Tujuan kami ada dua: di satu sisi, kami ingin memperbarui situs web sedikit dan memberikan suasana yang lebih segar. Di sisi lain, kami ingin mempelajari lebih lanjut tentang Gutenberg, baik di tingkat pengguna maupun di tingkat pengembang. Pada akhirnya, kami berhasil memigrasikan seluruh web ke Gutenberg dan hasilnya benar-benar sukses. Kami mendorong Anda untuk melakukannya juga dan, jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkannya di komentar.

Omong-omong, postingan hari ini terinspirasi oleh ceramah yang saya berikan di WordCamp Lisbon 2019. Ini slide saya:

Gambar unggulan oleh Samuel Zeller di Unsplash .