0

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
);```
3
  • if you only change the edit component, then only the edit component will change! Remember the edit component only exists inside the editor in the browser, nowhere else. That includes WP Admin/frontend. It's the save component that gets saved as static HTML to the database, and it's also very likely that what you're trying to do might cripple the block by making it no longer pass block validation
    – Tom J Nowell
    Mar 16, 2023 at 15:03
  • you're also reinventing global styles background setting. If you change the settings part of the blocks definition to enable backgrounds, core itself will provide a background colour control for you and APIs in theme.json to override it as well as the palette of colours that are available, gradients, control over wether arbitrary colours can be picked, etc etc. Nevermind that this can be done with composition/building blocks using a group block with a background colour and zero block gap/spacing
    – Tom J Nowell
    Mar 16, 2023 at 15:04
  • Also note that if this can't be done using purely generic WP JS then you'll need to contact the Ultimate blocks plugin for help with their blocks, 3rd party plugin dev support questions are off-topic here and not in this stacks scope.
    – Tom J Nowell
    Mar 16, 2023 at 15:06

1 Answer 1

2

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:

enter image description here

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.

2
  • note that while I did write this answer, the Ultimate Blocks plugin is offtopic here, and I can't provide any help with that. If your question can't be answered without modifying that block or knowing things about that block then the question is probably offtopic and not appropriate in this stack
    – Tom J Nowell
    Mar 16, 2023 at 15:19
  • You can as well use register_block_type_args filter to change block supports settings
    – Lovor
    Mar 19, 2023 at 23:03

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.