Button Color thru separate color button/color picker

[censonalvin]

Hello, would like to ask how can I achieve to change all the buttons that is on the canvas or a button block that is on the canvas by using a color picker (not on the Style manager) ? I tried using a simple JavaScript/jQuery but it only changes on the editor side (where the block is before putting it on the canvas.). Thanks in advance

[nguyenvoanhkhoa1]

You can add class to wrapper to change all the button style:

const wrapperId = editor.getWrapper()?.ccid;
editor.Css.setRule(`#${wrapperId} button`, {
  "background-color": red,
  "border-color": #fff,
});

[censonalvin]

this is not working for me. might because of my grapes version which is 0.19.5/4 or how we use the grapesjs.

this is how i add my button block

and this is what i tried so far but not change on the canvas. it only changes the button that we created on the editor and not what we put on the canvas

[nguyenvoanhkhoa1]

Your code only select and add style to existed button. You should add CSS for the button tag.

const buttonStyle = `button { background-color: #007bff; color: #fff; padding: 10px 20px; border: none; cursor: pointer; }`;
new MutationObserver(
  () => (document.head.appendChild(document.createElement("style")).textContent = buttonStyle)
).observe(document.body, { childList: true });

[censonalvin]

I tried that but nothing happening. i forgot to mention that i only use the html input type color.