php - How to extend SelectControl with data from my theme

admin管理员组

文章数量:1287191

I'm building a custom gutenberg block that should have a dropdown (SelectControl) to select which css class should be added to my block. So far, nothing special. My problem is that depending on the theme I'm using, the available classes change. So for ThemeA, the available classes are "test1, test2, test3" and for ThemeB "test2, test4". So how can my theme tell my block which classes are available? I'm thinking of a solution in which my theme forwards the classes to my block. But I can't find any hooks or other wordpress functions to inject data from my theme into my editor js frontend (into my SelectControl).

Variants are no option because the available classes change. I have a solution how to apply the classes to my block, I just don't know how the extend the SelectControl in the InspectorControls.

I'm building a custom gutenberg block that should have a dropdown (SelectControl) to select which css class should be added to my block. So far, nothing special. My problem is that depending on the theme I'm using, the available classes change. So for ThemeA, the available classes are "test1, test2, test3" and for ThemeB "test2, test4". So how can my theme tell my block which classes are available? I'm thinking of a solution in which my theme forwards the classes to my block. But I can't find any hooks or other wordpress functions to inject data from my theme into my editor js frontend (into my SelectControl).

Variants are no option because the available classes change. I have a solution how to apply the classes to my block, I just don't know how the extend the SelectControl in the InspectorControls.

• php
• plugin-development
• theme-development
• javascript
• block-editor

Share Improve this question edited Oct 4, 2021 at 20:19 Jan-Cedric asked Oct 4, 2021 at 19:20 Jan-CedricJan-Cedric 11122 bronze badges 4

• what about the theme does it depend on? I notice there is no code in your question to debug or get context from can you include it? Do you have examples of the conditions you're trying to implement? Are you aware of block variations? What does your block do? Use the edit link under the tags to update your question and try to answer all the questions as well as your code and any extra context you can give to make your question answerable – Tom J Nowell ♦ Commented Oct 4, 2021 at 19:55
• @TomJNowell There is no code because I don't know the concept how to solve this. I don't want anybody to implement my feature, I need help to point me in the right direction. But I still updated the question to clarify my problem. – Jan-Cedric Commented Oct 4, 2021 at 20:14
• So you don't have a SelectControl? Are you sure block variations isn't the solution to your problem? E.g. all core embeds are core/embed, yet they show up with different UIs, names and icons in the inserter. The only difference between them is attribute values. The same with lots of other blocks, they're all the same block except their html class attribute is different – Tom J Nowell ♦ Commented Oct 4, 2021 at 22:11
• but also, when you say depending on something in the theme, you need to be more specific, because it matters. There are multiple directions to send you in, and depending on what you meant some of those directions are the wrong direction. What are you trying to implement that requires this? – Tom J Nowell ♦ Commented Oct 4, 2021 at 22:12

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can use wp_localize_script() to pass JavaScript variables to the editor:

$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
    )
);

Then in your edit function:

const classes = pbThemeBlocksVars.classes;

本文标签： phpHow to extend SelectControl with data from my theme