当前位置：首页 > news >正文

【Word Press基础】创建一个动态的自定义区块

news 2025/7/25 21:01:41

书接上文：【Word Press基础】创建一个自定义区块，上篇博客创建了一个自定义区块。但这个区块的展示效果都没有处理，肯定没有办法实现项目的需求。因此这篇文章将带领大家实现一个动态的自定义区块。

一、修改编辑器中展示的内容

打开src/ht-note/edit.js，这个复杂(~~并非复杂~~)的文件就是编辑器中展示的内容了。我们可以在文章/页面的编辑器中创建一个我们的自定义区块，创建完成后记得保存一下草稿：

请添加图片描述

这就是默认的效果了。一个静态的文字。我们的目标就是先写一个静态的投票区块。我们的区块应当包括：

一个富文本编辑器。管理员可以编写内容
一个投票按钮。用户能够进行投票
适当的动画、样式

1、创建一个被word press管理的盒子

如果打开一个word press的网站，可以看到每个段落都有默认的样式、行为。我们的插件当然也不应该例外。{ ...useBlockProps() }方法就能简单的创建一个能被word press管理的盒子。

打开edit.js并修改Edit()方法：

export default function Edit() {return (<><div { ...useBlockProps() }><p>自定义的区块</p><div>自定义的按钮</div></div></>);
}

保存并刷新界面。

请添加图片描述

修改成功。

2、添加富文本编辑器

简易的富文本编辑器能够使用<RichText>控件直接引用。包括了文本样式、上下角标、图文混排等。

使用Rich Text

富文本编辑器可以自定义的设置一些内容。详细可以看官方文档。这里先规定了占位符。

修改edit()方法，注意引用Rich Text依赖：

export default function Edit() {return (<><div { ...useBlockProps() }><RichText placeholder='输入你的内容...'></RichText><div>自定义的按钮</div></div></>);
}

保存并刷新，上方内容便是富文本了：

请添加图片描述

3、保存富文本内容

可惜，富文本的内容并没能保存在任何地方，当保存后再次刷新内容就会消失。因此我们首先应当有一个保存富文本的地方。

建立变量

打开block.json并添加attributes字段。attributes字段中加入我们需要保存的变量名称和一些基本的配置(本篇博客以note-content)举例：

{"$schema": "https://schemas.wp.org/trunk/block.json","apiVersion": 3,"name": "ht/ht-note","version": "v1.0.0","title": "自定义投票","category": "widgets","icon": "smiley","description": "创建一个自定义投票区块","example": {},"supports": {"html": false},"textdomain": "自定义投票区块","editorScript": "file:./index.js","editorStyle": "file:./index.css","style": "file:./style-index.css","render": "file:./render.php","viewScript": "file:./view.js","attributes": {"note-content": {"type": "string"}}
}

使用变量

重新回到edit()方法。传递{attributes, setAttributes}参数使方法支持读取自定义的变量。

另外，也需要为Rich Text添加回调事件。每当内容改变时，将内容同步在变量中。当然了，如果变量有内容，也应当同步进来。修改完成后记得刷新界面：

export default function Edit({ attributes, setAttributes }) {return (<><div { ...useBlockProps() }><RichTextonChange={ (value) => setAttributes({ content: value })}value={attributes.content}placeholder='输入你的内容...'tagName="div"></RichText><div>自定义的按钮</div></div></>);
}

这里的tagName="div"让RichText标签以div的格式进行保存。

保存内容

通过以上步骤，确实同步了变量了，可是当保存刷新后，内容依然没能保存。是因为note-content变量没能保存。

即：

修改了内容，变量被修改
编辑后，内容同步至note-content。note-content被修改
保存后，note-content并没能保存。

也就是说note-content依然没有改变，这个区块还是一个静态的区块。因此，我们应当额外处理一下变量的保存。

src目录下新建save.js并将edit中部分代码复制到文件中，并改名为save()方法。如下所示：

import { useBlockProps } from '@wordpress/block-editor';export default function save({ attributes }) {const { noteContent } = attributes;return (<div { ...useBlockProps.save() }>{ noteContent }</div><div>自定义的按钮</div>);
}

并且编辑index.js并修改registerBlockType()为：

registerBlockType( metadata.name, {/*** @see ./edit.js*/edit: Edit,save: Save,
} );

这样子就能正常保存变量与内容了（当然这个说法并不准确。我们将在以后提到发生了什么）。区块也变成了一个动态区块。

保存刷新。

调整保存的内容

如果你是跟着我一起做的，你会发现这样的bug
请添加图片描述

第一次出现这种报错可以完全的放心，这个是正常的现象，具体的解决方案在Word Press中富文本控件的保存BUG中已经顺利解决。有兴趣的可以去看看产生的原因和调试的方式。这里只给出结论，保存的内容和编辑器中的内容没有对上，可以将save()方法改成如下所示：

export default function save({ attributes }) {const { noteContent } = attributes;return (<>{ noteContent }</>);
}

保存刷新，即可正常保存。

二、修改界面显示的内容

如果你发布这篇页面/文章。你会发现咱们的控件依然显示着刚开始的静态文字。怎么回事？？

原来word press将界面的显示内容和编辑器中显示的内容分开处理了。这样子可以实现编辑时用利于编辑的展示方式。显示时，则使用利于用户的展示方式。可以更人性化的实现复杂功能。这里先不放开来讲了。

总之，我们可以直接打开插件src/ht-note目录下的render.php。这里就是界面实际显示的内容啦。

修改内容如下：

<?php$content = $attributes['noteContent'] ?? "默认投票";
?><div <?php echo get_block_wrapper_attributes(); ?>><?php echo $content; ?><div>自定义的按钮</div>
</div>