WordPress Gutenberg Block Server Side Render

ServerSideRender là một component được sử dụng để phía máy chủ hiển thị bản xem trước của các Gutenberg Block trong trình chỉnh sửa. Kết xuất phía máy chủ trong chức năng chỉnh sửa của một khối nên được giới hạn ở các khối phụ thuộc nhiều vào logic kết xuất PHP hiện tại có liên quan nhiều đến dữ liệu, đặc biệt là khi không có sẵn điểm cuối.

Ưu điểm khi sử dụng Block Server Side Render là bạn chỉ cần viết code PHP ở phía server, tránh được việc viết code tương tự nhau ở edit và save function.

Ví dụ để mọi người dễ hiểu hơn:

• Đây là code khi viết block không sử dụng Server Side render

Như ta thấy thì code ở Edit và Save khá giống nhau, chúng ta có thể chuyển thành server side render và chỉ cần viết code ở phía server là xong.

Hoặc như các block query post, page các thứ, các câu query phức tạp thì chúng ta cũng nên sử dụng Block Server Side Render.

const Edit = (props) => {
	const {attributes, setAttributes, className} = props;
	return (
		<Fragment>
			<div>
				<div className="image"><img src={attributes.img} alt="" /></div>
				<h3>{attributes.heading}</h3>
				<div className='description'>{attributes.description}</div>
			</div>
		</Fragment>
	);
}
const Save = props => {
	const {attributes, setAttributes, className} = props;
	return (
		<div>
			<div className="image"><img src={attributes.img} alt="" /></div>
			<h3>{attributes.heading}</h3>
			<div className='description'>{attributes.description}</div>
		</div>
	);
}
registerBlockType('cgb/block-demo', {
	title: __('Demo - CGB Block'),
	//...
	edit: Edit,
	save: Save,
});

• Chúng ta chuyển block trên thành block server side render như sau.

Đầu tiên là cài đặt và import gói @wordpress/server-side-render

import ServerSideRender from '@wordpress/server-side-render';

hoặc có thể sử dụng từ biến wp global:

const {serverSideRender: ServerSideRender} = wp;

chúng ta sử dụng component ServerSideRender trong edit và save thì return null.

demo-block/index.js:

const Edit = (props) => {
	const {attributes, setAttributes, className} = props;
	return (
		<Fragment>
			<ServerSideRender
				className="block-server-render"
				block="cgb/block-demo"
				attributes={attributes} />
		</Fragment>
	);
}

registerBlockType('cgb/block-demo', {
	title: __('Demo - CGB Block'),
	//...
	edit: Edit,
	save: props => null,
});

code php:

function my_block_cgb_block_assets() {
//...
	register_block_type( 'cgb/block-demo', array(
		'style'         => 'my_block-cgb-style-css',
		'editor_script' => 'my_block-cgb-block-js',
		'editor_style'  => 'my_block-cgb-block-editor-css',

		'render_callback' => 'my_block_server_render_template',
		'attributes'      => array(
			'img' => array(
				'type'    => 'string',
				'default' => ''
			),
			'heading'   => array(
				'type' => 'string',
			),
			'description'   => array(
				'type' => 'string',
			),
			'className' => array(
				'type' => 'string',
			),
			'anchor' => array(
				'type' => 'string',
			)
		),
	) );
}

// Hook: Block assets.
add_action( 'init', 'my_block_cgb_block_assets' );

function my_block_server_render_template( $atts, $content ) {
	ob_start();
	var_dump( $atts, $content );

	return ob_get_clean();
}

Cần lưu ý là trong js bạn truyền lên những attributes nào attributes={attributes} thì trong php bạn cũng cần khai báo lại những attributes đó, nếu không thì nó sẽ báo lỗi và không render được.

Một số Props của component ServerSideRender

• attributes: Một đối tượng chứa các thuộc tính của khối sẽ được hiển thị phía máy chủ.
• block(Required): Định danh của khối sẽ được hiển thị phía máy chủ.
• className: Một class được thêm vào phần tử DOM bao bọc khối kết xuất phía máy chủ
• httpMethod: Phương thức yêu cầu HTTP để sử dụng, ‘GET’ hoặc ‘POST’. Mặc định đó là “GET”. Giá trị ‘POST’ sẽ gây ra lỗi trên WP 5.5 về trước, trừ khi ‘rest_endpoints’ được lọc trong PHP để cho phép điều này.
• urlQueryArgs: Đối số truy vấn để áp dụng cho URL yêu cầu.

Ngoài ra còn có EmptyResponsePlaceholder, ErrorResponsePlaceholder, LoadingResponsePlaceholder.

Các bạn có thể tìm hiểu thêm về blocks ServerSideRender tại đây: https://github.com/WordPress/gutenberg/tree/trunk/packages/server-side-render