javascript - 如何在 Gutenberg 中使用序列化数据？

Question

我正在尝试创建一个侧边栏插件，用于存储要在前端使用的帖子元数据。无需赘述，我需要将所有数据存储为 1 个元条目，而不是每个帖子的多行 .这是我到目前为止所拥有的:

// ds-jars.js

const pluginContent = (props) => {

    const productData = () => {
        const categoryId = createElement( PanelRow, null, 
            createElement(TextControl, {
                label: "Category Name",
                value: props.category_id,
                onChange: (content) => {
                    props.set_category_id(content)
                },
            })
        )
        const serialId = createElement( PanelRow, null, 
            createElement( TextControl, {
                label: "Serial Number",
                value: props.serial_id,
                onChange: (content) => { 
                    props.set_serial_id(content)
                }
            })
        )
        const productId = createElement( PanelRow, null, 
            createElement( TextControl, {
                label: "Product ID",
                value: props.product_id,
                onChange: (content) => { 
                    props.set_product_id(content)
                }
            })
        )

        return createElement(PluginDocumentSettingPanel, {
            title: "Product Data",
            name: "ds-jars-productdata",
            icon: 'none',
        }, categoryId, serialId, productId
        )
    }

    return productData()
}

const selectData = (select) => {
    return { 
        category_id:        select("core/editor").getEditedPostAttribute("meta")["category_id"],
        serial_id:          select("core/editor").getEditedPostAttribute("meta")["serial_id"],
        product_id:         select("core/editor").getEditedPostAttribute("meta")["product_id"],
        name:               select("core/editor").getEditedPostAttribute("meta")["name"],
        quantity:           select("core/editor").getEditedPostAttribute("meta")["quantity"],
        color:              select("core/editor").getEditedPostAttribute("meta")["color"],
        height:             select("core/editor").getEditedPostAttribute("meta")["height"],
        width:              select("core/editor").getEditedPostAttribute("meta")["width"],
        depth:              select("core/editor").getEditedPostAttribute("meta")["depth"],
        pattern:            select("core/editor").getEditedPostAttribute("meta")["pattern"],
        date_made:          select("core/editor").getEditedPostAttribute("meta")["date_made"],
        date_updated:       select("core/editor").getEditedPostAttribute("meta")["date_updated"],
        date_expired:       select("core/editor").getEditedPostAttribute("meta")["date_expired"]
    }
}

const dispatchData = (dispatch) => {
    return {
        set_category_id:    (value) => {dispatch("core/editor").editPost({meta:{category_id: value} })},
        set_serial_id:      (value) => {dispatch("core/editor").editPost({meta:{serial_id: value} })},
        set_product_id:     (value) => {dispatch("core/editor").editPost({meta:{product_id: value} })},
        set_name:           (value) => {dispatch("core/editor").editPost({meta:{name: value} })},
        set_quantity:       (value) => {dispatch("core/editor").editPost({meta:{quantity: value} })},
        set_color:          (value) => {dispatch("core/editor").editPost({meta:{color: value} })},
        set_height:         (value) => {dispatch("core/editor").editPost({meta:{height: value} })},
        set_width:          (value) => {dispatch("core/editor").editPost({meta:{width: value} })},
        set_depth:          (value) => {dispatch("core/editor").editPost({meta:{depth: value} })},
        set_pattern:        (value) => {dispatch("core/editor").editPost({meta:{pattern: value} })},
        set_date_made:      (value) => {dispatch("core/editor").editPost({meta:{date_made: value} })},
        set_date_updated:   (value) => {dispatch("core/editor").editPost({meta:{date_updated: value} })},
        set_date_expired:   (value) => {dispatch("core/editor").editPost({meta:{date_expired: value} })}
    }
}

let fieldSelect = withSelect(selectData)(pluginContent)
let fieldDispatch = withDispatch(dispatchData)(fieldSelect)

registerPlugin( "ds-jars", {
    icon: 'store',
    render: fieldDispatch 
})

显然这可行，但将每个字段保存为自己的元行条目。根据这篇文章: WP 5.3 Supports Object and Array Meta Types in the REST API .我应该能够通过使用“show_in_rest”中的数组将对象发送到元字段。我已经能够使用以下内容正确注册我想要的字段:

register_post_meta('', 'ds_product', 
            array(
                'type' => 'object',
                'single' => true,
                'show_in_rest' => array(
                    'schema' => array(
                        'type' => 'object',
                        'properties' => array(
                            'category_id'   => array('type' => 'string'),
                            'serial_id'     => array('type' => 'string'),
                            'product_id'    => array('type' => 'string'),
                            'name'          => array('type' => 'string'),
                            'quantity'      => array('type' => 'string'),
                            'color'         => array('type' => 'string'),
                            'height'        => array('type' => 'string'),
                            'width'         => array('type' => 'string'),
                            'depth'         => array('type' => 'string'),
                            'pattern'       => array('type' => 'string'),
                            'date_made'     => array('type' => 'string'),
                            'date_updated'  => array('type' => 'string'),
                            'date_expired'  => array('type' => 'string'),
                        )
                    )
                )
            )
        );

我可以通过 console.log 手动发送一个对象，所以它似乎已经准备好将我的值作为一个对象发送给它。 我遇到的问题是使用 withSelect/withDispatch 函数写入/读取此元字段。如何使用 withDispatch 将我的所有值发送到此元字段“ds_product”？ 已经为此苦苦挣扎了一周。我已经尝试了很多我得到的最接近的东西

// Create prop to get data from serialized field
category_id: select("core/editor").getEditedPostAttribute("meta")["ds_product"].category_id
category_id: select("core/editor").getEditedPostAttribute("meta")["ds_product"].serial_id
...

// Update serialized field
set_category_id: (value) => {dispatch("core/editor").editPost({meta:{ds_product:{category_id: value} }})},
set_serial_id: (value) => {dispatch("core/editor").editPost({meta:{ds_product:{serial_id: value} }})},
...

由于它们一次更新一个，因此该字段最终仅存储先前更改的值，因此删除了它之前的所有其他数据。任何帮助将不胜感激。最后一点，我知道将序列化数据存储到数据库的危险/限制，但我仍然需要以这种方式完成。提前谢谢!

Answer 1

我遇到了这个问题，对我有用的是 dispatch() 的以下用法和 saveEntityRecord .
在以下示例中，我将序列化对象保存到 wp_options WP 数据库中的表。

// Save serialized data to wp_options.
dispatch('core').saveEntityRecord('root', 'site', {
    my_plugin_settings: {
      test_1: 'Test 1 Setting Value',
      test_2: 'Test 1 Setting Value',
    },
  }).then(() => {

  })
  .catch((error) => {
    dispatch('core/notices').createErrorNotice('Error', {
      isDismissible: true,
      type: 'snackbar',
    });
  });
});

首先，您必须像上面一样注册设置，以便可以通过 REST API 使用。

register_setting(
        'my_plugin_settings',
        'my_plugin_settings',
        [
            'default'      => '',
            'show_in_rest' => [
                'schema' => [
                    'type'       => 'object',
                    'properties' => [
                        'test_1' => [
                            'type' => 'string',
                        ],
                        'test_2'                 => [
                            'type' => 'string',
                        ],
                    ]
                ],
            ]
        ]
    );

然后使用上面我的答案中的代码，您可以正确保存序列化值。