I have a block with some settings that affect the editor only. So not the output. The issue is that when I change these settings, the output doesn't change. Then Wordpress does not detect the change, and does not trigger the "update" button. Next time I open the post the changes to my block-level settings are gone, because they were not saved.

Can I manually trigger the update button from my block?

code

import Edit from "./components/edit/edit"
import PreviewInEditor from "./components/edit/editor-preview";
import BlockSettings from "./components/block-settings/BlockSettings";
import { useBlockProps } from '@wordpress/block-editor';

export default function Editor( props ) {

    function update_settings( settings ) {
        props.setAttributes( { ...props.attributes, settings } );
    }

    if( props.isSelected || props.attributes.price_records.length === 0 ) {
        return ( <div { ...useBlockProps() }>
            <Edit {...props} /> 
            <BlockSettings settings={props.attributes.settings} onChange={update_settings} />
        </div> );
    } else {
        return ( <div { ...useBlockProps() }>
            <PreviewInEditor {...props} />
            <BlockSettings settings={props.attributes.settings} onChange={update_settings} />
        </div>);
    }

}

I have a block with some settings that affect the editor only. So not the output. The issue is that when I change these settings, the output doesn't change. Then Wordpress does not detect the change, and does not trigger the "update" button. Next time I open the post the changes to my block-level settings are gone, because they were not saved.

Can I manually trigger the update button from my block?

code

import Edit from "./components/edit/edit"
import PreviewInEditor from "./components/edit/editor-preview";
import BlockSettings from "./components/block-settings/BlockSettings";
import { useBlockProps } from '@wordpress/block-editor';

export default function Editor( props ) {

    function update_settings( settings ) {
        props.setAttributes( { ...props.attributes, settings } );
    }

    if( props.isSelected || props.attributes.price_records.length === 0 ) {
        return ( <div { ...useBlockProps() }>
            <Edit {...props} /> 
            <BlockSettings settings={props.attributes.settings} onChange={update_settings} />
        </div> );
    } else {
        return ( <div { ...useBlockProps() }>
            <PreviewInEditor {...props} />
            <BlockSettings settings={props.attributes.settings} onChange={update_settings} />
        </div>);
    }

}

• plugin-development
• block-editor

• It looks like you've hidden the important parts of your code, and it's unclear how the Editor component is used in your question. If your block has attributes that have changed then that on its own is enough, even if you don't use those attributes in your save component. Remember, there are server rendered blocks that have null as their save component. I would also strongly advise against storing objects in an attribute, this is an anti-pattern, and bad practice, and likely the root cause of your problem – Tom J Nowell ♦ Commented Mar 17, 2022 at 22:44
• @Tom J Nowell Where would you recommend storing editor settings for a block then? Separate attributes? ( that's gonna be unorganised imo ) – Rob Monhemius Commented Mar 18, 2022 at 5:53
• there's not enough information or context to say, you've shared nothing about what these settings are or what they do, or how they're implemented, the only clues are that they're stored in an object, involve some form of async, and exist in a blackbox component called BlockSettings, you need to provide more information, right now everything is so abstract it's difficult to even talk about it. It may even be the case that block attributes don't make sense for this but there's so little context to go on I can't advise. The only thing I can say is flatten out your hierarchy – Tom J Nowell ♦ Commented Mar 18, 2022 at 14:32

1 Answer 1

Actually an assumption I made in the question was wrong; The update button doesn't only change when the output of the save function changes. It also changes when the attributes are changed.

However I found a small bug, which you can't really see it in the provided code. In my BlockSettings component I was using useState to update the settings inside to the component. I would also emit the settings immidiately after assigning them.

useState is however an async function. So in fact I was emitting the old value. Since I emitted the old value the attributes were identical to the values before. Therefore not triggering an update.

The fix was quite easy. Using useEffect to react on the changed value did the trick for me.

So if the update button isn't triggering, doublecheck if you actually changed the attributes.