Khối tùy chỉnh WordPress

Gutenberg, trình soạn thảo WordPress mới, là tương lai của WordPress. Ngay lập tức, nó sẽ mang lại trải nghiệm chỉnh sửa toàn trang cho người dùng. Điều đó nói rằng, học cách tạo một khối tùy chỉnh cho WordPress Gutenberg là một khoản đầu tư tuyệt vời. Ngày nay, ngày càng có nhiều chủ đề (chẳng hạn như chủ đề Twenty Twenty) đang tận dụng những gì Gutenberg cung cấp

Bài đăng này sẽ giới thiệu chung về các khối Gutenberg và sau đó sẽ giải thích cách tạo một khối tùy chỉnh cho WordPress Gutenberg

Khối Gutenberg là gì?

Các khối là chức năng xây dựng cốt lõi của trình chỉnh sửa mới. Ý tưởng là bạn có thể thêm các khối ở bất cứ đâu bạn muốn. Các khối được tạo chủ yếu bằng JavaScript (tin buồn cho những người yêu thích PHP)

Học một vài khái niệm là cần thiết trước khi đi sâu vào viết mã

chặn đăng ký

Điều đầu tiên trước tiên – chúng ta cần đăng ký một khối. Để đăng ký, chúng ta cần sử dụng chức năng registerBlockType

// Registering my block with a unique name
registerBlockType( 'mcb/call-to-action', {} );

Chỉnh sửa và Lưu

Sau khi đăng ký một khối, bước tiếp theo là cho trình chỉnh sửa biết cách hiển thị khối trong trình chỉnh sửa và cách lưu khối đó vào cơ sở dữ liệu

Hiểu đúng về các chức năng chỉnh sửa và lưu là điều cần thiết để tạo một khối tùy chỉnh cho WordPress Gutenberg
Chức năng chỉnh sửa chịu trách nhiệm làm cho khối có thể chỉnh sửa được trong trình chỉnh sửa và chức năng lưu chịu trách nhiệm lưu khối trong cơ sở dữ liệu để hiển thị nó ở giao diện người dùng

// A static div
edit: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

save: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

Thuộc tính

Hầu như tất cả các khối cần phải có thuộc tính. Ví dụ, hãy nghĩ về chúng như một cách để nói chuyện với khối để thay đổi màu sắc, văn bản hoặc khoảng cách

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

Bạn có phải là người yêu thích PHP?

Nếu vậy, rất tiếc phải nói với bạn rằng Gutenburg là một React. trình soạn thảo dựa trên js. Các khung JavaScript đã có một bước nhảy vọt về mức độ phổ biến đối với các nhà phát triển. Ngày nay, JavaScript là một kỹ năng thiết yếu cần có trong tay bạn

Tận dụng mọi cơ hội để thực sự tăng cường sức mạnh JavaScript của bạn
– Matt Mullenweg, Người tạo ra WordPress

Các khối tích hợp có sẵn

Sau đây là danh sách các khối Gutenberg tích hợp trong WordPress. Nếu bạn cần thêm khối, bạn có thể đọc bài viết này về khối miễn phí

khối chung

Điều này bao gồm các khối Đoạn văn, Hình ảnh, Tiêu đề, Thư viện, Danh sách, Trích dẫn, Âm thanh, Bìa, Tệp, Video

định dạng

Điều này bao gồm Code, Classic, HTML tùy chỉnh, Preformated, Pullquote, Table, Verse blocks

yếu tố bố cục

Điều này bao gồm các Nút, Cột, Nhóm, Phương tiện & Văn bản, Khác, Ngắt trang, Dấu phân cách, Khối đệm

tiện ích

Điều này bao gồm Mã ngắn, Lưu trữ, Lịch, Danh mục, Nhận xét mới nhất, Bài đăng mới nhất, RSS, Tìm kiếm, Khối đám mây thẻ

Nhúng

Điều này bao gồm Nhúng, Twitter, YouTube và hơn 29 khối

Cách tạo khối tùy chỉnh cho WordPress Gutenberg

Đủ rồi - hãy bắt tay vào viết mã. Có nhiều kỹ thuật khác nhau để tạo khối tùy chỉnh cho WordPress Gutenberg. Với mục đích của bài viết này, hãy sử dụng một trong những kỹ thuật đơn giản nhất để xây dựng khối Lời kêu gọi hành động phù hợp

Ghi chú. Điều đáng nói là nhiều giải thích chi tiết đã được cố tình lược bỏ để giúp bạn dễ dàng theo dõi diễn biến của bài viết. Mục đích là giúp bạn tạo khối đầu tiên của mình mà không bị đè nặng bởi những chi tiết vụn vặt khi tạo khối

1. Chuẩn bị một plugin cơ sở

Trước khi làm bất cứ điều gì khác, chúng tôi cần một plugin để đặt mã của chúng tôi. Tùy thuộc vào sở thích của bạn, bạn có thể sử dụng chủ đề con thay vì plugin
1. Chuyển đến thư mục plugin trên trang web của bạn, sau đó tạo thư mục khối tùy chỉnh của tôi

2. Tạo một plugin. php tập tin như hình dưới đây

3. Kích hoạt plugin từ quản trị viên WordPress

2. Tập lệnh và kiểu khối Enqueue

Sử dụng hàm register_block_type, chúng ta có thể liệt kê tập lệnh của khối và tạo kiểu cho nó bằng Guttenberg

1. Thêm chức năng sau vào plugin. php để liệt kê kiểu dáng và tập lệnh

function mcb_register_blocks() {

	// Check if Gutenberg is active.
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}

	// Add block script.
	wp_register_script(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-editor' ],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.js' )
	);

	// Add block style.
	wp_register_style(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.css' )
	);

	// Register block script and style.
	register_block_type( 'mcb/call-to-action', [
		'style' => 'call-to-action', // Loads both on editor and frontend.
		'editor_script' => 'call-to-action', // Loads only on editor.
	] );
}

add_action( 'init', 'mcb_register_blocks' );

2. Tạo các tệp sau trong thư mục plugin để giữ kiểu và tập lệnh

blocks/call-to-action/call-to-action.css
blocks/call-to-action/call-to-action.js

3. đăng ký khối

Sau khi chuẩn bị cơ sở, bây giờ là lúc để tạo khối thực

1. Trong lời kêu gọi hành động. js, hãy thêm chức năng sau để đăng ký một khối trống

( function( blocks, editor, element ) {
	var el = element.createElement;

	blocks.registerBlockType( 'mcb/call-to-action', {
		title: 'MCB: Call to Action', // The title of block in editor.
		icon: 'admin-comments', // The icon of block in editor.
		category: 'common', // The category of block in editor.
		attributes: {},
		edit: function( props ) {
			return null;
		},
		save: function( props ) {
			return null;
		},
	} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );

2. Đối với khối này, chúng tôi cần cả thuộc tính nội dung và nút. Thêm chúng như hình bên dưới

attributes: {
	content: {
		type: 'string',
		default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
	},
	button: {
		type: 'string',
		default: 'Join Today'
	}
},

3. Trong chức năng chỉnh sửa, chúng tôi sẽ sử dụng thành phần RichText để tạo div để giữ nội dung và khoảng cách để giữ nút. Về cơ bản, thành phần này cho phép tạo một vùng văn bản có thể chỉnh sửa

Hàm onChange chịu trách nhiệm cập nhật các thuộc tính khi bạn thay đổi nội dung khối

edit: function( props ) {
	return (
		el( 'div', { className: props.className },
			el(
				editor.RichText,
				{
					tagName: 'div',
					className: 'mcb-call-to-action-content',
					value: props.attributes.content,
					onChange: function( content ) {
						props.setAttributes( { content: content } );
					}
				}
			),
			el(
				editor.RichText,
				{
					tagName: 'span',
					className: 'mcb-call-to-action-button',
					value: props.attributes.button,
					onChange: function( content ) {
						props.setAttributes( { button: content } );
					}
				}
			),
		)
	);
},

4. Trong chức năng chỉnh sửa, chúng tôi sẽ sử dụng thành phần RichText để tạo nội dung và nút HTML để tạo nút

4. Trong lời kêu gọi hành động. css, hãy thêm các mã sau để thêm một số kiểu dáng trực quan vào khối

.wp-block-mcb-call-to-action {
	background: #3f39ff;
	padding: 45px;
	text-align: center;
	border-radius: 10px;
}

.mcb-call-to-action-content {
	font-family: serif;
	font-size: 24px;
	color: #fff;
	padding-bottom: 30px;
	margin-bottom: 0;
}

.mcb-call-to-action-button {
	background: #000;
	border: 0px;
	border-radius: 5px;
	padding: 12px 35px;
	color: #fff;
	font-family: sans-serif;
}

5. Bây giờ, bạn sẽ có thể chơi với khối trong trình chỉnh sửa

kết thúc

Bài đăng này cung cấp phần giới thiệu cơ bản về Gutenburg là gì và cách chúng tôi có thể tạo một khối tùy chỉnh cho WordPress Gutenberg. Nói cách khác, hãy nghĩ về bài viết này như bước đầu tiên để bước vào thế giới Gutenberg

Chúng tôi khuyên bạn nên đọc sổ tay chính thức của WordPress để hiểu sâu hơn về trình soạn thảo Gutenberg

Khối tùy chỉnh trong WordPress là gì?

Khối tùy chỉnh là gì?