php wordpress web wordpress-theming wordpress-gutenberg

How to use get_theme_mod in gutenberg editor wordpress?

In my old WordPress themes (before Gutenberg) I used get_theme_mod to get custom values for certain things in the theme.

get_theme_mod( 'news_custom_headline' );

Now I would like to use the gutenberg editor, however still want to access data from the customizer. How can I do something like this:

save({ attributes }) {
   return <p>Value from backend: get_theme_mod( 'news_custom_headline' ) </p>;
}

Solution

You don't do that like this. I got it working with a server side rendered block:

In my index.js:

registerBlockType('test/custom-php-render-block', {
    title: "Custom Block Server Side Rendering", 
    category: 'widgets',
    edit: () => { return <p>This is just a placeholder!</p>},
    save: () => { return null }
});

In functions.php:

function register_my_custom_block() {
    wp_register_script( 'custom-block-php-script', get_template_directory_uri() . '/build/index.js', array('wp-blocks', 'wp-editor'));
    wp_enqueue_script('custom-block-php-script');

    register_block_type('test/custom-php-render-block', [
        'editor_script' => 'custom-block-php-script',
        'render_callback' => 'custom_block_php-render'
    ]);
}

add_action( 'init', 'register_my_custom_block');

function custom_block_php-render($attr, $content) {
    return '<p>From customizer: ' . get_theme_mod('your-setting') . '</p>';
}