ตกลงฉันได้เล่นกับสิ่งนี้มาสักหน่อยแล้วและสามารถเปลี่ยนผลลัพธ์ของบล็อกคลังภาพด้วยคำเตือนต่อไปนี้:
- ภาพตัวอย่างไม่ตรงกับผลลัพธ์ ฉันคิดว่ามันเป็นไปได้ แต่ดูเหมือนว่าจะมีส่วนเกี่ยวข้องมากกว่านี้
- คลาสและมาร์กอัพบางอย่างจำเป็นในผลลัพธ์สำหรับบล็อกเพื่อให้สามารถแยกวิเคราะห์เนื้อหาและทำให้สามารถแก้ไขได้ คลาสเหล่านี้มีสไตล์ฟร้อนต์เอนด์ที่จะต้องได้รับการจัดการ ฉันไม่แน่ใจในจุดนี้หากมีวิธีกรองตัวบล็อกนี้ หากเป็นไปได้อาจเป็นความคิดที่ดีถ้าหมายความว่าบล็อกของแกลเลอรี่จะเสียหายเมื่อธีมหรือปลั๊กอินถูกปิดการใช้งาน บล็อกใหม่ทั้งหมดอาจเป็นวิธีที่จะไปในสถานการณ์ที่จำเป็นต้องทำเช่นนี้
- ฉันไม่แน่ใจจริง ๆ ว่าขนาดภาพทำงานได้อย่างไรในขั้นตอนนี้
- วิธีการของ JavaScript hooks ที่ใช้อาจไม่เกี่ยวข้องในรุ่นสุดท้าย Gutenberg ใช้
@wordpress/hooksในขณะที่การอภิปรายเกี่ยวกับสิ่งที่ hooks ระบบเพื่อการใช้งานในหลักอย่างต่อเนื่อง
- เนื่องจากเอาต์พุตของบล็อกถูกบันทึกเป็น HTML ไม่ใช่รหัสย่อหรือเมตาจึงไม่สามารถแก้ไขเอาต์พุตของแกลเลอรีที่มีอยู่โดยไม่ต้องแก้ไข
สิ่งแรกที่เราต้องทำคือลงทะเบียนสคริปต์ นี้จะทำกับwp_enqueue_scripts()แต่ในenqueue_block_editor_assetsเบ็ด
สคริปต์ควรมีwp-blocksสคริปต์เป็นการอ้างอิง มันเกือบจะโหลดเรียบร้อยแล้วในตัวแก้ไข แต่ทำให้การอ้างอิงน่าจะมั่นใจได้ว่ามันถูกโหลดก่อนสคริปต์ของเรา
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 สำหรับบล็อกของเอาต์พุตได้รับการจัดการโดยsave()วิธีบล็อก คุณสามารถดูบล็อกของคลังภาพในไฟล์นี้
ในขั้นตอนนี้ (มีนาคม 2561) กูเทนแบร์กสนับสนุนตัวกรองเกี่ยวกับวิธีการบันทึกของบล็อก, blocks.getSaveElement. เราสามารถเพิ่มตะขอใน JavaScript ในลักษณะนี้:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
อาร์กิวเมนต์แรกคือชื่อของ hook อาร์กิวเมนต์ที่สองคือ - ฉันคิดว่าเป็น namespace และอาร์กิวเมนต์สุดท้ายคือฟังก์ชันเรียกกลับ
เนื่องจากเรากำลังเปลี่ยนsave()วิธีการของบล็อกเราจึงต้องคืนองค์ประกอบใหม่ อย่างไรก็ตามนี่ไม่ใช่องค์ประกอบ HTML ปกติที่เราต้องการส่งคืน เราจำเป็นต้องคืนองค์ประกอบการตอบโต้
เมื่อคุณดูsave()วิธีของบล็อกดั้งเดิมสิ่งที่คุณเห็นคือ JSX React ซึ่ง Gutenberg ใช้ภายใต้ประทุนรองรับการเรนเดอร์อิลิเมนต์ ดูบทความนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนั้น
ปกติแล้ว JSX ต้องการขั้นตอนการสร้าง แต่เนื่องจากฉันไม่ได้แนะนำขั้นตอนการสร้างสำหรับตัวอย่างนี้เราจึงต้องมีวิธีการสร้างองค์ประกอบที่ไม่มี JSX React createElement()ให้นี้กับ WordPress ให้ห่อนี้และอื่น ๆ wp.elementที่ตอบสนองการทำงานในรูปแบบของ ดังนั้นเพื่อให้การใช้งานที่เราใช้createElement()wp.element.createElement()
ในฟังก์ชั่นการโทรกลับเพื่อblocks.getSaveElementรับ:
element องค์ประกอบดั้งเดิมที่สร้างโดยบล็อกblockType วัตถุที่แสดงถึงบล็อกที่ใช้attributesคุณสมบัติของอินสแตนซ์บล็อก ในตัวอย่างของเรานี้รวมถึงภาพในแกลเลอรี่และการตั้งค่าเช่นจำนวนคอลัมน์
ดังนั้นฟังก์ชันการเรียกกลับของเราจำเป็นต้อง:
- ส่งคืนองค์ประกอบดั้งเดิมสำหรับแกลเลอรี่ที่ไม่ใช่บล็อก
- ใช้แอตทริบิวต์โดยเฉพาะรูปภาพและสร้างองค์ประกอบ React ใหม่จากองค์ประกอบที่เป็นแกลเลอรี
นี่คือตัวอย่างที่สมบูรณ์ที่เพียงแค่ส่งออกulด้วยคลาสmy-galleryและlis สำหรับแต่ละภาพที่มีระดับmy-gallery-itemและและimgในแต่ละคนมีการsrcตั้งค่าเป็น URL ภาพ
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
}
บางสิ่งที่ควรทราบ:
- บล็อกแกลเลอรีดั้งเดิมค้นหารูปภาพโดยค้นหา
ul.wp-block-gallery .blocks-gallery-itemดังนั้นมาร์กอัปนี้และคลาสเหล่านั้นจำเป็นต้องมีเพื่อให้สามารถแก้ไขบล็อกได้ มาร์กอัปนี้ยังใช้สำหรับการกำหนดค่าเริ่มต้น
attributes.images.mapกำลังวนลูปมากกว่าแต่ละอิมเมจและคืนอาเรย์ขององค์ประกอบย่อยเป็นเนื้อหาสำหรับองค์ประกอบหลัก ภายในองค์ประกอบเหล่านี้มีองค์ประกอบย่อยสำหรับรูปภาพเอง