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

may i know which style of image you want to create from editor ? — Krishna Savani, Dec 03 '19 at 05:10
The image is created as an image block, using WordPress 5.0+ Gutenberg. It is being added in a page. — esd, Dec 04 '19 at 08:29
Oh ya that i know but you will see there are default and circle mask style but in your case which style of image you are applying? — Krishna Savani, Dec 04 '19 at 08:37
look at the link (https://prnt.sc/q5yrls) i have applied style as top triangle on image — Krishna Savani, Dec 04 '19 at 08:44
Right, I have removed the two default styles (Default & Circle Mask), and I trying to add a custom style ( 'retailResidential', 'weddingsEvents', or 'advertisingEditorial') which is set to default (i.e. user doesn't have to click on it, it is applied to an image when the image is created). — esd, Dec 04 '19 at 18:07
I am able to update the styles (remove styles, add styles) but having issues setting them/updating the styles to default when created new image blocks. — esd, Dec 04 '19 at 18:09
As mentioned in my original question - I have a select drop down field in the editor using the ACF plugin, when a user updates the dropdown select, JS picks up on the event, and updates the image style & default style, which is not updating. — esd, Dec 04 '19 at 18:14

score 2 · Answer 1 · answered Dec 05 '19 at 06:20

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!

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

1 Answers1