wordpress-gutenberg - 如何根据块数组渲染块

Question

在我的编辑功能中，我使用 BlockEditorProvider 允许用户在定义的区域中添加一些块，并使用 onChange 解析嵌套块以将它们存储在属性中。最终结果是这样的

[0] => Array
            (
                [0] => Array
                    (
                        [clientId] => e69604c9-9f4f-42e9-80c1-591b4e78d1b3
                        [name] => core/columns
                        [isValid] => 1
                        [attributes] => Array
                            (
                                [className] => is-style-blue-quotedddddd
                            )

                        [innerBlocks] => Array
                            (
                                [0] => Array
                                    (
                                        [clientId] => 773b2a25-6b77-447e-a78e-0ef295553c40
                                        [name] => core/column
                                        [isValid] => 1
                                        [attributes] => Array
                                            (
                                                [className] => c-block-tabbed-content
                                            )

                                        [innerBlocks] => Array
                                            (
                                                [0] => Array
                                                    (
                                                        [clientId] => 411b52d3-d62b-4d90-82d1-d3ec4a77a3b7
                                                        [name] => core/heading
                                                        [isValid] => 1
                                                        [attributes] => Array
                                                            (
                                                                [content] => ddddddd
                                                                [level] => 2
                                                                [placeholder] => Title
                                                            )

                                                        [innerBlocks] => Array
                                                            (
                                                            )

                                                    )

                                                [1] => Array
                                                    (
                                                        [clientId] => 21d3decd-3eed-4d44-b166-1af2d87b2b2d
                                                        [name] => core/paragraph
                                                        [isValid] => 1
                                                        [attributes] => Array
                                                            (
                                                                [content] => 
                                                                [dropCap] => 
                                                                [placeholder] => Description
                                                            )

                                                        [innerBlocks] => Array
                                                            (
                                                            )

                                                    )

                                                [2] => Array
                                                    (
                                                        [clientId] => b523cf91-c760-42b4-84f4-c3f6f6f21f9c
                                                        [name] => core/columns
                                                        [isValid] => 1
                                                        [attributes] => Array
                                                            (
                                                            )

                                                        [innerBlocks] => Array
                                                            (
                                                                [0] => Array
                                                                    (
                                                                        [clientId] => cb3feeb3-3556-486d-bd3c-e9cfb69991d7
                                                                        [name] => core/column
                                                                        [isValid] => 1
                                                                        [attributes] => Array
                                                                            (
                                                                            )

                                                                        [innerBlocks] => Array
                                                                            (
                                                                                [0] => Array
                                                                                    (
                                                                                        [clientId] => 55cce3f6-8228-461f-92ca-ac2fa3375e9a
                                                                                        [name] => core/list
                                                                                        [isValid] => 1
                                                                                        [attributes] => Array
                                                                                            (
                                                                                                [ordered] => 
                                                                                                [values] => 
                                                                                            )

                                                                                        [innerBlocks] => Array
                                                                                            (
                                                                                            )

                                                                                    )

                                                                            )

                                                                    )

                                                                [1] => Array
                                                                    (
                                                                        [clientId] => c4b36656-bb07-4e8a-bb13-0e3af64f1b90
                                                                        [name] => core/column
                                                                        [isValid] => 1
                                                                        [attributes] => Array
                                                                            (
                                                                            )

                                                                        [innerBlocks] => Array
                                                                            (
                                                                                [0] => Array
                                                                                    (
                                                                                        [clientId] => a12fcea7-44a5-4431-b73f-06a1d8b4ca44
                                                                                        [name] => core/list
                                                                                        [isValid] => 1
                                                                                        [attributes] => Array
                                                                                            (
                                                                                                [ordered] => 
                                                                                                [values] => 
                                                                                            )

                                                                                        [innerBlocks] => Array
                                                                                            (
                                                                                            )

                                                                                    )

                                                                            )

                                                                    )

                                                            )

                                                    )

                                            )

                                    )

                                [1] => Array
                                    (
                                        [clientId] => c8a71a68-b32a-4737-97ad-264622b0f2f9
                                        [name] => core/column
                                        [isValid] => 1
                                        [attributes] => Array
                                            (
                                            )

                                        [innerBlocks] => Array
                                            (
                                                [0] => Array
                                                    (
                                                        [clientId] => 39049805-e22a-4f36-9f91-70e86bc51d14
                                                        [name] => core/image
                                                        [isValid] => 1
                                                        [attributes] => Array
                                                            (
                                                                [alt] => 
                                                                [bgPosition] => 
                                                                [bgColor] => 
                                                                [bgHeight] => 50
                                                                [bgWidth] => 50
                                                                [bgGutter] => 25
                                                            )

                                                        [innerBlocks] => Array
                                                            (
                                                            )

                                                    )

                                            )

                                    )

                        )

然后我将它传递给保存功能，我需要一种方法来渲染这些块。我知道有 innerBlocks 组件，但是该组件每个块只能使用一次，并且我有多个数组，其中包含一些应该呈现的内容。

<InnerBlocks 模板={ 模板 } />

标签： wordpress-gutenberggutenberg-blocks

Answer 1

在 WordPress 开发人员指南中，教程“构建自定义块编辑器”似乎与您尝试通过将块存储在数组中来完成的工作相似。

将块数据保存在 中onChange()时，示例函数persistBlocks()将块内容数组作为序列化字符串存储在本地存储中，以便以后对其进行编辑/解析，例如：

<BlockEditorProvider ... onChange={ persistBlocks }>

function persistBlocks( newBlocks ) {
    updateBlocks( newBlocks );
    window.localStorage.setItem( 'myBlocks', serialize( newBlocks ) );
}

参考：https ://developer.wordpress.org/block-editor/how-to-guides/platform/custom-block-editor/tutorial/#saving-block-data

通过将块存储为序列化字符串，它们将正确呈现，并且能够由编辑器使用parse() 解析以供将来编辑并在需要时保留 InnerBlocks。