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!