Bagaimana cara memperpanjang blok galeri di Gutenberg?

Saya bermain dengan Gutenberg sebelum dimasukkan ke dalam inti, dan saya ingin tahu cara memperpanjang blok galeri yang ada untuk mengubah tampilan. Sebagai contoh, alih-alih kisi thumbnail saya ingin menampilkan rangkai salindia. Apa itu mungkin? Jika ya, bagaimana caranya? Bantuan apa pun akan dihargai.

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.

Di sini untuk memberikan jawaban yang diperbarui. Saya menemukan posting ini sangat membantu dalam menjawab pertanyaan tentang cara memperpanjang Blok Galeri.

Singkatnya, disarankan untuk hanya membuat blok baru daripada memperpanjang yang sudah ada. Dari pos di tautan saya di atas:

jika Anda memodifikasi HTML suatu blok [dengan memperluas], itu tidak akan dikenali sebagai blok asli. Alih-alih mencoba memanipulasi blok inti, sepertinya membatalkan registrasi blok inti dan mendaftarkan blok pengganti baru akan menjadi pendekatan yang lebih aman - dengan cara itu Anda memastikan pengguna situs menggunakan galeri khusus Anda yang disesuaikan, yang akan divalidasi karena itu mendefinisikan struktur HTML sendiri.

Tautan di atas juga merujuk plugin Create-Guten_Block yang merupakan alat baris perintah yang akan menghasilkan semua yang Anda butuhkan untuk memulai dengan pembuatan Blok. Alat ini sangat mudah digunakan, dan setup mudah.

Dengan sumber daya ini, saya dapat menemukan cara mengembangkan blok galeri khusus dalam waktu singkat