Feature: allow required blocks to move between sections

[JasonTheAdams]

Description

Forms have a number of blocks/fields that are required for the form to function — e.g. donation amount and email. The primary way we've enforced this is to put a lock on the required blocks. This has a couple of flaws:

1. Locked blocks can't be moved out of their parent block, meaning moving these blocks between sections wasn't possible
2. The user can unlock blocks anyway, allowing them to delete the block... making this a moot point

We also have a validation system on the server which checks that the required blocks are present when saving. It's simply not likely that folks will remove things like the name and amount field, which means we're creating friction to do something relatively likely (move blocks between sections) for something unlikely that's prevented another way.

This PR removes the locks on the required fields, allowing them to move freely. It also updates the server error flow to display a Gutenberg model instead of an alert, giving a nicer experience.

Affects

The required blocks and the block validation system.

Visuals

Testing Instructions

Move the required blocks around the form builder. Then delete one and try to save. Finally, add it back and attempt to save, making sure it can recover from an error state.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1205608290013527

[JasonTheAdams]

@jonwaldstein This is ready for review!

[jdghinson]

@JasonTheAdams Looks good. Let's add the error icon to the header text like the image below to emphasize on it being an error.

Suggestion: Can we also have a cta like "add missing blocks" instead of "Got it" which automatically adds the block to their original/intended position?

[jonwaldstein]

@JasonTheAdams i'm getting a bunch of typescript errors on this PR when running npm run dev. is this happening for you?

[JasonTheAdams]

@JasonTheAdams Looks good. Let's add the error icon to the header text like the image below to emphasize on it being an error.

All set!

Suggestion: Can we also have a cta like "add missing blocks" instead of "Got it" which automatically adds the block to their original/intended position?

I like the idea of this, but I think it's a bit beyond the scope of this right now. This is also an unlikely scenario. We can improve this later.

[JasonTheAdams]

@JasonTheAdams i'm getting a bunch of typescript errors on this PR when running npm run dev. is this happening for you?

Yikes, yeah, you're right @jonwaldstein. None of these have anything to do with what I'm doing, though. Must be from a previous PR. It's weird that these only show up when you run npm run dev and not npm run watc:v3. 😕

[jonwaldstein]

@JasonTheAdams i'm getting a bunch of typescript errors on this PR when running npm run dev. is this happening for you?

Yikes, yeah, you're right @jonwaldstein. None of these have anything to do with what I'm doing, though. Must be from a previous PR. It's weird that these only show up when you run npm run dev and not npm run watc:v3. 😕

yeah, it's something I need to look into but basically laravel mix will prevent bundle from typescript errors while wp scripts ignores them.

[jdghinson]

Looks good

[JasonTheAdams]

Any other feedback, @jonwaldstein, besides the console errors unrelated to this PR?

[jonwaldstein]

Any other feedback, @jonwaldstein, besides the console errors unrelated to this PR?

@JasonTheAdams i'm only getting these build errors on this PR - not develop so that should be resolved before merging

[rickalday]

Passed manual QA tests.