Givewp: design(gutenberg): give gutenberg block concept

[DevinWalker]

Issue Overview

Give needs to design how the Gutenberg block is going to look.

• [x] Determine UI/UX objectives
• [x] Design Gutenberg Concept
• [x] Iterate and agree

[kevinwhoffman]

Here's an idea of what a Give Donation Form block could look like in Gutenberg. The general idea is to adapt the existing functionality of the Shortcode Generator while capitalizing on the advantages that Gutenberg offers, such as real-time form previews.

Give Gutenberg Block Concept

In Gutenberg, the functionality of the existing Shortcode Generator can be split amongst the Block and the Inspector. I have demonstrated how this Block/Inspector combination can work below.

Default Block Appearance

Block Appearance After Form Selection

Controls

Block Controls

• Select a Give Donation Form... (select)

Inspector Controls

• Presentation (panel)
  
  
  
  • Format (select)
    
    
    
    
    
    • Full Form (option)
    
    
    
    • Modal (option)
    
    
    
    • Reveal (option)
    
    
    
    • One-button Launch (option)
    
    
    
  
  
• Form Components (panel)
  
  
  
  • Show Title (toggle)
  
  
  • Show Goal (toggle)
  
  
  • Form Content (toggle)
  
  
  • Content Position (radio - only appears if Form Content === On)
    
    
    
    
    
    • Above Fields
    
    
    
    • Below Fields
    
    
    
  
  

Questions

• How does the user change the selected form after the initial selection?
  
  
  
  • Maybe there's a button that clears the selected form similar to how image alignment is handled. So the form is cleared but the block returns to its default state.
  
  
• How does the user edit the form fields beyond what is available in the inspector?
  
  
  
  • Maybe there is a link to open the form editor, but it asks you to save changes first. I think we should avoid multiple browser tabs if possible.
  
  

[mathetos]

Note that to have full parity with our existing shortcode, we'll also need this:

• Presentation (panel)
  
  
  
  • Format (select)
    
    
    
    
    
    • Reveal (option)
      
      
      
      
      
      
      
      • Continue Text (text input) _Only appears if "Reveal" is chosen_
      
      
      
      
    
    
    
  
  

Ref: https://givewp.com/documentation/core/shortcodes/give_form/

[PareshRadadiya]

I just wanted to show the progress done so far on Gutenberg Donation Form Block.

Here is the screencast of Donation Form Block: http://recordit.co/myIknPX61I

The Donation Form Block embed the form preview base on the parameters selected in Block Control panel. The embedding technique to preview the form will ensure consistent preview as there might have been add-on plugins which would have been hooking custom fields in the donation from. The Form Preview will get refreshed to show new preview each time when user change the form settings from the Block Control panel.

[DevinWalker]

Looks great @PareshRadadiya

[DevinWalker]

I just updated this issue to be more design focused and part of the larger epic of creating our first Gutenberg block. As we've completed the design process I'm closing it out.