Tamam, bununla biraz oynuyorum ve aşağıdaki uyarılarla Galeri bloğunun çıktısını değiştirmeyi başardım:
- Önizleme çıktıyla eşleşmiyor. Bunun mümkün olduğunu düşünüyorum ama biraz daha ilgili gibi görünüyor.
- Çıktıda, bloğun içeriği ayrıştırabilmesi ve düzenlenebilir tutabilmesi için belirli sınıflar ve işaretlemeler gerekir. Bu sınıfların ele alınması gereken ön uç stilleri vardır. Bu noktada bloğun bunu nasıl yaptığını filtrelemenin bir yolu olup olmadığından emin değilim. Mümkünse, bir tema veya eklenti devre dışı bırakıldığında Galeri bloklarının bozulduğu anlamına gelmek iyi bir fikir olmayabilir. Tamamen yeni bir blok, bunun gerekli olacağı durumlar için muhtemelen bir yol olacaktır.
- Görüntü boyutlarının bu aşamada nasıl çalıştığından emin değilim.
- Kullanılan JavaScript kancaları yöntemi son sürümde geçerli olmayabilir. Gutenberg kullanan
@wordpress/hooksÇekirdek kullanmak sistemini kanca neler ilgili tartışma sırasında devam etmektedir .
- Blokların çıktısı bir kısa kod veya meta olarak değil HTML olarak kaydedildiğinden, mevcut Galerilerin çıktısını düzenlemeden değiştirmek mümkün olmayacaktır.
Yapmamız gereken ilk şey bir senaryo kaydetmek. Bu wp_enqueue_scripts(), ancak enqueue_block_editor_assetskancada yapılır.
Betiğin wp-blocksbetiği bağımlı olarak içermesi gerekir . Neredeyse kesinlikle editörde yüklüdür, ancak bağımlılık yapması muhtemelen betiğimizden önce yüklenmesini sağlar.
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' );
Bir bloğun çıktısı için HTML, bloğun save()yöntemi tarafından işlenir . Galeri bloğunu bu dosyada görebilirsiniz .
Bu aşamada (Mart 2018) Gutenberg, blokları kaydetme yöntemi üzerinde bir filtreyi desteklemektedir blocks.getSaveElement. JavaScript'e bunun gibi bir kanca ekleyebiliriz:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
İlk argüman kanca adı, 2. argüman - sanırım - bir ad alanı ve son argüman geri arama işlevidir.
save()Bloğun yöntemini değiştirdiğimizden, yeni bir öğe döndürmemiz gerekiyor. Ancak, bu, döndürmemiz gereken normal bir HTML öğesi değildir. Bir React öğesini iade etmeliyiz .
Orijinal bloğun save()yöntemine baktığınızda gördüğünüz JSX. Gutenberg'in kaputun altında kullandığı tepki, onu oluşturma öğeleri için destekliyor. Bununla ilgili daha fazla bilgi için bu makaleye bakın .
JSX normalde bir derleme adımı gerektirir, ancak bu örnek için bir derleme adımı eklemediğim için JSX'siz bir öğe oluşturmak için bir yola ihtiyacımız var. React bunu sağlar createElement(). WordPress, bu ve diğer reaksiyon işlevleri için bir sarıcı sağlar wp.element. Kullanmak için createElement()kullanıyoruz wp.element.createElement().
Geri arama işlevinde blocks.getSaveElementşunları elde ederiz:
element Blok tarafından oluşturulan orijinal Öğe.blockType Kullanılan bloğu temsil eden bir nesne.attributesBlok örneğinin özellikleri. Örneğimizde, galerideki görüntüleri ve sütun sayısı gibi ayarları içerir.
Bu nedenle, geri arama işlevimizin şunları yapması gerekir:
- Blok olmayan galeriler için orijinal öğeyi döndürür.
- Öznitelikleri, özellikle görüntüleri alın ve bunlardan galeriyi temsil eden yeni bir React öğesi oluşturun.
Burada sadece bir çıkışı tam bir örnektir ul, bir sınıfla my-galleryve lisınıf ile her resim için s my-gallery-itemve ve imgher birinde srcgörüntü URL'ye seti.
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
}
Dikkat edilmesi gereken bazı noktalar:
- Orijinal galeri bloğu görüntüleri arayarak bulur
ul.wp-block-gallery .blocks-gallery-item, bu nedenle bloğun düzenlenebilmesi için bu işaretleme ve bu sınıflar gereklidir. Bu işaretleme varsayılan stil için de kullanılır.
attributes.images.mapher görüntünün üzerine dönüyor ve ana öğenin içeriği olarak bir alt öğe dizisi döndürüyor. Bu öğelerin içinde görüntünün kendisi için başka bir alt öğe vardır.