存储来自古登堡嵌套块的数据

时间:2021-09-30 作者:Djave

我有两个古腾堡积木来组成手风琴。父手风琴使用InnerBlocks 具有allowedBlocks 仅设置为面板块。因此,这两个模块是:

ea/accordion
ea/accordion-panel
每个面板有两个元素,一个是面板的标题(使用RichText) 和InnerBlocks 与内容。保存手风琴时,仅保存InnerBlocks内容。How can I save the heading as well?

更多详细信息:

这个ea/accordion-panel 具有以下索引。js公司

registerBlockType("ea/accordion-panel", {
  parent: ["ea/accordion"],

  attributes: {
    heading: {
      type: "string",
      source: "html",
      selector: "h2",
    },
  },

  edit: Edit,

  save,
});
和以下编辑功能:

export default function Edit({ attributes, setAttributes }) {
  return (
    <div {...useBlockProps({ className: "ea-accordion-panel" })}>
      <div className="ea-accordion-panel--title">
        <RichText
          tagName="h2"
          value={attributes.heading}
          onChange={(heading) => setAttributes({ heading })}
          placeholder={__("Heading...")}
        />
      </div>
      <InnerBlocks />
    </div>
  );
}
But it is only the InnerBlocks content that is shown in the editor after saving. (不是heading, 即使这已设置并存储在属性中)

这个ea/accordion 它本身不存储任何属性,所以可能这就是错误所在?

手风琴/索引。js公司

import { registerBlockType } from "@wordpress/blocks";

import "./style.scss";
import Edit from "./edit";
import save from "./save";

registerBlockType("ea/accordion", {
  edit: Edit,
  save,
});
手风琴编辑功能:

export default function Edit() {
  const blockProps = useBlockProps({ className: "ea-accordion" });

  return (
    <div {...blockProps}>
      <InnerBlocks allowedBlocks={["ea-accordion-panel"]} />
    </div>
  );
}
保存之前,我们有

accordion 
  InnerBlocks
    accordion-panel
      heading => A new heading
      InnerBlocks
        Paragraph => Some content
    accordion-panel
      heading => Another heading
      InnerBlocks
        Paragraph => Some more content

enter image description here

然后保存后。。。

accordion 
  InnerBlocks
    accordion-panel
      heading => empty
      InnerBlocks
        Paragraph => Some content
    accordion-panel
      heading => empty
      InnerBlocks
        Paragraph => Some more content

enter image description here


更新

我发现问题,保存功能如下所示:

<div {...blockProps}>
  <!-- No heading tag -->
  <div className="ea-accordion-panel--content">
    <InnerBlocks.Content />
  </div>
</div>

1 个回复
SO网友:Djave

除了save 功能(请参阅更新的问题)。我更新如下:

<div {...blockProps}>
  <div className="ea-accordion-panel--heading">
    <RichText.Content tagName="h2" value={attributes.heading} />
  </div>
  <div className="ea-accordion-panel--content">
    <InnerBlocks.Content />
  </div>
</div>

相关推荐