Ok, saya sudah bermain dengan ini sedikit dan telah berhasil mengubah output dari blok Galeri, dengan peringatan berikut:
- Pratinjau tidak cocok dengan output. Saya pikir ini mungkin tetapi tampaknya sedikit lebih terlibat.
- Kelas dan markup tertentu diperlukan dalam output untuk blok agar dapat menguraikan konten dan tetap dapat diedit. Kelas-kelas ini memiliki gaya front-end yang perlu ditangani. Saya tidak yakin pada titik ini jika ada cara untuk memfilter bagaimana blok melakukan ini. Jika mungkin, itu mungkin bahkan bukan ide yang baik jika itu berarti blok Galeri rusak ketika tema atau plugin dinonaktifkan. Blok yang benar-benar baru mungkin akan menjadi cara untuk pergi ke situasi di mana ini akan diperlukan.
- Saya tidak begitu yakin bagaimana ukuran gambar bekerja pada tahap ini.
- Metode kait JavaScript yang digunakan mungkin tidak relevan dalam rilis final. Gutenberg menggunakan
@wordpress/hookssementara diskusi tentang apa sistem kait untuk digunakan dalam Core sedang berlangsung .
- Karena output dari Blok disimpan sebagai HTML, bukan kode pendek atau meta, itu tidak akan mungkin untuk memodifikasi output Galeri yang ada tanpa mengeditnya.
Hal pertama yang perlu kita lakukan adalah mendaftarkan skrip. Ini dilakukan dengan wp_enqueue_scripts(), tetapi di enqueue_block_editor_assetshook.
Skrip harus memiliki wp-blocksskrip sebagai ketergantungan. Ini hampir pasti sudah dimuat di editor, tetapi membuatnya menjadi dependensi yang memastikannya dimuat sebelum script kami.
function wpse_298225_enqueue_block_assets() {
wp_enqueue_script(
'wpse-298225-gallery-block',
get_theme_file_uri( 'block.js' ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );
HTML untuk output blok ditangani oleh save()metode blok. Anda dapat melihat blok Galeri di file ini .
Pada tahap ini (Maret 2018) Gutenberg mendukung filter pada metode penyimpanan blok blocks.getSaveElement,. Kami dapat menambahkan kait ke ini dalam JavaScript seperti ini:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
Argumen pertama adalah nama hook, argumen ke-2 adalah - saya pikir - namespace, dan argumen terakhir adalah fungsi callback.
Karena kita mengganti save()metode blok, kita perlu mengembalikan elemen baru. Namun, ini bukan elemen HTML normal yang harus kita kembalikan. Kita perlu mengembalikan elemen Bereaksi .
Ketika Anda melihat save()metode blok asli apa yang Anda lihat adalah JSX. React, yang Gutenberg gunakan di bawah kap, mendukungnya untuk merender elemen. Lihat artikel ini untuk lebih lanjut tentang itu.
JSX biasanya membutuhkan langkah build, tapi karena saya tidak memperkenalkan langkah build untuk contoh ini, kita perlu cara untuk membuat elemen tanpa JSX. Bereaksi menyediakan ini dengan createElement(). WordPress menyediakan pembungkus untuk ini dan fungsionalitas reaksi lainnya dalam bentuk wp.element. Jadi untuk menggunakan createElement()kita gunakan wp.element.createElement().
Dalam fungsi panggilan balik untuk blocks.getSaveElementkita dapatkan:
element Elemen asli dibuat oleh blok.blockType Objek yang mewakili blok yang digunakan.attributesProperti instance blok. Dalam contoh kami ini termasuk gambar di galeri dan pengaturan seperti jumlah kolom.
Jadi fungsi panggilan balik kami perlu:
- Kembalikan elemen asli untuk galeri non-blok.
- Ambil atribut, terutama gambar, dan buat elemen Bereaksi baru dari mereka yang mewakili galeri.
Berikut adalah contoh lengkap yang hanya menghasilkan a uldengan kelas,, my-gallerydan lis untuk setiap gambar dengan kelas my-gallery-itemdan dan imgdi masing-masing dengan srcset ke URL gambar.
function wpse298225GallerySaveElement( element, blockType, attributes ) {
if ( blockType.name !== 'core/gallery' ) {
return element;
}
var newElement = wp.element.createElement(
'ul',
{
'className': 'wp-block-gallery my-gallery',
},
attributes.images.map(
function( image ) {
return wp.element.createElement(
'li',
{
'className': 'blocks-gallery-item my-gallery-item',
},
wp.element.createElement(
'img',
{
'src': image.url,
}
)
)
}
)
)
return newElement
}
Beberapa hal yang perlu diperhatikan:
- Blok galeri asli menemukan gambar dengan mencari
ul.wp-block-gallery .blocks-gallery-item, jadi markup ini dan kelas-kelas tersebut diperlukan untuk mengedit blok menjadi mungkin. Markup ini juga digunakan untuk gaya default.
attributes.images.mapsedang mengulang setiap gambar dan mengembalikan array elemen anak sebagai konten untuk elemen utama. Di dalam elemen-elemen ini ada elemen anak lain untuk gambar itu sendiri.