Add "Clear All Local Styles" button for Atomic Elements

[ridwan-shakil]

Describe the Problem

Currently, when a user applies multiple local styles (margins, padding, typography, colors, etc.) and later decides to switch to a Global Class-based workflow, they must manually reset every single modified property one by one. This creates a significant bottleneck when cleaning up designs to move toward a scalable CSS architecture.

Propose a Solution

Add a Clear Style option within the dropdown menu located at:

  Path: Widget Settings > Style > Local > [More Options Dropdown]

Key Features:

• One-Click Reset: Instantly removes all CSS properties defined in the "Local" styling tab for that specific element.

• Targeted Action: Specifically targets local overrides without affecting styles inherited from Global Classes or Site Settings.

• Workflow Efficiency: Eliminates the need to manually find and click the "back to default" icon for 10+ different settings individually.

Additional Context

User Experience Impact:

"Right now, if I change my mind and want to use a class for styling instead of local tweaks, I have to spend minutes clicking through tabs to clear values. A 'Clear Style' button would turn a 2-minute chore into a 2-second task."

Benefits :

• Cleaner Code: Encourages users to use Global Classes by making the transition from local styling easier.

• Faster Prototyping: Designers can experiment locally and wipe the slate clean instantly if the experiment fails.

• Consistency: Reduces the risk of "ghost styles" (accidentally leaving one local property active) that conflict with new classes.

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.

[alexanderpankart]

That's a good one :D