Gutenberg - 1개의 블록 타입에 여러 개의 이너 블록

Gutenberg - 1개의 블록 타입에 여러 개의 이너 블록

구텐베르크가 사용하는 워드프레스 디폴트가 필요없기 때문에 커스텀 컬럼 블록을 하려고 합니다.

그래서 어떻게 동작하는지 찾아봤는데 레이아웃 정의와 함께 InnerBlocks 블록을 사용하지만, 컬럼에 html 태그와 클래스를 지정할 방법이 없어서 쓸모가 없습니다.

그 후 맵을 사용하여 컬럼을 루프아웃하기로 했습니다.그 후 컬럼에 다른 블록을 삽입할 수 있도록 각 컬럼에 InnerBlocks 컴포넌트를 추가했습니다만, 문제는 각 컬럼에서 InnerBlocks의 내용이 공유되기 때문에 각 InnerBlocks와 컬럼의 주요 속성을 고유하게 설정하려고 했습니다.는 아직 공유되고 있습니다(아니오, 공유 블록을 사용하지 않습니다).

구텐베르크는 각 컬럼에 동일한 InnerBlocks 인스턴스를 사용하고 있는 것 같습니다.

동적으로 열을 추가하고 각 열에 정보를 포함한 "카드"를 추가할 수 있는 블록 유형을 구축하려고 합니다.

내가 무엇을 하고 있는지 알기 위해, 다음은 편집 기능의 반환입니다.

<section className="infonav">
            <div className="infonav__container">
                <div>
                    <button onClick={onAddBox}>{__('Add column', 'zmg-blocks')}</button>
                </div>
                <div className="infonav__row">
                    {[...new Array(columns).keys()].map((item, index) => {
                        return (
                                <div className="infonav__row__col" key={"info_cols"+index}>
                                    <div>
                                        <button onClick={onRemoveBox.bind(index)}>
                                            {__('Remove', 'zmg-blocks')}
                                        </button>
                                    </div>
                                    <InnerBlocks key={"info_boxes"+index}/>
                                </div>
                        );
                    })}
                </div>
            </div>
        </section>

감사해요.

구텐베르크 이너블록은 한 블록에 한 번만 사용할 수 있는 것 같습니다.

주의: 블록은 최대 1개의 InnerBlocks와 InnerBlocks를 렌더링할 수 있습니다.각각 편집 및 저장 중인 콘텐츠 요소.중첩된 블록의 배열을 구분하려면 자체 InnerBlocks를 렌더링하는 개별 블록 유형을 작성하고 단독 allowedBlocks 유형으로 할당합니다.

출처 : https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

다른 블록을 내부에 중첩할 수 있도록 내부 블록을 사용하는 이 블록과 함께 다른 사용자 정의 블록(열 전용)을 작성해야 합니다.allowedBlocks를 사용하여 이 블록의 사용자 지정 열만 허용할 수 있습니다.

를 통해 여러 개의 InnerBlock다음과 같이 'block-block'에서 여러 블록을 추가할 수 있는 방법은 아직 없습니다.

const BLOCK_TEMPLATE = [
  ['image-slider', { width: 800, height: 400 }],
  ['menu'],
];

registerBlockType('peregrine/inner-block-demo', {

  title: 'Inner Block Demo',

  edit({ className }) {
    return (
      <div className={className}>
        <InnerBlocks
          template={BLOCK_TEMPLATE}
          templateLock="all"
        />
      </div>
    );
  },

  save() {
    return (
      <div>
        <InnerBlocks.Content />
      </div>
    );
  },
});

여러 개의 내부 블록에는 복잡한 작업이 필요 없어 보이며, 일반적으로 여러 개의 단순 블록으로 분할해야 하는 블록을 암시하거나 블록 속성(자식이 아님)을 암시합니다.위의 제안이 어떻게 적용되는지 알려주시면 다시 방문하실 수 있습니다.

이 토론은 https://github.com/WordPress/gutenberg/issues/6808 에서 보실 수 있습니다.

단, 코드는 내부 요소를 추가하는 것과 비슷해 보입니다.그것은 가능합니다.

따라서 더 명확하게 하기 위해 사용자가 제공하는 blockType 함수는 block이 아닙니다.구텐베르크는 다음과 같은 우아한 쇼트 코드를 차단합니다.

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

또는 다음과 같습니다.

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

첫 번째 블록은 내용이 포함되어 있기 때문에 정적 블록이라고 불립니다.두 번째 블록은 자기 클로징 블록으로 내용이 없기 때문에 다이내믹 블록이라고 불립니다.블록 등록 시 제공한 php 콜백에서 콘텐츠를 가져옵니다.

구텐베르크 리액트에서는 리액트 요소를 반환해야 합니다. 메서드는 반환해야 이 요소를 요소를 이됩니다.설정 객체의 편집 메서드는 반응 요소를 반환해야 합니다. 이 요소는 편집기에서 블록의 시각적 표현을 생성하는 데 사용됩니다. save 메서드는 반응 요소도 반환해야 하지만 이 요소는 정적 html로 렌더링되어 데이터베이스에 저장됩니다. <figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>동적 블록은 null을 반환하기 때문에 반환 요소가 없기 때문에 콘텐츠가 없기 때문에 자동으로 닫힙니다.

서버가 요청에 응답하면 데이터베이스에 저장된 내용을 가져와 파서를 통해 실행하여 정적 블록인지 동적 블록인지 확인합니다.블록이 정적인 경우 블록 자체에 콘텐츠가 있기 때문에 콘텐츠가 반환됩니다.동적일 경우 등록된 콜백 함수가 호출되고 반환값이 반환됩니다.

이제 질문에 답하기 위해 저장 및 편집 기능은 반응 요소를 반환해야 합니다.리액트 요소는 단일 루트 요소를 가져야 하지만 내부 요소는 다음과 같은 일반 html을 사용할 수 있습니다.

<div>
  <h1>Hello world</h1>
  <p>This is a sentence</p>
</div>

퍼포먼스를 위해서입니다.DOM 운영은 비용이 많이 들기 때문에 DOM에 대한 단일 엔트리 포인트가 있습니다.그것이 그것이 매우 빠른 이유입니다.독자적인 DOM이 있어, 그 후, 트리 전체가 메모리에 상주합니다.React는 변경 시 DOM 트리를 통과하여 변경된 브랜치만 렌더링합니다.변경을 조금만 해도 트리 전체가 그려지지 않습니다.

여기서 중요한 세부사항은 위의 코드가 html처럼 생겼다는 것입니다만, 그렇지 않습니다.jsx 입니다.react는 html을 직접 렌더링할 수 없습니다.Jsx는 바벨과 같은 트랜스필러에 의해 반응 원소로 변환됩니다.

React에는 react 요소를 작성하기 위해 사용할 수 있는 createElement 메서드도 있습니다.wp는 이 메서드를 다시 내보냅니다.

한 반응 요소를 다른 반응 요소에 렌더링할 수 있습니다.반응을 배우지 않으면 블록의 힘이나 가능성을 완전히 파악할 수 없습니다.리액트 라이브러리는 그다지 크지 않습니다.그 이면에 있는 아이디어를 파악하면, 1주일이나 2주일 정도면 생산성이 향상될 만큼 충분히 배울 수 있습니다.

저도 같은 문제가 있었고 Swopnil Dangol의 답변을 바탕으로 다음과 같은 것을 만들었습니다.

상위 블록:

registerBlockType("my-plugin/parent-block", {

    title: "Parent block",

    // Amount of columns
    attributes: {
        columns: { type: "number", default: 3 },
    }

    edit(props) {
        const { attributes: { columns } } = props;

        const onChangeColumns = (newColumns) => {
            setAttributes({ columns: newColumns });
        };

        // Either go for the template route
        // (create an inner block template based on amount of columns)
        const template = Array.from(Array(columns).keys()).map((i) => [
            "my-plugin/custom-inner-block",
        ]);
      
        // Or go for the allowed blocks route
        const allowedBlocks = ["my-plugin/custom-inner-block"];

        return (
            <div {...useBlockProps()}>

                {/* Use RangeControl in the InspectorControls to 
                    control the number of columns. */}
                <InspectorControls key="setting">
                    <div class="block-editor-block-card">
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                {__("Amount of columns", "gutenpride")}
                            </legend>
                            <RangeControl
                                label="Columns"
                                value={columns}
                                onChange={(value) => onChangeColumns(value)}
                                min={1}
                                max={3}
                            />
                        </fieldset>
                    </div>
                </InspectorControls>
    
                <InnerBlocks
                    template={activeTemplate}
                    templateLock="all"
                    allowedBlocks={allowedBlocks}
                />
            </div>
        )
    },

    save() {
        return (
            <div {...useBlockProps.save()}>
                <InnerBlocks.Content />
            </div>
        );
    },

    // ...
}

사용자 지정 내부 블록:

registerBlockType("my-plugin/custom-inner-block", {

    title: "Custom Inner Block",

    edit(props) {
        const { attributes } = props;
        const { title } = attributes;

        return (
            <div {...useBlockProps()}>
                <InnerBlocks/>
            </div>
        );
    },

    save() {
        return (
            <div {...useBlockProps.save()}>
                <InnerBlocks.Content />
            </div>
        );
    },

    // ...
});

언급URL : https://stackoverflow.com/questions/51072386/gutenberg-multiple-innerblocks-in-one-block-type