New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improve block styling and usability #3887

kevinwhoffman opened this Issue Dec 4, 2018 · 1 comment


None yet
3 participants

kevinwhoffman commented Dec 4, 2018

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



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.

@kevinwhoffman kevinwhoffman self-assigned this Dec 4, 2018

@ravinderk ravinderk self-assigned this Dec 6, 2018

kevinwhoffman added a commit that referenced this issue Dec 12, 2018

Merge pull request #3888 from impress-org/issue/3887
fix: improve block styling and usability #3887

This comment has been minimized.


DevinWalker commented Dec 12, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment