Render Block from a array of Block- Gutenberg

Question

我需要以某种方式从我使用以下函数获得的块列表中渲染块：

const applyWithSelect = withSelect((select, blockData) => {
    const parentClientId = select('core/block-editor').getBlockRootClientId(
        selectedClientId
    );

    return {
        innerBlocks: select('core/block-editor').getBlocks(blockData.clientId),
    };
});

因此，在这里，我将innerBlocks作为页面上块数组，如下所示(第一个元素)：

0:
attributes: {title: "Enter Title", review: "Enter review", rating: "Add Rating", reviewerName: "Enter Name", reviewDate: "Enter Date", …}
clientId: "2413142124"
innerBlocks: []
isValid: true
name: "something/some-item"
originalContent: "<div>something</div>"

有没有办法让我在编辑函数中使用这个innerBlocks变量，然后以某种方式呈现这个块？不使用<InnerBlocks >的原因是我必须一个接一个地渲染它们，所以每个块在我的滑块中都是一个单独的元素。我需要这样的东西：

const reviews = this.props.innerBlocks;

return (
   <div>
       <div className="carousel">
           <Slider {...slickSettings} className={classnames(this.props.className)}>
               { reviews.map((block, i) => {
                    return (
                        block.render() // this line is the issue, doesn't have to be render, but
                                       // any other way of rendering block separately from InnerBlocks
                         )

                 })
               }
           </Slider>
       </div>
   </div>
)

Answer 1

我一直在努力寻找类似的东西已经有一段时间了。我需要的只是用renderToString返回一个渲染过的块的字符串，但我认为你可以很容易地删除它，只返回块本身。

在深入研究WordPress's repo之后，我认为答案必须与函数getSaveElement( nameOfBlock, attributesObject, [optionalInnerBlocks] )有关

我的代码看起来像这样：

import { registerBlockType, getSaveElement } from '@wordpress/blocks';
import { renderToString } from '@wordpress/element';

const arrayOfInnerBlocks = something.innerBlocks; //for example purposes
const getRenderedEl = ( attributes ) => {
    const el = renderToString(
        getSaveElement( 'core/cover', attributes ) //this is the main thing!
    );
    return el;
}

// i'm deconstructing the innerBlock item and just getting attributes.
const blockElements = arrayOfInnerBlocks.map( {attributes} => ({ individualBlock: getRenderedEl(attributes) }) )

所以对你来说，就像这样：

const reviews = this.props.innerBlocks;
const getRenderedEl = ( {attributes, name} ) => getSaveElement( name, attributes ); //this is the main
return (
   <div>
       <div className="carousel">
           <Slider {...slickSettings} className={classnames(this.props.className)}>
               { reviews.map( getRenderedEl ) }
           </Slider>
       </div>
   </div>
)

希望这就是你要找的东西！

Answer 2

您可以使用BlockEditorProvider，在编辑函数中显示块，使用map函数列出所有数组，并在其中显示值属性中的元素。如果需要，您可以检测onChange和onInput中的更改。

<BlockEditorProvider
    value={ block[ index ] }
    onInput={ ( state ) => {
        console.log( state );
    } }
    onChange={ ( state ) => {
        const newBlockContent = block.concat( [] );
        newBlockContent[ index ] = state;
        setAttributes( {
            myBlocks: newBlockContent,
        } );
    } }
>
    <SlotFillProvider>
        <BlockTools>
            <WritingFlow>
                <ObserveTyping>
                    <BlockList />
                </ObserveTyping>
            </WritingFlow>
        </BlockTools>
        <Popover.Slot />
    </SlotFillProvider>
</BlockEditorProvider>;