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

Question

I am trying to extend a gutenberg block. I have a color picker for my tab content background. At the moment, i can pick and change the background color on the backend, and it saves (refresh pa and keeps color).

What i am struggling to do, is to get this tag to show up in the frontend. Currently, this only works in the backend. What am i missing?

import { BlockEdit } from "@wordpress/block-editor";
const { __ } = wp.i18n;
const { createHigherOrderComponent } = wp.compose;
const { InspectorControls, PanelColorSettings } = wp.blockEditor || wp.editor;
const { PanelBody } = wp.components;
const { Fragment } = wp.element;

const enableBackgroundColorOnContent = [
    'ub/tabbed-content-block'
];

const addTabContentAttributes = (settings, name) => {
    if (!enableBackgroundColorOnContent.includes(name)) {
        return settings;
    } else {
        settings.attributes = Object.assign(settings.attributes, {
            contentBackgroundColor: {
                type: 'string',
                default: '#ffffff' // Set default background color to white
            }
        });
    }
    return settings;
};

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'bt/tab-content-custom-attribute',
    addTabContentAttributes
);

const addContentBackgroundColorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const { attributes, setAttributes } = props;
        if (!enableBackgroundColorOnContent.includes(props.name)) {
            return (
                <BlockEdit {...props} />
            );
        }

        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody title={__('Content Background Color')}>
                        <PanelColorSettings
                            title={__('Content Background Color')}
                            colorSettings={[
                                {
                                    value: attributes.contentBackgroundColor,
                                    onChange: (contentBackgroundColor) => setAttributes({ contentBackgroundColor }),
                                    label: __('Background color')
                                },
                            ]}
                        />
                    </PanelBody>
                </InspectorControls>
                <style> {`.wp-block-ub-tabbed-content-tabs-content {background-color: ${attributes.contentBackgroundColor};}`} </style>
            
            </Fragment>
        );
    };
}, 'addContentBackgroundColorControl');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'bt/custom-tabbed-content-bg-color',
    addContentBackgroundColorControl
);```

Answer 1

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.