我构建了一个带有ServerSideRender组件的小TOC插件。这是一个开源爱好项目,旨在更好地了解古腾堡:https://wordpress.org/plugins/simpletoc/ 现在,我想向块添加属性以切换选项,如;禁用标题;。几个月前,在您的帮助下,我成功地使插件工作,但它发送了;假属性;。就我而言,这只是一个日期。
我对ServerSideRender的理解是,该插件通过ajax从php部分获取其内容。但属性保存在标记中。资料来源:https://developer.wordpress.org/block-editor/tutorials/block-tutorial/introducing-attributes-and-editable-fields/ 但是,既然我的插件不是通过js而是通过php生成标记,那么仍然可以添加自定义属性吗?
这是块部分,带有;发送假属性“;有效功能:
function sendfakeAttribute(props) {
// this acuallty triggers the ServerSideRender again ¯\\_(ツ)_/¯
props.setAttributes({ updated: Date.now()});
}
registerBlockType(\'simpletoc/toc\', {
title: __(\'SimpleTOC\', \'simpletoc\'),
icon: simpletocicon,
category: \'layout\',
edit: function(props) {
return [
el(
BlockControls, { key: \'controls\' },
el( Toolbar, null,
el(
IconButton, {
className: \'components-icon-button components-toolbar__control\',
label: __(\'Update table of contents\', \'simpletoc\'),
onClick: function() {
sendfakeAttribute(props)
},
icon: \'update\'
}
)
)
),
el(
\'p\', { className: props.className },
el(
ServerSideRender, {
block: props.name,
attributes: props.attributes
}
)
)
];
},
save: props => {
return null;
},
});
但是当我在registerBlockType下面添加这个时,它是如何保存值的?我被SSR卡住了吗?或者选择器类似于
<serversiderender>
在此处的属性部分。
registerBlockType(\'simpletoc/toc\', {
title: __(\'SimpleTOC\', \'simpletoc\'),
icon: simpletocicon,
attributes: {
disabletitle: {
type: \'boolean\',
source: \'children\',
selector: \'serversiderender\'
}
},
category: \'layout\',
edit: function(props) {
最合适的回答,由SO网友:Tom J Nowell 整理而成
是的,它的工作原理与任何其他块完全相同,不需要假属性。当JS需要显示组件时,它将发出AJAX请求以获取标记并传递属性。
需要注意的重要部分是,块编辑器中的块仍然是JS。我们只是用PHP生成一些HTML。
保存帖子时,仍会保存带有属性的HTML注释标记,生成该标记的是块编辑器,而不是PHP或JS块实现因为您的save函数是空的,所以它只是带有属性的HTML注释
同样,可以通过使用useSelect()
读取块编辑器数据存储,从而无需更新TOC按钮。
此外,即使您的块是动态PHP渲染块,但这并不意味着您的编辑函数需要由服务器渲染。它可以完全是JS,可以是JS和服务器渲染(有一个服务器渲染组件),甚至可以是一张猫的图片,与保存的内容无关。这个edit
函数返回交互式编辑器UIsave
函数返回实际存储在数据库中的内容。然后,块编辑器将其序列化为字符串,并将其包装在适当的标记或JSON中介中,以满足任何需要。