0

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.

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
    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
    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
    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
    Oct 4, 2021 at 22:12

1 Answer 1

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.