BUG: Can't set background:none in mobile version using styles panel

[ronaldohoch]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Edge last version

Reproducible demo link

https://grapesjs.com/demo

Describe the bug

How to reproduce the bug?

1. Open demo link
2. Click on Header
   
3. Change view to mobile or tablet.
4. Try to remove background from header.

What is the expected behavior?
That editor set header with background:none

@media (max-width: 480px){
  .header-banner{
    background:none;
  }
}

What is the current behavior?
GrapesJS inherit from the ‘desktop’ version, so it's impossible to remove background from mobile version.

It happens using 'background' stack version and 'background-image' alone version.

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

not a bug but a missing feature, we'll need to extend the stack type with a new configuration for "empty" values.
I'll try to bring it in the next version.

[gustavohleal]

I've inserted a solution for the stack type. I'm going to make a PR but I would like to ask you something first. The behavior i'm adding is:

• the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.
• the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.

This is the behavior i'm applying to our version of the grapes. If you think that this should be de standard behavior i can make the PR later
What do you say?

[artf]

the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.

Correct

the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.

I'm not sure if that's exactly what I have in mind but the idea is to make it work as it is but with an additional logic, when I remove the last layer, I'll apply the new property, if exists (eg. emptyValue).

That is a possible property type

emptyValue?: string | () => PropValues;

In the case of string

emptyValue: 'unset',

I'll update the style target properties with that value { background-image: unset, background-size: unset, ... }

Or I can decide to generate the style properties directly (in case of more advanced usage)

emptyValue: () => ({
 'background-image': 'unset',
 'background-size': 'other value', 
 // ...
}),