Manajemen dan Penciptaan Pola Canggih

Mereka yang menguasai pola blok akan diposisikan dengan kuat untuk memimpin dalam paradigma baru dalam mendesain, membangun, dan menskalakan WordPress.

Tonton sesi ini untuk mempelajari cara memanfaatkan fitur pola terbaru, serta alat baru yang menarik yang meningkatkan pengalaman manajemen pola untuk pekerja lepas dan agensi.

Pembicara:

• Michael Day, React Engineer di WP Engine
• Phil Johnston, Insinyur Perangkat Lunak Staf Senior di WP Engine

Slide Sesi:

Salinan:

PHIL JOHNSTON: Halo. Nama saya Phil Johnston, dan saya seorang Insinyur Perangkat Lunak Staf Senior di WP Engine. Dan saya sendiri bersama rekan satu tim saya Mike Day akan berbicara tentang manajemen dan pembuatan pola mutakhir di WordPress.

Jadi ada banyak hal baru dan menarik yang ditambahkan ke WordPress akhir-akhir ini. Dan salah satunya adalah pola. Dan saya akan berbicara tentang itu. Pola dibuat dari balok. Jadi mari selami langsung ke dalamnya.

Anda akan menggunakan blok di editor blok yang merupakan dasbor WordPress. Di sinilah Anda akan pergi untuk membuat sesuatu seperti posting blog atau halaman dan di mana Anda dapat mulai menulis atau membuat. Dan itu adalah tempat di mana Anda akan menggunakan blok.

Jadi saya bisa meminjam beberapa balok LEGO dari anak-anak saya untuk ceramah ini. Jadi untuk membantu mengilustrasikan hal ini, ketika Anda melihat halaman di sini yang mengatakan saya adalah blok judul, Anda dapat menganggapnya sebagai blok LEGO. Dan kemudian di bawahnya di mana dikatakan saya adalah blok paragraf, Anda dapat menganggap itu sebagai blok lain yang telah Anda potong di bawahnya dan seterusnya dan seterusnya.

Anda punya blok pos lain di bawah sana. Jadi Anda dapat mengkliknya. Dan kemudian Anda dapat mulai membangun halaman Anda seperti yang Anda inginkan. Dan Anda dapat mengatur ulang blok tersebut hanya dengan mengeklik, menyeret, atau menyusun ulang. Dan kemudian Anda dapat memasang kembali halaman Anda dengan sangat mudah karena semuanya diblokir.

Meskipun ini sangat sederhana untuk sesuatu seperti posting blog, dan Anda dapat langsung masuk ke editor dan mulai melakukan ini bahkan tanpa mengetahui bahwa ini adalah blok, tetapi Anda juga dapat membuat tata letak blok yang jauh lebih kompleks seperti apa yang Anda ' kembali melihat di sini. Jadi di sini Anda memiliki tata letak tiga kolom dengan tiga gambar. Dan di atas itu, Anda sebenarnya memiliki kolom dengan lebar penuh. Dan itu membentang di ketiga kolom itu. Dan kemudian tiga blok gambar, tiga blok judul sampel, tiga blok paragraf, dan kemudian tiga blok tombol di bawahnya.

Jadi sekali lagi, blok WordPress seperti LEGO. Anda dapat menyatukannya untuk membuat tata letak sederhana seperti yang pertama saya tunjukkan atau tata letak yang lebih kompleks seperti yang Anda lihat di sini. Jadi saya telah menyorot blok yang mungkin Anda lihat di halaman seperti ini dengan warna merah. Jadi Anda bisa melihat yang pertama memiliki kotak merah di sekelilingnya. [Membersihkan Tenggorokan] Permisi. Dan itu mewakili sebuah blok. Dan kemudian di bawahnya, Anda memiliki blok lain dengan beberapa teks Lorem ipsum di dalamnya dan kemudian tiga blok gambar seperti yang saya sebutkan, tiga blok heading, tiga blok paragraf di bawahnya, dan tiga blok tombol.

Anda mungkin berpikir hanya itu yang diperlukan untuk membuat tata letak halaman seperti ini, tetapi sebenarnya ini sedikit lebih rumit dari itu. Jadi di slide ini, saya telah menyoroti blok yang tidak terlihat, blok yang tidak dapat Anda lihat. Ini adalah blok yang harus ada di halaman untuk menentukan di mana hal-hal harus duduk seperti fakta bahwa ada tiga kolom, bukan satu kolom.

Jadi blok yang tidak terlihat, meskipun kuat, mereka juga sangat sulit bagi pengguna biasa untuk masuk dan mulai menggunakannya. Saat Anda menggerakkan mouse di dalam editor blok, Anda tidak akan tahu bahwa ada blok yang tidak terlihat di sana karena tidak terlihat. Dan semua blok itu juga memiliki kontrol rumit yang menyertainya. Misalnya, inilah salah satu blok kolom.

Dan jika Anda melihat di sisi kanan, Anda dapat melihat semua kontrol rumit yang menyertainya yang tidak terlalu mudah atau intuitif untuk dipahami. Hal-hal seperti blok dalam menggunakan lebar konten atau padding atau spasi blok. Rata-rata pengguna tidak akan mengetahui atau memahami apa yang dilakukan pengaturan ini. Dan ini sedikit mirip dengan saya jika saya berjalan ke dapur dan melihat banyak bumbu.

Saya bukan koki yang hebat. Jadi saya akan memiliki banyak bumbu di rak seperti ini. Dan saya tidak tahu bagaimana menggabungkan atau menggunakannya karena saya tidak meluangkan waktu untuk menjadi koki. Dan sama seperti butuh waktu untuk menjadi koki bintang lima dan memasak makanan yang enak dan lezat, butuh waktu dan ada kurva belajar yang sulit dengan editor blok dan memahami blok mana yang digunakan pada waktu tertentu untuk membuat sesuatu yang terlihat bagus atau enak. Bagus.

Dan itu adalah spesialisasi. Ini adalah kerajinan yang harus Anda kembangkan. Jadi rata-rata pengguna akan dibuang ke editor blok dengan batu tulis kosong seperti yang Anda lihat di sini. Dan mereka tidak akan tahu bahwa mereka perlu menggunakan blok kolom, atau bagaimana menggunakan blok itu, atau apa yang harus dimasukkan ke dalam blok itu, pada dasarnya rempah-rempah yang perlu mereka gabungkan untuk membuat sesuatu yang benar-benar tampak hebat.

Mereka mungkin merasa frustrasi. Mereka mungkin merasa bosan dan sulit untuk mendapatkan apa yang mereka inginkan. Dan bahkan jika mereka mempelajari semua kerumitan blok itu, mereka mungkin tidak memiliki keterampilan desain. Jadi, meski kuat, blok bisa sulit digunakan. Dan inilah mengapa konsep pola ditemukan.

Jadi di WP Engine, kami membuat sebuah plugin bernama Atomic Blocks. Dan di Blok Atom, kami pada dasarnya datang dengan konsep pola tapi kami menyebutnya bagian dan tata letak. Dan itu konsep yang persis sama. Dan WordPress Core sebenarnya mengambil inspirasi dari Atomic Blocks untuk konsep yang sekarang ada di WordPress Core dan disebut pola.

Jadi pola adalah kumpulan blok prebuilt yang dapat dijelajahi pengguna, seperti yang Anda lihat di sini. Ada banyak pola di sini untuk mereka pilih. Dan dengan mengklik salah satunya, mereka memasukkan semua itu ke halaman mereka dengan satu klik. Jadi alih-alih perlu merakit balok seperti ini, balok LEGO, mereka mendapatkan sesuatu seperti ini, sekelompok balok yang telah dirakit sebelumnya yang dibuat oleh, semoga, seseorang yang sudah sangat ahli dalam desain dan telah menghabiskan waktu berjam-jam untuk kerajinan pembuatan itu blok.

Jadi begitu Anda memasukkannya ke halaman, tampilannya sedikit seperti ini. Dan begitu saja, boom, Anda memiliki sebuah pola, sejumlah besar blok yang telah dipasang sebelumnya yang terlihat bagus, rasanya enak, dan berfungsi, dan kemudian Anda dapat masuk dan mengetik teks yang perlu Anda ubah . Jadi, Anda akan mengubah sesuatu seperti judul sampel ke teks unik untuk halaman Anda.

Jadi pola seperti permulaan yang besar bagi rata-rata pengguna. Mereka tidak perlu mempelajari semua kerumitan editor blok, semua hal rumit itu. Mereka tidak perlu menjadi desainer profesional tetapi mereka bisa mendapatkan desain yang terlihat bagus hanya dengan memasukkan pola ke halaman.

Jadi, jika Anda adalah agensi, seseorang yang membuat situs web untuk orang lain atau klien, Anda dapat menggunakan pola pemblokiran untuk membantu klien Anda membantu diri mereka sendiri. Dengan mengirimkan sejumlah besar pola pradesain ke klien Anda, mereka dapat membuat halaman mereka sendiri.

Jadi katakanlah mereka memiliki acara yang akan datang sehingga mereka memerlukan halaman khusus. Mereka dapat mengambil pola blok yang Anda buat untuk mereka yang cocok dengan merek mereka. Itu cocok dengan skema warna mereka dan semua hal semacam itu, dan mereka cukup mengeklik dan memasukkannya ke halaman dan merekayasa balik– mulailah mengetik ke dalam blok-blok itu alih-alih perlu mengetahui semua kerumitan blok mana yang akan digunakan di mana skenario, dan apa yang tidak boleh dilakukan juga, dan cara membuat tata letak yang bekerja dengan baik di seluruh perangkat dan semua hal semacam itu.

Namun, sementara pola blok mudah digunakan untuk pengguna rata-rata, mereka tidak mudah dibuat. Dan mereka bahkan lebih sulit untuk dikelola dari waktu ke waktu. Dan untuk pengembang dan agensi, tidak ada alur kerja atau alat bawaan di WordPress untuk membantu Anda membuat pola.

Jadi saya telah memecahkan langkah-langkah untuk membangun pola saat ini dalam apa yang akan saya sebut dengan susah payah di sini menjadi 10 langkah. Dan jika ini terlihat luar biasa, itu karena memang begitu. Hal pertama yang harus Anda lakukan adalah membuat file PHP di editor kode seperti VS Code. Anda harus meletakkan header file tertentu di bagian atas file itu.

Maka Anda perlu tempat untuk membangun. Jadi Anda harus memiliki WordPress, mungkin di lokal Anda, dan itu bagus. Tetapi kemudian Anda perlu membuat halaman sementara di dalam WordPress itu hanya agar Anda dapat meletakkan blok di suatu tempat dan mengerjakannya. Dan kemudian Anda perlu membangunnya. Anda perlu menggunakan keterampilan itu, kerajinan yang telah Anda kembangkan, dan membuatnya terlihat cantik. Dan setelah selesai, Anda harus beralih ke tampilan kode dan menyalin semua kode itu ke file yang Anda buat di langkah pertama.

Dan kemudian Anda harus menyimpan file itu ke lokasi tertentu di tema Anda. Jika Anda membuat tema dan mengirimkannya ke klien, Anda harus memasukkannya ke dalam direktori pola. Dan kemudian jika pola Anda berisi gambar seperti dalam tata letak tiga kolom yang saya tunjukkan, Anda harus memastikan bahwa gambar tersebut benar-benar akan berfungsi saat Anda mengirimkannya ke klien Anda. Jadi karena Anda membuatnya di komputer lokal Anda, gambar itu juga akan direferensikan dalam kode seolah-olah itu ada di hard drive komputer lokal Anda.

Jelas, ini adalah masalah. Setelah tidak ada lagi di komputer Anda, gambar itu tidak akan berfungsi. Jadi, Anda perlu menelusuri kode dengan sisir gigi halus, mencari URL komputer lokal mana pun, dan menggantinya dengan tag PHP tertentu. Dan kemudian Anda perlu memastikan bahwa Anda benar-benar memindahkan file gambar tersebut ke dalam tema Anda juga. Anda tidak bisa hanya mengubahnya dalam kode. Anda juga harus memindahkan file itu.

Dan kemudian untuk membuatnya lebih sulit, ini adalah tempat yang menurut saya paling membuat frustrasi, setidaknya bagi saya ketika saya sedang membangun banyak pola, adalah jika saya membuat kesalahan ejaan di dalam sebuah pola, saya harus mulai pada langkah ketiga lagi dan lanjutkan ke langkah sembilan lagi setiap saat hanya untuk memperbaiki kesalahan ejaan. Anda juga harus - karena Anda harus membuat ulang semua kode blok setiap saat - Anda kemudian harus meneliti semua URL gambar tersebut dan menggantinya, memasukkannya kembali ke dalam file.

Ini adalah serangkaian langkah yang berulang dan membosankan, terutama untuk mengelola dari waktu ke waktu. Seperti katakanlah Anda perlu mengubah pola beberapa bulan dari sekarang. Ini sangat membosankan. Dan ini adalah sesuatu yang kami temui saat membuat pola untuk koleksi Genesis Pro kami. Kami telah mengirimkan banyak bagian dan tata letak atau pola dengan itu dan menjadi sangat frustrasi dengan proses melakukan hal-hal yang membosankan ini berulang kali.

Dan itulah yang membuat kami membuat alat untuk membantu kami tidak perlu melakukan hal-hal ini, untuk menghilangkan kebosanan itu, dan membuatnya secepat mungkin. Anda bisa mengerjakannya, menyimpannya, dan, boom, itu akan langsung masuk ke file untuk Anda. Ini akan menempatkan file di tempat yang tepat. Itu menulis semua kode untuk Anda. Jadi kami memutuskan untuk membuat alat untuk diri kami sendiri secara internal yang akan menghilangkan semua rasa sakit ini. Dan kami tidak pernah benar-benar bermaksud agar itu menjadi sesuatu yang akan kami biarkan orang lain gunakan tetapi itu menjadi sangat berguna bagi kami sehingga kami ingin membuatnya tersedia untuk digunakan orang lain juga.

Jadi sekali lagi, seperti yang Anda lihat, cara sulit membangun pola saat ini tidak ideal, dan itu bukan cara yang bagus untuk melakukan sesuatu. Itulah mengapa kami membuat Pattern Manager, UI untuk membuat dan memelihara koleksi pola di dalam WordPress. Jadi saya akan memberikannya kepada kolega saya, Mike Day, untuk memandu kami melalui pengelola pola dan menunjukkan kepada kami semua fitur luar biasa di dalamnya. Jadi untukmu, Mike.

MIKE HARI: Hai. Saya Mike. Saya seorang insinyur perangkat lunak di WP Engine. Pola adalah alat pembuatan tata letak yang kuat yang berpotensi mengubah permainan untuk pembuat WordPress. Tapi seperti yang baru saja ditunjukkan Phil, pengalaman benar-benar menggunakan pola-pola ini dalam hal menciptakan dan mengelolanya, sangat kurang. Pattern Manager bertujuan untuk membawa pengelolaan file pola ke garis depan desain WordPress dengan cara yang mudah melalui plugin yang dapat meluncur ke alur kerja Anda. Mari kita masuk.

Untuk tujuan awal dari demo ini, saya akan membiarkan jendela editor kode saya terbuka di sini di sebelah kanan. Ini adalah file pola aktual yang disimpan langsung ke disk saya. Dan saya benar-benar ingin menekankan bahwa ketika Anda bekerja dengan Pattern Manager, Anda sebenarnya memanipulasi dan membuat file fisik yang disimpan ke disk Anda. Secara khusus, mereka disimpan ke direktori tema Anda saat ini. Jadi Anda dapat melihat di sini dua file PHP atau file pola ini, mereka mewakili pola yang sedang aktif di tampilan Pola ini.

Selain itu, perhatikan direktori gambar ini. Phil mengemukakan poin yang sangat menarik bahwa saat ini saat bekerja dengan pola, katakanlah Anda memiliki banyak gambar yang disimpan ke suatu pola. Semua URL untuk gambar tersebut akan mengarah ke instalasi lokal Anda. Itu masalah besar setiap kali tiba saatnya untuk benar-benar membagikan pekerjaan Anda.

Semua gambar itu akan rusak. Jadi kami mendekatinya sedikit berbeda. Kami sebenarnya menyimpan salinan gambar-gambar ini langsung ke folder tema itu sendiri. Ini adalah pengubah permainan untuk kontrol versi, misalnya. Katakanlah Anda dan kolaborator Anda menggunakan Git. Sekarang Anda dapat yakin bahwa Anda semua memiliki akses ke gambar yang sama saat Anda bekerja.

OKE. Jadi mari kita lompat ke antarmuka. Ini adalah tampilan pola. Dan langsung di sini, Anda dapat melihat kedua pola yang didaftarkan untuk tema saya. Saat Anda mengarahkan kursor ke pratinjau pola, perhatikan tombol tindakan yang muncul. Kami memiliki opsi untuk mengedit, menggandakan, atau menghapus pola tertentu. Ada juga beberapa opsi pemfilteran di sini di sebelah kiri, tetapi saya akan kembali ke sini sebentar lagi. Untuk saat ini, mari kita masuk dan mengedit sebuah pola.

Jadi segera, saya yakin Anda akan mengenali UI yang sangat familiar. Ini adalah editor blok WordPress, dalam hal ini digunakan kembali untuk menyediakan ruang khusus untuk bekerja dengan pola. Dan di sini di sebelah kanan, Anda akan melihat berbagai properti tajuk ini. Sekarang sebelum saya membahas ini, saya ingin memberikan sedikit lebih banyak konteks dan benar-benar menggunakan beberapa teks yang dipinjam dari dokumentasi pengembang WordPress.

Properti judul cukup jelas. Ini adalah ID hadap depan yang dapat dibaca manusia, jika Anda mau, yang akan dilihat pengguna saat mereka berinteraksi dengan pola Anda di situs. Kategori benar-benar digunakan untuk mengelompokkan pola bersama. Ini akan menjadi larik kategori terdaftar di mana Anda dapat menambahkan satu, atau banyak, atau benar-benar tidak ada sama sekali jika Anda mau. Tapi ada masalah di sini dengan cara saat ini bekerja di WordPress Core.

Benar-benar tidak ada cara yang bagus untuk mengetahui kategori apa yang sebenarnya tersedia. Tidak ada tempat yang jelas untuk benar-benar menemukan kategori pola blok terdaftar ini di manapun di situs Anda, setidaknya yang saya tahu. Sekarang kata kunci yang dapat Anda anggap sebagai semacam istilah pencarian. Pada dasarnya, Anda dapat memasukkan alias deskriptif ini untuk menjelaskan pola Anda sehingga apa pun yang dicari pengguna di penyisip, mereka dapat dengan mudah menemukan apa yang mereka butuhkan. Dan deskripsinya adalah semacam perpanjangan dari ide itu kecuali itu adalah teks yang tersembunyi secara visual. Ini sangat berguna untuk pengguna tunanetra yang mungkin menggunakan pembaca layar.

Sekarang melompat kembali ke Pattern Manager, mari ubah properti meta ini. Judul pola adalah input teks sederhana. Cukup mulai mengetik untuk mengganti nama pola Anda. Tapi perhatikan fitur tersembunyi di sini. Manajer pola memberi tahu saya bahwa pola dengan judul ini sudah ada di tema. Saya tidak ingin merusak file itu secara tidak sengaja, jadi saya akan membiarkan judulnya saja.

OKE. Mari kita pilih beberapa kategori. Jadi langsung saja, perhatikan kami telah merender daftar kategori ini hanya dalam dropdown. Kalau tidak, sulit untuk mengetahui di mana sebenarnya menemukan data ini. Tetapi daftar ini diisi secara dinamis melalui panggilan API. Itu berarti tidak hanya semua kategori pola blok terdaftar untuk tema Anda, tetapi kategori apa pun yang mungkin telah Anda daftarkan akan kami tampilkan di sini. Mari kita pilih fitur untuk saat ini.

OKE. Dan mari tambahkan beberapa istilah yang dapat dicari. Untuk keperluan demo ini, saya hanya akan menggunakan pola sampel. Namun ingat, di sinilah Anda dapat menambahkan istilah yang menjelaskan pola ini untuk pengguna yang menelusuri di penyisip. Dan perhatikan saya menggunakan istilah multiword di sini. Itu didukung di pengelola pola.

OKE. Dan mari kita tambahkan deskripsi. Ingatlah bahwa ini adalah teks yang tersembunyi secara visual. Jadi maksud utama di sini menurut saya adalah untuk membantu pembaca layar. Jadi mari kita gambarkan ini sebagai tiga kolom dengan warna terbalik. OKE. Sempurna. Aku merasa kita berada di tempat yang bagus sekarang. Kita sebenarnya bisa menyelamatkan pekerjaan kita. Tapi sebelum saya melakukan itu, saya ingin Anda memperhatikan header di file ini di sebelah kanan. Sekarang begitu saya tekan Perbarui Pola, tiba-tiba ada lebih banyak data di sini. Deskripsi, kategori, dan kata kunci yang baru saja kami modifikasi semuanya telah muncul di sini tanpa saya harus menyentuh file ini.

OKE. Mari kita lihat properti meta yang tersisa. Jadi pertama-tama, kami memiliki properti yang cukup menarik dalam lebar viewport. Ini dimaksudkan untuk menjadi bilangan bulat yang mewakili lebar yang diskalakan untuk mempratinjau pola ini. Jadi secara default, setiap kali Anda membuat pola– katakanlah Anda membuat sesuatu yang lebar penuh atau bahkan mungkin sangat sempit. Pengaturan default untuk ini di WordPress Core mungkin membuat penskalaan terlihat sedikit aneh di pratinjau.

Jadi jenis posting. Ini hanyalah sebuah array dari slug tipe post yang polanya dimaksudkan untuk digunakan. Perhatikan bahwa menambahkan nilai di sini sebenarnya akan membatasi pola sehingga hanya berfungsi dengan jenis posting tersebut. Perhatikan juga bahwa membiarkan ini kosong akan menyebabkan pola bekerja dengan semua jenis posting.

Selanjutnya kita memiliki tipe blok. Ini adalah array lain tetapi kali ini tipe blok pola yang dimaksudkan untuk digunakan. Sekarang saya harus mengakui setiap kali saya mulai menggunakan jenis blok ini, saya merasa agak membingungkan. Sepertinya penggunaannya benar-benar dimaksudkan untuk multiguna tetapi maksud di baliknya menurut saya tidak terlalu jelas.

Dan terakhir, kami memiliki properti inserter. Sekarang secara default, semua pola akan muncul di inserter tetapi katakanlah Anda ingin mengubahnya. Anda cukup menambahkan nilai Boolean false untuk properti ini dan akan disembunyikan dari penggunaan di inserter.

Jadi kembali ke Pattern Manager, mari kita lihat bagaimana kita menangani properti meta yang tersisa ini. Pertama, saya akan menutup panel lainnya. Dan mari kita lihat lebar viewport. Sekarang ingat ini adalah nilai integer yang hanya mengontrol pratinjau yang diskalakan untuk pola Anda di inserter. Satu hal yang menyebalkan dengan implementasi saat ini sebenarnya adalah melihat hasil kerja Anda.

Jadi katakanlah saya memodifikasi header di file pola saya dan saya mengubah lebar viewport. Satu-satunya cara untuk benar-benar melihat tampilannya adalah dengan mengatakan membuat postingan baru. Itu menjadi sedikit berbelit-belit. Hanya sedikit terlalu rumit untuk melompat-lompat. Ini sedikit sakit. Jadi cara kami mendekatinya cukup arahkan kursor ke atas penggeser dan segera pratinjau ditampilkan. Dan saat saya menyeret dan mencoba ukuran yang berbeda, saya dapat melihat bagaimana skala pola ini. Ini sangat berguna dan penghemat waktu yang sangat besar. Mari kita pilih 1.200 untuk saat ini. Dan mari beralih ke jenis posting.

Hal pertama yang perlu diperhatikan tentang panel ini adalah adanya tooltips ini. Ini hanyalah informasi kecil untuk dicoba dan membantu memandu Anda saat menggunakan aplikasi. Jadi pertama-tama, ini hanya mengulangi sesuatu yang telah saya diskusikan. Jika tidak ada pilihan, jika tidak ada jenis kiriman yang ditambahkan ke header file pola Anda, pola Anda akan berfungsi untuk semua jenis kiriman. Tapi perhatikan di bawah ada pengaturan yang disebut Modal Visibility.

Ini adalah fitur tersembunyi yang sangat keren. Pada dasarnya, jika Anda memiliki tipe blok yang benar di header file pola Anda, setiap kali pengguna membuat posting baru dari tipe yang ditargetkan, mereka akan melihat modal muncul. Dan mereka dapat memilih pola Anda langsung dari modal itu. Dan saya akan menunjukkan kepada Anda apa yang saya maksud sebentar lagi. Tapi saya ingin Anda memperhatikan bagaimana toggle ini sebenarnya dinonaktifkan. Dan itu karena pengaturan visibilitas modal tidak akan berfungsi kecuali ada jenis posting yang diisi.

Jadi cara kami mendekatinya adalah dengan hanya menonaktifkan sakelar sampai ada jenis posting. OKE. Sekarang saya bisa mengaktifkan ini. Dan sakelar tampilan dan penyisip, melakukan apa yang mungkin Anda duga. Jika Anda menonaktifkan ini, ini akan menetapkan nilai false di header file Anda. Dan pola ini tidak akan muncul lagi di inserter. OKE. Mari lanjutkan dan perbarui ini.

Sekarang mari kita lihat bagaimana semua ini bekerja dalam sebuah postingan. Jadi saya akan beralih dan benar-benar membuat posting baru. Sekarang langsung ini adalah modal yang saya bicarakan dalam tindakan. Karena tipe blok dan tipe posting yang benar keduanya ditambahkan ke file, sekarang saya langsung melihatnya ketika saya membuat posting baru. Dan saya cukup mengklik pratinjau pola dan, boom, pola saya ada di sana.

Itu cukup keren, tapi mari kita lihat bagaimana pemberian tag sebenarnya bekerja sebaliknya. Jadi inilah kategori yang saya pilih, fiturnya. Dan pola lain dalam tema saya memiliki kategori kolom dan teks, sehingga berfungsi dengan baik. Bagaimana dengan istilah pencarian saya? Istilah pencarian saya dengan pola sampel. Itu bekerja dengan baik. Dan teks tersembunyi saya dimulai dengan tiga kolom, juga berfungsi persis seperti yang diinginkan. Itu hebat.

OKE. Jadi mari kita kembali dan membahas satu lagi properti meta yang tersisa. Yang ini agak aneh untuk dijelaskan. Saya merasa lebih mudah jika saya hanya menunjukkannya kepada Anda. Jadi mari lanjutkan dan buat pola baru. Yang harus Anda lakukan untuk itu adalah menekan tombol Buat Pola Baru ini. Dan di sinilah saya kembali menjadi editor. Dalam hal ini, saya akan memilih blok kode. Dan di blok kode ini, saya akan menempelkan beberapa contoh kode.

Sekarang ini sebenarnya diambil dari dokumentasi WordPress. Ini adalah cara Anda mendaftarkan transformasi blok menggunakan PHP. Jadi Anda akan mengambil kode ini dan mungkin menempelkannya di file fungsi, apa pun yang Anda inginkan. Biarkan saya menunjukkan kepada Anda bagaimana kami mendekati ini. Di bagian tipe blok yang diubah ini, ada dropdown. Dropdown ini diisi secara dinamis seperti jenis dan kategori posting melalui panggilan API.

Jadi saya cukup mencari jenis yang saya targetkan– itu dia, inti/kode– dan mengambilnya. Sekarang hanya untuk mengilustrasikan sekali lagi, perbedaannya adalah bagaimana Anda dapat melakukan ini sekarang versus menggunakan pengelola pola. Untuk melakukan ini sekarang, saya harus memburu blok kode ini, mencari tahu dengan tepat konten apa yang mungkin saya perlukan, mencari tahu jenis blok saya, dan menempelkannya di suatu tempat, versus di Pattern Manager, saya hanya memilih bidang ini. Saya memilih nilai ini dari dropdown. OKE. Mari perbarui ini. Dan saya akan membuat postingan baru. Dan mari kita keluar dari modal kita.

Sekarang kali ini, saya juga akan memilih blok kode. Namun alih-alih benar-benar mengisinya dengan konten, saya cukup memilih opsi ini dari bilah alat. Dan perhatikan pemilihan pola ini. Saat saya memilih pola, ada pola saya. Dan dengan mengkliknya, segera blok ini diubah menjadi pola target saya.

Satu hal lain yang harus ditutupi dengan tipe transformasi adalah gagasan tentang apa yang disebut pola blok semantik. Ini mirip dengan transformasi blok tetapi ditargetkan pada bagian template. Misalnya, header dan footer. Tapi ada gotcha di sana. Satu hal yang perlu diketahui tentang memilih jenis blok bagian templat target itu adalah Anda harus memiliki jenis jenis posting yang benar juga ditetapkan atau itu tidak akan berfungsi. Jadi cara kami mendekatinya adalah dengan menetapkan jenis template ini untuk Anda. Dan terkunci. Dan itu akan tetap terkunci sampai jenis blok ini benar-benar dihapus.

Jadi itu untuk demo awal tampilan editor ini, tetapi saya perlu mengganti tema di latar belakang di sini. Dan sekarang saya akan beralih kembali ke Tampilan Pola. Intinya di sini adalah untuk menunjukkan kepada Anda bagaimana Pattern Manager berperilaku dengan banyak pola. Tema khusus ini memiliki lebih dari 50 pola yang terdaftar.

Sekarang perhatikan saat saya mengklik berbagai kategori ini seberapa cepat pola ini difilter. Ini sangat berguna ketika saya mencoba menemukan apa yang saya butuhkan di antara banyak pola. Tapi katakanlah Anda menginginkan kontrol yang lebih terperinci. Cukup mulai mengetik. Pemfilteran ini bekerja sangat mirip dengan Inserter. Ini sangat berguna dan sangat tajam. Dan berbicara tentang tajam, satu hal lagi yang perlu diperhatikan adalah seberapa cepat UI ini terasa.

Perhatikan bagaimana pratinjau ini tidak dimuat hingga saya benar-benar menggulirnya. Ini adalah implementasi kustom yang benar-benar hebat dalam menghemat sumber daya browser. Dan itu membuat aplikasi ini terasa cepat dan sangat tajam tidak peduli berapa banyak pola yang Anda gunakan. Baiklah. Kami telah membahas banyak hal dalam presentasi ini, jadi mari kita rekap dengan cepat. Pola mewakili persimpangan yang menarik antara kurasi elemen konten individual dan desain halaman penuh.

Sebagai pembuat WordPress, kemampuan untuk membuat elemen tata letak yang lebih besar dan menggunakannya kembali di seluruh tema adalah ide yang menarik. Header, footer, testimonial, kotak fitur. Ini semua adalah keunggulan dari setiap situs web. Dan sekarang Anda dapat dengan mudah mendesain seluruh situs Anda dengan pola.

Sekarang terlepas dari munculnya pola sebagai komponen kunci dari tema blok, WordPress sendiri tidak memiliki antarmuka resmi untuk benar-benar membuat atau mengelola pola ini, juga tidak ada apa pun di peta jalannya. Sebaliknya, pembuat harus membuat pola secara manual di editor kode mereka, menyalin dan menempelkan kode bolak-balik puluhan kali, menyisakan banyak ruang untuk kesalahan.

Produk kami, Pattern Manager, dirancang untuk meluncur ke alur kerja Anda. Cukup instal dan aktifkan plugin dan Anda akan mendapatkan UI modern untuk memfilter pola, membuat, menggandakan, mengedit, menghapus, dan semua ini bersama dengan pengalaman mengedit konten dalam pengalaman biasa menggunakan editor inti WordPress. Selain itu, banyak kesulitan untuk memahami seluk-beluk pemberian tag file pola dengan benar, misalnya, menambahkan kategori, kata kunci, atau bahkan mungkin membatasi untuk hanya bekerja dengan jenis kiriman khusus tertentu, semuanya diabstraksikan di UI kami. Builder memiliki kontrol penuh atas pengaturan ini melalui kontrol sidebar yang mudah digunakan.

Pattern Manager telah dirilis dan tersedia untuk diunduh sekarang di URL di bawah ini. Cobalah dan beri tahu kami pendapat Anda. Dan jangan ragu untuk menghubungi saya secara pribadi dan beri tahu saya pendapat Anda. Kami harap Anda mencoba Pattern Manager. Dan kami harap ini membantu Anda dengan cara yang sama seperti membantu tim pembuat WordPress kami. Terima kasih.