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

WordPress Development用户

提问于 2021-11-23 10:23:09

回答 1查看 823关注 0票数 1

当我点击一个按钮来添加一个新的选项卡时，我希望有一个<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 />;
  },
});

期望输出

theme-development

block-editor

回答 1

WordPress Development用户

回答已采纳

发布于 2021-11-23 11:13:46

你不

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

这就好比说一个盒子有多个内部，或者有一个以上的“在HTML标签中”，作为一个概念是没有意义的。

相反，要做官方核心模块所做的事情。例如列。

列块
- 列
  - 段落
  - 段落

- column 
    - paragraph
    - paragraph

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

选项卡的工作原理是一样的：

制表符
- 选项卡
  - 段落
  - 段落

- tab 
    - paragraph
    - paragraph

还请注意，您所要求的也不可能在不意外地想出完全相同的解决方案的情况下用要点表示。

HTML标记也是如此，如果我想要一个带有两个内部空间的<div>容器，我必须在其中放置两个标记作为单独的空间。为什么街区会有任何不同。

注意，块appender只是默认的UI，没有什么可以阻止您将自定义的appender组件传递到内部块UI，甚至可以将一个组件构建到块本身中。

下面是直接从readme获取的InnerBlocks components appender属性doc的示例：

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

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

// Fully custom
<InnerBlocks
    renderAppender={ MyAmazingAppender }
/>

下面是一个附录组件：

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

下面是选项卡如何从最终的GB加载项中阻止它：

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

        insertBlock(tabItemBlock, attributes.tabHeaders.length, clientId);