fix: improve block styling and usability

[kevinwhoffman]

Bug Report

User Story

As a WordPress 5.0 user, I want Give blocks to function without error and reflect the appearance of their front end counterparts so that the editor represents an accurate preview of the end result.

Current Behavior

The following unresolved issues with Gutenberg:

• Form block: PHP notices appear when a form block is inserted due to a lack of default attribute values.
• Form block: There is no bottom margin between the form select box and button.
• Form block: Tooltip icons appear in italics.
• Form block: Hover controls overflow outside the block.
• Form block: "Edit Form" hover control should remain white, instead of turning black, when hovered.
• Form block: Clicking "Edit Form" redirects to the WP login screen, not the form editor.
• Form block: Content does not render
• Form block: radio buttons are squished due to block component styles
• Form Grid block: The presence of this blocks breaks front-end content, prevents the donation form block from rendering correctly, and does not render anything within the grid.
• Donor Wall block: Toggling the "Donor with Comment" option causes the block to refresh but it never stops spinning until the setting is disabled.

Expected Behavior

The above issues have been resolved. The blocks render without error and accurately reflect their appearance on the front end.

Bug Type

• This bug describes functionality that once worked as expected in version X.X.X.
• This bug describes functionality that never worked as expected.
• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Install Give 2.3.0
2. Install WordPress 5.0 RC3 using the Beta Tester plugin with bleeding nightlies enabled
3. Create a Give form with goal and content
4. Create a few more forms
5. Create some test donations
6. Create new page and insert the Give blocks
7. Adjust the block settings and preview on front end to verify they appear as expected

Visuals

Related

• fix: ensure Give blocks are compatible with latest Gutenberg #3813

Acceptance Criteria

• Blocks can be placed and saved without causing PHP notices.
• A bottom margin has been added to the form select control.
• Tooltips do not appear in italics.
• Hover controls do not overflow outside of the block.
• Radio buttons within a form are not squished.
• "Edit Form" remains white when hovered.
• Clicking "Edit Form" takes the user to the form editor, not the WP login screen.
• The Form block does not spin upon initialization.
• Form content renders when the block setting is enabled (be sure to add content to form first).
• The Form Grid block renders on the front end without breaking other blocks.
• The Donor Wall block's "Donor with Comment" does not cause the block to load endlessly.
• After Clicking on Edit Form Once the "Edit Form" button will need to remain white.

[DevinWalker]

I checked and the blocks look good for the initial release. We will improve the styling and functionality further in future iterations.