Ok, tôi đã chơi với nó một chút và đã quản lý để thay đổi đầu ra của khối Thư viện, với các cảnh báo sau:
- Bản xem trước không khớp với đầu ra. Tôi nghĩ điều này là có thể nhưng dường như có liên quan nhiều hơn một chút.
- Một số lớp và đánh dấu nhất định được yêu cầu trong đầu ra cho khối để có thể phân tích nội dung và giữ cho nó có thể chỉnh sửa. Các lớp này có phong cách front-end sẽ cần phải được xử lý. Tôi không chắc chắn vào thời điểm này nếu có một cách để lọc cách khối thực hiện việc này. Nếu có thể, nó thậm chí có thể không phải là một ý tưởng hay nếu điều đó có nghĩa là các khối Thư viện bị hỏng khi một chủ đề hoặc plugin bị vô hiệu hóa. Một khối hoàn toàn mới có lẽ sẽ là cách để giải quyết các tình huống cần phải có.
- Tôi không thực sự chắc chắn làm thế nào kích thước hình ảnh hoạt động trong giai đoạn này.
- Phương thức móc JavaScript được sử dụng có thể không liên quan trong bản phát hành cuối cùng. Gutenberg sử dụng
@wordpress/hookstrong khi thảo luận về hệ thống hook nào sẽ sử dụng trong Core đang diễn ra .
- Vì đầu ra của Khối được lưu dưới dạng HTML, không phải là mã ngắn hoặc meta, nên sẽ không thể sửa đổi đầu ra của Phòng trưng bày hiện tại mà không cần chỉnh sửa chúng.
Điều đầu tiên chúng ta cần làm là đăng ký một kịch bản. Điều này được thực hiện với wp_enqueue_scripts(), nhưng trên enqueue_block_editor_assetsmóc.
Kịch bản nên có wp-blockskịch bản như một phụ thuộc. Nó gần như chắc chắn đã được tải trong trình chỉnh sửa, nhưng làm cho nó trở thành một phụ thuộc có lẽ đảm bảo nó được tải trước tập lệnh của chúng tôi.
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 cho đầu ra của một khối được xử lý theo save()phương pháp của khối. Bạn có thể thấy khối Thư viện trong tệp này .
Ở giai đoạn này (tháng 3 năm 2018) Gutenberg hỗ trợ bộ lọc về phương thức lưu khối , blocks.getSaveElement. Chúng ta có thể thêm một cái móc vào cái này trong JavaScript như thế này:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
Đối số đầu tiên là tên hook, đối số thứ 2 là - tôi nghĩ - một không gian tên và đối số cuối cùng là hàm gọi lại.
Vì chúng ta đang thay thế save()phương thức của khối, chúng ta cần trả về một phần tử mới. Tuy nhiên, đây không phải là một yếu tố HTML bình thường mà chúng ta cần trả lại. Chúng ta cần trả về một phần tử React .
Khi bạn nhìn vào save()phương thức của khối ban đầu, cái bạn thấy là JSX. React, mà Gutenberg sử dụng dưới mui xe, hỗ trợ nó để kết xuất các yếu tố. Xem bài viết này để biết thêm về điều đó.
Thông thường, JSX yêu cầu một bước xây dựng, nhưng vì tôi không giới thiệu bước xây dựng cho ví dụ này, nên chúng ta cần một cách để tạo một phần tử mà không cần JSX. React cung cấp điều này với createElement(). WordPress cung cấp một trình bao bọc cho điều này và chức năng phản ứng khác ở dạng wp.element. Vì vậy, để sử dụng createElement()chúng tôi sử dụng wp.element.createElement().
Trong hàm gọi lại cho blocks.getSaveElementchúng tôi nhận được:
element Phần tử gốc được tạo bởi khối.blockType Một đối tượng đại diện cho khối đang được sử dụng.attributesCác thuộc tính của thể hiện khối. Trong ví dụ của chúng tôi, điều này bao gồm các hình ảnh trong bộ sưu tập và các cài đặt như số lượng cột.
Vì vậy, chức năng gọi lại của chúng tôi cần phải:
- Trả về phần tử ban đầu cho các phòng trưng bày không có khối.
- Lấy các thuộc tính, đặc biệt là các hình ảnh và tạo một phần tử React mới trong số chúng đại diện cho bộ sưu tập.
Dưới đây là một ví dụ hoàn chỉnh chỉ đơn giản là xuất ra một ullớp my-galleryvà lis cho mỗi hình ảnh với lớp my-gallery-itemvà imgtrong mỗi srchình ảnh được đặt thành URL hình ảnh.
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
}
Một số điều cần lưu ý:
- Khối thư viện ban đầu tìm thấy hình ảnh bằng cách tìm kiếm
ul.wp-block-gallery .blocks-gallery-item, vì vậy đánh dấu này và các lớp đó là bắt buộc để chỉnh sửa khối là có thể. Đánh dấu này cũng được sử dụng cho kiểu dáng mặc định.
attributes.images.mapđang lặp trên mỗi hình ảnh và trả về một mảng các phần tử con làm nội dung cho phần tử chính. Bên trong các yếu tố này có một yếu tố con khác cho chính hình ảnh.