如何在动态块中动态呈现InnerBlock？

我正在用自定义块构建一个自定义网站，最近决定将我的所有块转换为动态块。不使用的块InnerBlocks 很好，但我不知道如何渲染动态InnerBlock 在另一个动态块内。

我用另一篇帖子的建议来混合save() 方法和返回InnerBlocks.Content, 然后渲染InnerBlocks 满足于$content 内部render_callback 作用它看起来是这样的：

// counter/save.js
import { __ } from "@wordpress/i18n";
import { InnerBlocks } from "@wordpress/block-editor";

const Save = (props) => {
  return <><InnerBlocks.Content /></>;
};
export default Save;

// counter.php
function counter_render_callback($attr, $content)
{
  ob_start(); // Turn on output buffering

?>

  <?php if (!empty($content)) : ?>
  <section class="bg-blue-900 thin text-white">
    <div class="container flex flex-wrap justify-evenly md:justify-around text-center -mb-10 md:mb-0">
      <?php echo do_blocks($content); ?>
    </div>
  </section>
  <?php endif; ?>

<?php
  /* END HTML OUTPUT */

  $output = ob_get_contents(); // collect output
  ob_end_clean(); // Turn off ouput buffer

  return $output; // Print output
};

现在我设置了InnerBlock 也可以作为动态块，但它只渲染我在中设置的save.js 文件这就是InnerBlock 看起来像：

// counter-list/save.js
import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";

const Save = (props) => {
  const { attributes } = props;

  const mandatoryFields = () => {
    return attributes.amount && attributes.label;
  };

  const blockProps = useBlockProps.save();
  return (
    <div {...blockProps}>
      {mandatoryFields() && (
        <div class="w-1/2 sm:w-1/3 md:w-auto mb-10 md:mb-0">
          <div class="font-display text-h1 font-medium leading-none">
            {attributes.amount}
          </div>
          <div class="w-10 h-px bg-white my-4 inline-block opacity-60"></div>
          <div>{attributes.label}</div>
        </div>
      )}
    </div>
  );
};
export default Save;

// counter-list.php
function counter_list_render_callback($attr, $content)
{
  // Easier access to all attributes
  $amount = !empty($attr[\'amount\']) ? $attr[\'amount\'] : "";
  $label = !empty($attr[\'label\']) ? $attr[\'label\'] : "";

  // Do not output anything if any of the mandatory fields are empty
  if (empty($amount) || empty($label)) {
    return;
  }

  ob_start(); // Turn on output buffering

?>

<div class="w-1/2 sm:w-1/3 md:w-auto mb-10 md:mb-0">
  <div class="font-display text-h1 font-medium leading-none"><?php echo $amount; ?></div>
  <div class="w-10 h-px bg-white my-4 inline-block opacity-60"><?php echo $label; ?></div>
</div>

<?php
  /* END HTML OUTPUT */

  $output = ob_get_contents(); // collect output
  ob_end_clean(); // Turn off ouput buffer

  return $output; // Print output
};

我如何制作counter.php 文件使用render_callback 功能来自counter-list.php?

相关推荐