How do i get an Inline style in Gutenberg Block show up in front end?

The code you’re trying to fix only changes the edit component and attributes, the edit component is just the UI in the editor. To make changes to the frontend you’d have to modify the save component, or filter the block via the block rendering filters.

But that’s all pointless because you’re trying to reinvent global styles background controls:

So why not use that? Instead of adding an attribute, and writing a UI for it, just tell WP it supports background colours:

const addBackgroundSupport = (settings, name) => {
    if ( enableBackgroundColorOnContent.includes( 'ub/tabbed-content-block' ) ) {
        settings.supports.color.background = true;
    }

    return settings;
};

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'bt/tab-content-background',
    addBackgroundSupport
);

Because this is reusing global styles, Core may even insert the background colour for you if the block uses useBlockProps correctly. If it doesn’t you should raise an issue with the plugin vendor.

Related Posts: