古腾堡:如何在ServerSideRender中使用块属性?

时间:2021-01-06 作者:Marc

我构建了一个带有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) {

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

是的,它的工作原理与任何其他块完全相同,不需要假属性。当JS需要显示组件时,它将发出AJAX请求以获取标记并传递属性。

需要注意的重要部分是,块编辑器中的块仍然是JS。我们只是用PHP生成一些HTML。

保存帖子时,仍会保存带有属性的HTML注释标记,生成该标记的是块编辑器,而不是PHP或JS块实现因为您的save函数是空的,所以它只是带有属性的HTML注释

同样,可以通过使用useSelect() 读取块编辑器数据存储,从而无需更新TOC按钮。

此外,即使您的块是动态PHP渲染块,但这并不意味着您的编辑函数需要由服务器渲染。它可以完全是JS,可以是JS和服务器渲染(有一个服务器渲染组件),甚至可以是一张猫的图片,与保存的内容无关。这个edit 函数返回交互式编辑器UIsave 函数返回实际存储在数据库中的内容。然后,块编辑器将其序列化为字符串,并将其包装在适当的标记或JSON中介中,以满足任何需要。