How to update styles in Style Manager
Noticed that in general when you update styles for a component through code they do not reflect in the Styles Manager until you deselect and reselect the component and I can't find anything in the docs about refreshing the Styles Manager. As a workaround you can use: In your case @Ju99ernaut no Check here on why you w...
Read full answer below ↓Question
Hello. I created custom component where I set backgraound-image via custom asset manager Custom block code:
domc.addType('image-block', {
extend: 'default',
model: {
defaults() {
return {
name: 'Background image',
type: 'image-block',
tagName: 'div',
void: false,
droppable: true,
};
},
},
view: {
init() {
this.listenTo(this.model, 'change:src', this.updateImage);
},
events: {
dblclick: 'onActive',
},
onActive() {
editor.runCommand('open-assets');
},
updateImage(model, url) {
if (url) {
const style = model.getStyle();
model.setStyle({
'background-image': style['background-color'] || `url("${url}")`,
'background-size': style['background-size'] || 'cover',
'background-position':
style['background-position'] || 'center center',
'background-repeat': style['background-repeat'] || 'no-repeat',
'min-height': style['min-height'] || '200px',
});
}
},
},
isComponent(el) {
if (el.dataset && el.dataset.type === 'image-block') {
return { type: 'image-block' };
}
},
});
Command which I run to set new image:
cmd.add('set-image-url', {
run(editor, sender, { url }) {
const target = editor.getSelected();
target.set('src', url);
},
});
It is working fine, image sets. But background property in Styles Manager doesn't update after image set.
How can I update background property in style manager?
Answers (3)
Noticed that in general when you update styles for a component through code they do not reflect in the Styles Manager until you deselect and reselect the component and I can't find anything in the docs about refreshing the Styles Manager.
As a workaround you can use:
editor.selectToggle(model);
editor.select(model);
In your case
domc.addType('image-block', {
//...
view: {
//...
updateImage(model, url) {
if (url) {
const style = model.getStyle();
model.setStyle({
'background-image': style['background-color'] || `url("${url}")`,
'background-size': style['background-size'] || 'cover',
'background-position':
style['background-position'] || 'center center',
'background-repeat': style['background-repeat'] || 'no-repeat',
'min-height': style['min-height'] || '200px',
});
editor.selectToggle(model);
editor.select(model);
}
},
},
//...
});
@Ju99ernaut no
Check here on why you would want to use a custom css parser if you're gonna be setting some styles outside of the Styles Manager
Here #2728 they use:
component.addStyle({ 'background-image': `url('${url}')` })
My guess is that background image is not updating because the src attribute is set instead of the background-image style property.
@Ju99ernaut thanks for advice but unfortunately it didn't worked. Also I noticed that properties like background-size or background-repeat also not reflected properly in Style Manager although it is set for selected component.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2697
[QUESTION] Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Issue #2696
[QUESTION]: How can I create block with background image with behavior like built-in "image"?
Hello, I'm trying to create block with background image (similar to Grapedrop Image Box). I added new component like this: And also I added...
Issue #2359
Absolute mode, component's style missing when dragged into canvas
Hi guys, I'm working with grapesjs which version is '0.15.8', and in 'absolute' mode when I drag a block into canvas, I find the styles of...
Issue #2103
[QUESTION] Custom Component dragging issue
This is how I've created a custom component: This is my custom block: The thing is that I have wrapped the image tag inside <a> tag when it...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.