Question

我正在gutenberg编辑器中为我的代码块使用此代码。我有一个音频播放器插件，通常在经典编辑器中使用这样的短代码：

[foo player_id="5"]

我现在正尝试将其转换为gutenberg，用户将其添加为块，然后从gutenberg ui的选择菜单中选择播放器。 foo_block_data是我可以从后端数据库中检索并在选择菜单中显示的可用播放器的列表。

这在选择更改时很好用，但是当我重新加载页面时，此player_id丢失了。在经典编辑器中，player_id将包含短代码，例如[foo player_id =“ 5”]，但在古腾堡中，如果我转到代码编辑器（而不是可视化编辑器），我会看到以下内容：

<!-- wp:foo/block /-->

那么应该将这些数据保存在哪里（在我的情况下为player_id），或者我该如何保存这些数据，以便随后重新加载页面（稍后再次打开）所选用户再次处于活动状态的player_id？

我知道属性中有一个默认值，但这又不会保存在onChangePlayerId中选择的我的player_id

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;


var i,
players = JSON.parse(foo_block_data.players),
 playerArr = [{label:'Select player..', value:''}], 

for (i = 0; i < players.length; i++){
    playerArr.push({label:players[i].title, value:players[i].id})
}

registerBlockType( 'foo/block', {
    title: "foo title",
    description: "lorem ipsum dolor,
    icon: {
        src: 'audio'
    },
    category: 'common',
    attributes: {
        player_id : {
            type: 'number',
        },
    },
    edit({attributes, setAttributes, className, focus, id}) {
        console.log(attributes)

        function onChangePlayerId(v) {
            setAttributes( {player_id: v} );
        }

        return [

                el(
                    'div',
                    null,
                    el("span", {}, "lorem ipsum dolor")
                ),

                el( wp.element.Fragment, {},
                    el( wp.editor.InspectorControls, {},
                        el( wp.components.PanelBody, { title: 'Select source', initialOpen: true },

                                el(
                                    SelectControl,
                                    {
                                        label: 'Select player',
                                        value: attributes.player_id,
                                        options: playerArr,
                                        onChange: onChangePlayerId
                                    }
                                )


                        ),

                    ),

                ), 

            ]


    },
    save({attributes, className}) {
        return null;
    },
} );

古腾堡保存简码值

0 个答案: