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

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


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!