如何在同一个块中多次添加InnerBlock

时间：2021-11-23 作者：user8463989

当我单击按钮添加新选项卡时，我希望<InnerBlock /> 因此，我可以在选项卡中添加其他块。尝试这样做并不奏效，因为在所有动态创建的选项卡中似乎都是一样的。

import "./index.css";
import { registerBlockType } from "@wordpress/blocks";
import { useState } from "react";
import {
  RichText,
  InnerBlocks,
} from "@wordpress/block-editor";
import { Button } from "@wordpress/components";
const __ = wp.i18n.__;

registerBlockType("custom/tabs", {
  title: __("Tabbed Blocks", "custom-blocks"),
  description: __("Tabbed content blocks", "custom-blocks"),
  icon: "smiley",
  category: "custom-category",
  keywords: [__("tabs", "custom-blocks"), __("repeat", "custom-blocks")],
  attributes: {
    tabs: {
      type: "array",
      default: [""],
    },
  },

  edit: (props) => {
    const {
      attributes: { tabs },
      setAttributes,
    } = props;

    const [currentTab, setCurrentTab] = useState(0);

    const onTabClick = (index) => {
      setCurrentTab(index);
    };

    return (
      <>
        <div className="simple-tabs">
          <div className="tabs">
            {tabs.map((tab, index) => (
              <RichText
                tagName="button"
                value={tab}
                className={currentTab == index ? `active` : ""}
                onChange={(newValue) => {
                  const newTabs = tabs.concat([]);
                  newTabs[index] = newValue;
                  setAttributes({ tabs: newTabs });
                }}
                onClick={() => onTabClick(index)}
              />
            ))}
          </div>

          {tabs.map((tab, index) => {
            if (index == currentTab) {
              //return <div>Tab content {index}</div>;
              return <InnerBlocks />;
            }
          })}
        </div>
        <Button
          isPrimary
          onClick={() => {
            setAttributes({ tabs: tabs.concat([""]) });
          }}
        >
          Add Tab
        </Button>
      </>
    );
  },
  save: (props) => {
   return <InnerBlocks.Content />;
  },
});
所需输出

enter image description here

enter image description here

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

You don\'t

这不是块的工作方式，也不是HTML的工作方式。如果要在多个区域中插入块，则需要多个块。

这等于说一个盒子有多个内部，或者有多个“内部”；在HTML标记内；，它作为一个概念没有意义。

相反，要做官方核心模块所做的事情。E、 g列。

列块一个列块只能包含单独的列块，而包含内容的是单独的列块。

enter image description here

选项卡的工作原理相同：

请注意，如果不意外地想出完全相同的解决方案，您所要求的内容也不可能用项目符号表示。

如果我想有一个<div> 有两个内部空间的容器我必须在其中放置两个标签作为单独的空间。为什么积木会有任何不同。

请注意，块appender UI只是默认UI，没有任何东西阻止您将自定义appender组件传递到内部块UI，甚至将其构建到块本身。

以下是直接取自InnerBlocks组件appender属性文档自述文件的示例：

// Utilise a predefined component
<InnerBlocks
    renderAppender={ InnerBlocks.ButtonBlockAppender }
/>

// Don\'t display an appender
<InnerBlocks
    renderAppender={ false }
/>

// Fully custom
<InnerBlocks
    renderAppender={ MyAmazingAppender }
/>
以下是appender组件：

function render( { clientId } ) {
    return (
        <div>
            <p>Some rendered content here</p>
            <ButtonBlockAppender rootClientId={ clientId } />
        </div>
    );
}

https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/button-block-appender

以下是选项卡如何阻止ultimate GB加载项：

        const { insertBlock } = !wp.blockEditor ? dispatch( \'core/editor\' ) : dispatch( \'core/block-editor\' );
        const tabItemBlock = createBlock(\'uagb/tabs-child\');

        insertBlock(tabItemBlock, attributes.tabHeaders.length, clientId);
在这里，他们使用uaggb/tabs 块以提供UI并包含选项卡，以及uaggb/tabs-child 块以包含每个选项卡的内容并提供特定于选项卡的属性

有用的链接：

标签： theme-development   block-editor   小码农  

相关推荐