Cara Membuat Pola Tema Blok di WordPress 6.0

Pola blok, juga sering disebut sebagai bagian, diperkenalkan di Wordpress 5.5 untuk memungkinkan pengguna membuat dan berbagi tata letak blok yang telah ditentukan sebelumnya di direktori pola. Direktori adalah rumah dari berbagai pola kurasi yang dirancang oleh komunitas WordPress. Pola-pola ini tersedia dalam format salin dan tempel sederhana, tidak memerlukan pengetahuan pengkodean dan dengan demikian sangat menghemat waktu bagi pengguna.

Meskipun banyak artikel tentang pola, ada kekurangan artikel yang komprehensif dan terkini tentang pembuatan pola yang mencakup fitur terbaru yang disempurnakan. Artikel ini bertujuan untuk mengisi celah dengan fokus pada fitur yang disempurnakan baru-baru ini seperti membuat pola tanpa registrasi dan menawarkan panduan langkah demi langkah terkini untuk membuat dan menggunakannya dalam tema blok untuk pemula dan penulis berpengalaman.

Sejak peluncuran Wordpress 5.9 dan Dua Puluh Dua Puluh Dua (TT2) tema default, penggunaan pola blok dalam tema blok telah menjamur. Saya telah menjadi penggemar berat pola blok dan telah membuat dan menggunakannya di tema blok saya.

Baru Wordpress 6.0 penawaran tiga pola utama menampilkan peningkatan untuk penulis:

• Mengizinkan pendaftaran pola melalui /patterns folder (mirip dengan /parts, /templates, dan /styles Registrasi).
• Mendaftarkan pola dari direktori pola publik menggunakan theme.json.
• Menambahkan pola yang dapat ditawarkan kepada pengguna saat membuat halaman baru.

Dalam pengantar Menjelajahi video WordPress 6.0, Penghubung produk otomatis Ann McCathy menyoroti beberapa fitur pola yang baru disempurnakan (mulai pukul 15:00) dan membahas rencana peningkatan pola di masa mendatang — yang meliputi pola sebagai elemen bagian, memberikan pilihan untuk pilih pola pada pembuatan halaman, mengintegrasikan pencarian direktori pola, dan banyak lagi.

Prasyarat

Artikel tersebut mengasumsikan bahwa pembaca memiliki pengetahuan dasar tentang antarmuka pengeditan situs lengkap (FSE) WordPress dan tema blok. Itu Buku Pegangan Editor Blok dan Pengeditan Situs Lengkap situs web menyediakan panduan tutorial terbaru untuk mempelajari semua fitur FSE, termasuk tema dan pola blok yang dibahas dalam artikel ini.

Bagian 1: Mengembangkan pendekatan untuk membuat pola blok

Pendekatan awal untuk membuat pola blok memerlukan penggunaan API pola blok baik sebagai plugin khusus atau langsung terdaftar di functions.php file untuk dibundel dengan tema blok. WordPress 6.0 yang baru diluncurkan memperkenalkan beberapa fitur baru dan yang disempurnakan yang bekerja dengan pola dan tema, termasuk pendaftaran pola melalui a /patterns folder dan modal pola pembuatan halaman.

Sebagai latar belakang, pertama-tama mari kita lihat sekilas bagaimana alur kerja registrasi pola berevolusi dari menggunakan API pola register menjadi memuat langsung tanpa registrasi.

Contoh kasus penggunaan 1: Dua Puluh Dua Puluh Satu

Defaultnya Tema Dua Puluh Dua Puluh Satu (TT1) dan TT1 Blok tema (saudara dari TT1) menunjukkan bagaimana pola blok dapat didaftarkan di tema functions.php. Dalam tema eksperimental TT1 Blocks, single ini blok-pola.php file yang berisi delapan pola blok ditambahkan ke functions.php sebagai include seperti yang ditunjukkan di sini.

Pola blok khusus perlu didaftarkan menggunakan register_block_pattern fungsi, yang menerima dua argumen — title (nama pola) dan properties (array yang menggambarkan properti dari pola).

Berikut adalah contoh mendaftarkan pola paragraf "Hello World" sederhana dari ini Artikel Pembentuk Tema:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Setelah pendaftaran, register_block_pattern() fungsi harus dipanggil dari handler yang dilampirkan ke init kait seperti yang dijelaskan di sini.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Setelah pola blok didaftarkan, pola tersebut akan terlihat di editor blok. Dokumentasi yang lebih rinci ditemukan di ini Registrasi Pola Blok.

Blok pola properti

Selain diperlukan title dan content properti, itu buku pegangan editor blok daftar opsional berikut: sifat pola:

• title (wajib): Judul pola yang dapat dibaca manusia.
• content (wajib): Blok Markup HTML untuk pola.
• description (Opsional): Teks yang tersembunyi secara visual yang digunakan untuk menggambarkan pola dalam penyisip. Deskripsi bersifat opsional tetapi sangat dianjurkan bila judul tidak sepenuhnya menggambarkan apa yang dilakukan pola tersebut. Deskripsi akan membantu pengguna menemukan pola saat mencari.
• categories (Opsional): Larik kategori pola terdaftar yang digunakan untuk mengelompokkan pola blok. Pola blok dapat ditampilkan pada beberapa kategori. Sebuah kategori harus didaftarkan secara terpisah agar dapat digunakan di sini.
• keywords (Opsional): Serangkaian alias atau kata kunci yang membantu pengguna menemukan pola saat menelusuri.
• viewportWidth (Opsional): Bilangan bulat yang menentukan lebar pola yang diinginkan untuk memungkinkan pratinjau skala pola di penyisipan.
• blockTypes (Opsional): Array tipe blok yang polanya dimaksudkan untuk digunakan. Setiap nilai harus menjadi blok yang dideklarasikan name.
• inserter (Opsional): Secara default, semua pola akan muncul di penyisipan. Untuk menyembunyikan pola sehingga hanya dapat disisipkan secara terprogram, atur inserter untuk false.

Berikut adalah contoh cuplikan kode plugin pola kutipan yang diambil dari Blog WordPress.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Menggunakan pola dalam file template

Setelah pola dibuat, mereka dapat digunakan dalam file template tema dengan markup blok berikut:

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

Contoh dari repositori GitHub ini menunjukkan penggunaan “footer-with-background” pola siput dengan “tt2gopher” awalan dalam tema blok TT2 Gopher.

Pengadopsi awal tema blok dan plugin Gutenberg juga memanfaatkan pola dalam tema klasik. Standarnya Dua puluh dua puluh dan tema Eksell favorit saya (a situs demo di sini) adalah contoh bagus yang menunjukkan bagaimana fitur pola dapat ditambahkan ke tema klasik.

Contoh kasus penggunaan 2: Dua Puluh Dua Puluh Dua

Jika sebuah tema hanya mencakup beberapa pola, pengembangan dan pemeliharaannya cukup dapat dikelola. Namun, jika tema blok mencakup banyak pola, seperti pada tema TT2, maka pattern.php file menjadi sangat besar dan sulit dibaca. Tema TT2 default, yang dibundel lebih dari 60 pola, menampilkan alur kerja pendaftaran pola yang direfaktorkan struktur yang lebih mudah dibaca dan dipelihara.

Mengambil contoh dari tema TT2, mari kita bahas secara singkat bagaimana alur kerja yang disederhanakan ini bekerja.

2.1: Mendaftarkan Kategori Pola

Untuk tujuan demonstrasi, saya membuat tema anak TT2 dan memasangnya di situs pengujian lokal saya dengan beberapa konten tiruan. Mengikuti TT2, saya mendaftar footer-with-background dan ditambahkan ke daftar larik kategori pola berikut di block-patterns.php file.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

Dalam contoh kode ini, setiap pola yang tercantum dalam $block_patterns = array() disebut oleh foreach() fungsi yang requireh patterns file direktori dengan nama pola yang terdaftar dalam array yang akan kita tambahkan pada langkah berikutnya.

2.2: Menambahkan file pola ke /inc/patterns map

Selanjutnya, kita harus memiliki semua file pola yang terdaftar di $block_patterns = array(). Berikut adalah contoh dari salah satu file pola, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Mari kita lihat polanya di footer.html bagian templat:

<!-- wp:template-part {"slug":"footer"} /-->

Ini mirip dengan menambahkan bagian heading atau footer dalam file template.

Pola juga dapat ditambahkan ke parts/footer.html template dengan memodifikasinya untuk merujuk ke slug dari file pola tema (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Sekarang, jika kita mengunjungi penyisip pola dari editor blok, Footer with background harus tersedia untuk kita gunakan:

Tangkapan layar berikut menunjukkan footer yang baru dibuat dengan pola latar belakang di front-end.

Sekarang pola telah menjadi bagian integral dari tema blok, banyak pola dibundel dalam tema blok — seperti kotak, bibit, tanah maya, Ahli ilmu hewan, Ahli geologi — mengikuti alur kerja yang dibahas di atas. Berikut adalah contoh tema Quadrat /inc/patterns folder dengan pendaftaran pola blok file dan daftar file dengan sumber konten dan header pola yang diperlukan dalam return array() fungsi.

Bagian 2: Membuat dan memuat pola tanpa registrasi

Harap dicatat bahwa fitur ini memerlukan instalasi WordPress 6.0 atau plugin Gutenberg 13.0 atau lebih tinggi di situs Anda.

Kredensial mikro fitur baru WordPress 6.0 memungkinkan pendaftaran pola melalui file dan folder standar – /patterns, membawa konvensi serupa seperti /parts, /templates, dan /styles.

Prosesnya, seperti juga dijelaskan dalam Kedai WP ini artikel, melibatkan tiga langkah berikut:

• membuat folder pola di root tema
• menambahkan header pola gaya plugin
• konten sumber pola

Markup tajuk pola khas, diambil dari artikel ditunjukkan di bawah ini:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Seperti yang dijelaskan di bagian sebelumnya, hanya Title dan Slug bidang wajib diisi dan bidang lainnya opsional.

Merujuk contoh dari tema yang baru dirilis, saya memfaktorkan ulang pendaftaran pola di Blok Gopher TT2 ini tema demo, disiapkan untuk artikel sebelumnya tentang CSS-Trick.

Dalam langkah-langkah berikut, mari kita jelajahi bagaimana footer-with-background.php belt hold terdaftar dengan PHP dan digunakan dalam footer.html template difaktorkan ulang.

2.1: Buat /patterns folder di root tema

Langkah pertama adalah membuat /patterns folder di root tema TT2 Gopher dan pindahkan footer-with-background.php file pola ke /patterns folder dan refactor.

2.2: Tambahkan data pola ke header file

Selanjutnya, buat bidang pendaftaran tajuk pola berikut.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

File pola memiliki bidang judul teratas yang ditulis sebagai komentar PHP. Diikuti oleh blok-konten ditulis dalam format HTML.

2.3: Tambahkan Konten Pola ke file

Untuk bagian konten, mari salin cuplikan kode di dalamnya kutipan tunggal (misalnya, '...') dari bagian konten footer-with-background dan ganti <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Seluruh cuplikan kode dari patterns/footer-with-background.php file dapat dilihat di sini di GitHub.

Harap dicatat bahwa /inc/patterns dan block-patterns.php adalah ekstrak, tidak diperlukan di WordPress 6.0, dan disertakan hanya untuk tujuan demo.

2.4: Merujuk pola slug di template

Menambahkan refactored di atas footer-with-background.php pola untuk footer.html template persis sama seperti yang dijelaskan di bagian sebelumnya (Bagian 1, 2.2).

Sekarang, jika kita melihat bagian footer situs di editor blok atau front-end situs kita di browser, bagian footer ditampilkan.

Kategori dan tipe pola Pendaftaran (opsional)

Untuk mengkategorikan pola blok, kategori dan tipe pola harus didaftarkan di tema functions.php file.

Mari pertimbangkan contoh mendaftarkan kategori pola blok dari tema TT2 Gopher.

Setelah registrasi, pola ditampilkan di penyisip pola bersama dengan pola default inti. Untuk menambahkan label kategori khusus tema di penyisip pola, kita harus memodifikasi cuplikan sebelumnya dengan menambahkan ruang nama tema:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

Grafik footer-with-background pola terlihat dalam pola yang disisipkan dengan pratinjaunya (jika dipilih):

Proses ini sangat menyederhanakan pembuatan dan menampilkan pola blok dalam tema blok. Ini tersedia di WordPress 6.0 tanpa menggunakan plugin Gutenberg.

Contoh tema tanpa registrasi pola

Pengadopsi awal sudah mulai menggunakan fitur ini di tema blok mereka. Beberapa contoh tema, yang tersedia dari direktori tema, bahwa pola pemuatan tanpa registrasi tercantum di bawah ini:

• Archaeo – 12 pola
• Liontin – 13 pola
• terpencil – 11 pola
• Taman skate – 10 pola
• Stewart – 17 pola
• Buku – 16 pola
• Avant-garde – 14 pola

Bagian 3: Membuat dan menggunakan pola dengan kode rendah

Grafik direktori pola resmi berisi desain kreatif kontribusi komunitas, yang dapat disalin dan disesuaikan sesuai keinginan untuk membuat konten. Menggunakan pola dengan editor blok tidak pernah semudah ini!

Pola apa pun dari direktori yang terus berkembang juga dapat ditambahkan untuk memblokir tema hanya dengan "salin dan tempel" sederhana atau sertakan dalam theme.json file dengan merujuk ke direktori mereka siput pola. Selanjutnya, saya akan membahas secara singkat betapa mudahnya hal ini dapat dicapai dengan pengkodean yang sangat terbatas.

Menambahkan dan menyesuaikan pola dari direktori pola

3.1: Salin pola dari direktori ke halaman

Di sini, saya menggunakan pola bagian footer ini oleh FirstWebGeek dari direktori pola. Salin pola dengan memilih tombol "Salin Pola" dan langsung menempelkannya di halaman baru.

3.2: Buat kustomisasi yang diinginkans

Saya hanya membuat beberapa perubahan pada warna font dan latar belakang tombol. Kemudian salin seluruh kode dari editor kode ke papan klip.

Jika Anda tidak terbiasa menggunakan editor kode, buka opsi (dengan tiga titik, kanan atas), klik tombol Editor kode, dan salin seluruh kode dari sini.

3.3: Buat file baru di folder /patterns

Pertama, mari kita buat yang baru /patterns/footer-pattern-test.php file dan tambahkan bagian header pola yang diperlukan. Kemudian rekatkan seluruh kode (langkah 3, di atas). Pola dikategorikan di area footer (baris: 5), kita dapat melihat yang baru ditambahkan di penyisipan pola.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Lihat pola baru di inserter

Untuk melihat yang baru ditambahkan Footer pattern from patterns library pola, buka posting atau halaman mana pun dan pilih ikon penyisip (simbol plus biru, kiri atas), lalu pilih kategori “TT2 Gopher – Footer”. Pola yang baru ditambahkan ditampilkan di panel kiri, bersama dengan pola footer lainnya dan pratinjaunya di sebelah kanan (jika dipilih):

Mendaftarkan pola langsung di theme.json fillet

Di WordPress 6.0, dimungkinkan untuk mendaftarkan pola apa pun yang diinginkan dari direktori pola dengan theme.json file dengan sintaks berikut. Itu 6.0 status catatan dev, “bidang pola adalah larik [siput pola] dari Direktori Pola. Siput pola dapat diekstraksi oleh [URL] dalam tampilan pola tunggal di Direktori Pola.”

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Kredensial mikro video fitur WordPress 6.0 singkat menunjukkan bagaimana pola terdaftar di /patterns folder (pada 3:53) dan mendaftarkan pola yang diinginkan dari pengarah pola di a theme.json berkas (pada 3:13).

Kemudian, pola terdaftar tersedia di kotak pencarian penyisip pola, yang kemudian tersedia untuk digunakan seperti perpustakaan pola yang dibundel tema.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

Dalam contoh ini, pola slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter dari contoh sebelumnya terdaftar melalui theme.json.

Model pola pembuatan halaman

Bagian dari "bangunan dengan pola” inisiatif, WordPress 6.0 menawarkan opsi modal pola kepada penulis tema untuk menambahkan pola tata letak halaman ke dalam tema blok, memungkinkan pengguna situs untuk memilih pola tata letak halaman (misalnya, halaman tentang, halaman kontak, halaman tim, dll.) saat membuat halaman. Berikut ini adalah contoh yang diambil dari catatan pengembang:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Fitur ini saat ini terbatas pada Jenis Posting Halaman hanya dan belum untuk "Jenis Postingan Postingan".

Grafik modal pola pembuatan halaman juga dapat dinonaktifkan sepenuhnya dengan menghapus jenis blok pasca-konten dari semua pola. Contoh kode contoh tersedia di sini.

Anda dapat mengikuti dan berpartisipasi dalam diskusi GitHub dari tautan yang tercantum di bawah bagian sumber daya di bawah ini.

Menggunakan direktori pola untuk membuat halaman

Pola dari direktori juga dapat digunakan untuk membuat posting atau tata letak halaman yang diinginkan, mirip dengan pembuat halaman. Itu GutenbergHub tim telah membuat aplikasi pembuat halaman online eksperimental menggunakan pola langsung dari direktori (video pengantar). Kemudian kode dari aplikasi dapat disalin dan ditempel di situs, yang sangat menyederhanakan proses pembuatan tata letak halaman yang kompleks tanpa pengkodean.

In video singkat ini, Jamie Marsland mendemonstrasikan (pada 1:30) bagaimana aplikasi dapat digunakan untuk membuat seluruh tata letak halaman yang mirip dengan pembuat halaman menggunakan bagian halaman direktori yang diinginkan.

Membungkus

Pola memungkinkan pengguna untuk membuat ulang tata letak konten yang biasa mereka gunakan (misalnya, halaman pahlawan, panggilan keluar, dll.) di halaman mana pun dan menurunkan hambatan untuk menyajikan konten dalam gaya, yang sebelumnya tidak mungkin dilakukan tanpa keterampilan pengkodean. Sama seperti plugin dan tema direktori, yang baru pola direktori menawarkan opsi kepada pengguna untuk menggunakan berbagai pola pilihan mereka dari direktori pola, dan menulis serta menampilkan konten dengan gaya.

Memang, pola blok akan mengubah segalanya dan pasti ini adalah game changer fitur dalam lanskap tema WordPress. Ketika potensi penuh dari bangunan dengan pola upaya tersedia, ini akan mengubah cara kami mendesain tema blok dan membuat konten yang indah bahkan dengan pengetahuan kode rendah. Bagi banyak desainer kreatif, direktori pola juga dapat menyediakan jalan yang tepat untuk menampilkan desain mereka kreativitas.

---

Sumber

Wordpress 6.0

• Panduan Lapangan WordPress 6.0 (WordPress Inti)
• Menjelajahi WordPress 6.0: Variasi Gaya, Blok Penguncian UI, Peningkatan Penulisan – Video 22 menit (Anne McCarthy)
• Fitur WordPress 6.0 dalam 4 menit (Dave Smith)
• Apa yang Baru di WordPress 6.0: Blok Baru, Pergantian Gaya, Pengeditan Template, API Webfonts, dan Banyak Lagi (Kinsta)

Membuat pola

• Pengantar pola blok (Pengeditan Situs Penuh)
• Pengantar video Pola Blok, 14 menit (Pelajari WordPress)
• Pola Blok (Buku Pegangan Blok Editor)
• Jadi Anda ingin membuat pola blok? (Blog WordPres)
• Cara membuat dan membagikan Pola Blok kode rendah di WordPress (Ayo ayah)

Peningkatan pola (GitHub)

• Membangun dengan Pola #38529
• Pola sebagai Elemen Pembagi #39281
• Tambahkan: Opsi untuk memilih pola pada pembuatan halaman. #40034
• Pola Blok untuk pembuatan halaman. #38787
• Tambahkan: Opsi awal halaman (templat dan pola) #39147

Artikel blog

• Pola Gutenberg: Masa Depan Pembuatan Halaman di WordPress (Tabor Kaya)
• Menggunakan Pola Blok untuk mempercepat pembuatan situs WordPress (Ayo ayah)
• Pola Blok Akan Mengubah Segalanya (Kedai WP)

---

Cara Membuat Pola Tema Blok di WordPress 6.0 awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/