In Style Manager, Allow Requiring the Default Setting

Hi @anlumo, did you try to extend float definition with something like this requires: { position: ['static'] }?

Yes. It seems to work fine after reloading the page, but when you toggle the position it stops working and looks like in the screenshot.

The definition is as follows:

{
    name: "Layout",
    open: false,
    buildProps: ['position', 'top', 'bottom', 'left', 'right', 'float'],
    properties: [
        {
            name: "Position",
            property: 'position',
            type: 'radio',
            list: [
                { value: 'static' },
                { value: 'absolute' },
                { value: 'relative' },
            ],
            defaults: 'static',
        },
        {
            property: 'top',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'bottom',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'left',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'right',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            name: "Float",
            property: 'float',
            type: 'radio',
            list: [
                { value: 'none' },
                { value: 'left' },
                { value: 'right' },
            ],
            requires: { position: ['static'], },
        },
    ],
}

Thanks for reporting this, @anlumo.

Great suggestion about FEAT: In Style Manager, Allow Requiring the Default Setting! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.