如今，关于客户端渲染与服务器端渲染以及在 gutenberg自定义块中，我们可以面临这个困境。
Gutenberg编辑器旨在使用其组件的React主要在客户端工作。但是，可以在自定义Gutenberg块的上下文中区分客户端和服务器端组件
通常，这些块是在PHP和JavaScript文件中使用registerBlockType制成的。 JavaScript函数除名称，类别，标题和其他参数外，还接受两个函数：edit和save。这两个功能提供了如何在编辑器内部渲染块，如何操作和操纵以及如何保存它们的接口。
客户端组件
这些组件负责编辑器内部或网站前端发生的视觉表示和用户交互。这些组件主要使用JavaScript（React）和CSS编写。
当您想处理用户互动并提供动态编辑体验时，这种方法是理想的选择。它提供了立即的反馈，并且当块的内容依赖于编辑器中的用户交互时，特别有用。
服务器端组件
当页面发送到客户端之前，这些页面在服务器上加载时，这些处理块内容的渲染。在显示最终内容之前，这些组件可能负责动态生成块内容或处理某些服务器端逻辑。
当您需要从数据库中处理动态数据或执行无法或不应该在客户端端执行的操作时，服务器端渲染是要走的方法。当您想保持块输出的一致性，无论客户端设备的JavaScript功能如何。
一个实用的例子
让我们创建相同的块，一个带有 wysiwyg 段落的简单标题。
都共享相同的注册和相同的edit函数。在插件中以主题或更高的方式创建一个titleWithParagraphBlock.js文件，并添加下面的代码：
import { registerBlockType } from '@wordpress/blocks';
import { RichText, PlainText } from '@wordpress/block-editor';
registerBlockType('plugin-name/title-paragraph', {
title: 'Title with Paragraph',
icon: 'admin-post',
category: 'common',
edit: ({ attributes, setAttributes }) => {
const { title, content } = attributes;
return (
<div>
<h1>
<PlainText
value={title}
onChange={(newTitle) => setAttributes({ title: newTitle })}
placeholder="Enter title..."
/>
</h1>
<RichText
value={content}
onChange={(newContent) => setAttributes({ content: newContent })}
placeholder="Enter paragraph..."
/>
</div>
);
},
[...]
保存的两种方式
这个简单的块可以很容易地在save函数中进行编码。
save: ({ attributes }) => {
const { title, content } = attributes;
return (
<div> <h2>{title}</h2> <RichText.Content value={content} /> </div>
);
},
，但也许WordPress开发人员对 php 更熟悉。因此，让我们弄清楚如何使用PHP文件渲染此块：
创建titlewithparagraphblock.php
<?php
function render_title_with_paragraph_block($attributes) {
$title = $attributes['title'];
$content = $attributes['content'];
return '<div><h2>' . esc_html($title) . '</h2><p>' . wp_kses_post($content) . '</p></div>';
}
现在是时候在同一PHP文件中注册块
register_block_type('plugin-name/title-paragraph', array(
'render_callback' => 'render_title_with_paragraph_block',
'attributes' => array(
'title' => array(
'type' => 'string',
'default' => 'Default Title', // Set a default value if needed
),
'content' => array(
'type' => 'string',
'default' => '', // Set a default value if needed
),
),
));
结论
构建自定义Gutenberg块使我们可以扩展WordPress编辑器以满足我们的特定需求。我们选择使用客户端还是服务器端方法，在很大程度上取决于我们使用JavaScript（React）与PHP的舒适度以及块的特定要求。
快乐编码！