如何使用我的主题中的数据扩展SelectControl

时间:2021-10-04 作者:Jan-Cedric

我正在构建一个定制的gutenberg块,它应该有一个下拉列表(SelectControl)来选择应该将哪个css类添加到我的块中。到目前为止,没有什么特别的。我的问题是,根据我使用的主题,可用的类会发生变化。因此,对于ThemeA,可用的类是;测试1、测试2、测试3“;和ThemeB“;测试2、测试4;。那么,我的主题如何告诉我的区块哪些类可用?我正在考虑一个解决方案,其中我的主题将类转发到我的区块。但我找不到任何钩子或其他wordpress函数来将主题中的数据注入编辑器js前端(SelectControl)。

由于可用的类发生变化,因此变量没有选项。我有一个解决方案,如何将类应用到我的块,我只是不知道如何在InspectorControl中扩展SelectControl。

1 个回复
SO网友:Phil

您可以使用wp_localize_script() 要将JavaScript变量传递给编辑器,请执行以下操作:

$asset_file = include(get_template_directory() . \'/path/to/blocks/index.asset.php\');

wp_register_script(
    \'pb-theme-blocks\',
    get_template_directory_uri() . \'/path/to/blocks/index.js\',
    $asset_file[\'dependencies\'],
    $asset_file[\'version\']
);

wp_localize_script(
    \'pb-theme-blocks\',
    \'pbThemeBlocksVars\',
    array(
        \'classes\' => array(), // Your theme classes go here
    )
);
然后在你的edit 功能:

const classes = pbThemeBlocksVars.classes;