Copy/Paste Style only applies to Desktop — mobile and tablet styles are not copied

[devmohsin]

Description

When using the Copy Style / Paste Style toolbar feature in Spectra, only the desktop styles are copied and pasted. Styles set for mobile and tablet breakpoints are silently ignored. Users must manually re-apply styles for each device breakpoint, defeating the purpose of the copy/paste style feature.

Steps to Reproduce

1. Start from a clean WordPress page with the Gutenberg editor open.
2. Add a Text block (or any block with per-device styling options).
3. Apply distinct styles on Desktop (e.g., font size 24px, colour red).
4. Switch to Mobile breakpoint and apply different styles (e.g., font size 14px, colour blue).
5. Select the block, open the Spectra toolbar, and click Copy Style.
6. Add a second Text block to the page.
7. Select the new block, open the Spectra toolbar, and click Paste Style.
8. Switch to the Mobile breakpoint on the second block.

Expected Behaviour

All styles — including those set for Desktop, Tablet, and Mobile breakpoints — are copied and pasted to the target block.

Actual Behaviour

Only Desktop styles are pasted. Mobile and Tablet styles are not transferred. The second block shows default/empty values for non-desktop breakpoints.

Possible Root Cause

Spectra stores responsive styles as separate block attributes with device-specific suffixes — e.g., fontSize (desktop), fontSizeMobile, fontSizeTablet. The copy/paste implementation likely:

• Reads only the base (unsuffixed) attribute keys, missing *Mobile and *Tablet variants, or
• Filters attributes against a hardcoded whitelist that was never updated to include responsive suffixes, or
• Serialises only the currently active breakpoint's values at the moment "Copy Style" is clicked, discarding the others.

The fix would be to ensure the attribute snapshot captured during Copy Style includes all keys matching *Mobile and *Tablet suffixes (or whatever naming convention Spectra uses internally for responsive attributes).

Test Cases

#	Scenario	Expected	Pass/Fail
TC-1	Copy/paste styles between two identical blocks with only Desktop styles set	Desktop styles applied correctly
TC-2	Copy/paste styles where Desktop + Mobile styles are set	Both Desktop and Mobile styles applied
TC-3	Copy/paste styles where Desktop + Tablet + Mobile styles are all set	All three breakpoints applied correctly
TC-4	Copy style on Desktop breakpoint view, paste while on Mobile view	All breakpoints still transferred correctly
TC-5	Source block has Mobile styles set but Desktop left at default	Mobile styles copied; Desktop remains default on target
TC-6	Paste styles onto a block of the same type but different content	Only styles applied, content unchanged
TC-7	Paste styles onto a different block type (e.g., Text → Heading)	Shared style attributes applied; non-applicable ones ignored gracefully
TC-8	Copy/paste with nested blocks (e.g., inside a Container)	Styles on the selected block only are transferred; children unaffected
TC-9	Undo after paste	Block reverts to its original styles across all breakpoints
TC-10	Copy style → save/reload page → paste style	Copied styles persist across page reload and paste correctly

Environment

Detail	Value
Spectra Version	3.0.0-beta.2
WordPress Version	6.9.4
PHP Version	8.4
Browser	All browsers (confirmed cross-browser)

Impact

Medium-High — affects all users who use Copy/Paste Style on responsive layouts. Workaround requires manually re-setting styles per breakpoint, which negates the feature's utility.

References

• Screencast: https://d.pr/v/IB8ZAO
• Support Ticket: https://help.brainstormforce.com/conversation/1378525?folder_id=3150