Can I use Javascript to update a default class in the Wordpress Editor?

Question

In the WordPress Gutenberg Editor, I am trying to programmatically set a default class on an image block, which is applied without the user manually adding it via the 'Additional CSS' field.

I have tried applying a default style on image blocks, which works initially -

wp.blocks.registerBlockStyle( 'core/image', {
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
});

But I need to update this default class after a user changes a field on a custom dropdown. When this dropdown is changed, I am unregistering the block style, then registering a new default block style - but it has no effect for additionally created images (does not create an image with the updated default style, still uses the old).

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

Does the editor need to be refreshed after updating the default image block style? or is there an alternative, better way of doing this?

reference for updating block styles

Answer 1

I have Worked on Your Requirements for that I have done Below things: I am working on twenty-twenty theme

1) In javascript file editor-script-block.js

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'circle-mask' );
} );

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
} );

wp.domReady(function(){
     wp.blocks.registerBlockStyle( 'core/image', {
        name: 'retailResidential',
        label: 'Retail & Residential',

      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'weddingsEvents',
        label: 'Wedding & Events',
      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'advertisingEditorial',
        label: 'Advertising & Editorial'

      });
});

Now I am giving some style css to image like i want to add top triangle over image to "retailResidential" style see image here(https://prnt.sc/q6esxq) for that i have to apply css for back-end and front-end also because there are different classes applying so

Admin side

<style>
.is-style-retailResidential >div > div.components-resizable-box__container:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}
</style>

Fornt-end Side

<style>
.is-style-retailResidential{
    position: relative;
}
.is-style-retailResidential:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}

</style>

For setting style is as default you have used Custom Field Plugin but wordpress Already giving option see here(https://prnt.sc/q6ew4k) I have set default style as "Retail & Residential" and its working as you want

still i am uploading video please check here

let me know if anything i misunderstood things!