Spacing is cleared when editing block styles

[g-elwell]

Expected Behavior

When navigating through the UI and editing different styles, no changes should be made unless specifically updated by a user.

Actual Behavior

When navigating to a block with spacing set in the theme.json, the styles update to clear the spacing.

Step-by-step reproduction instructions

1. Set theme to Twenty Twenty Four
2. Activate Themer
3. Go to Appearance > Styles Editor
4. Navigate to Blocks > Quote
5. Notice the quote block will update to remove existing spacing values

Screenshots, screen recordings, code snippets

This is noticeable in the visual preview from #111 and less obvious when viewing the 'code preview'. However, note that the original spacing in theme.json is:

"spacing": {
  "padding": {
    "bottom": "calc(var(--wp--preset--spacing--30) + 0.75rem)",
    "left": "calc(var(--wp--preset--spacing--30) + 0.75rem)",
    "right": "calc(var(--wp--preset--spacing--30) + 0.75rem)",
    "top": "calc(var(--wp--preset--spacing--30) + 0.75rem)"
  }
},

But when navigating to the Quote block, the styles will show:

"spacing": {
  "padding": {
    "bottom": "0px",
    "left": "0px",
    "right": "0px",
    "top": "0px"
  }
}

Screen.Capture.on.2024-10-02.at.09-32-17.mp4

[g-elwell]

It's likely this is due to the component failing to parse the original value, perhaps due to use of calc or var. As well as (or instead of?) fixing this instance, we should prevent the value from updating when the parsing has failed, or we could unexpectedly hit this issue again.

[jordanharris-6]

I've been looking into this for a bit and I thought I would update the issue with where im at. Seems to happen in this part of ThemerComponent.js http://bigbite.im/i/GZ74va

It does this wierd thing where on the last 2 renders of the load it sets the object to 0px 0px 0px 0px when the values its merging are not like that. I haven't been able to work out why its doing that yet but I will continue looking into it.