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

design(gutenberg): give gutenberg block concept #2456

Closed
DevinWalker opened this Issue Dec 5, 2017 · 5 comments

Comments

Projects
None yet
5 participants
@DevinWalker
Member

DevinWalker commented Dec 5, 2017

Issue Overview

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

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

@DevinWalker DevinWalker added this to the 2.0.1 milestone Dec 5, 2017

@DevinWalker DevinWalker changed the title from Gutenberg: Create a donation form inert block to Gutenberg: Create a donation form block Dec 5, 2017

@kevinwhoffman

This comment has been minimized.

Show comment
Hide comment
@kevinwhoffman

kevinwhoffman Dec 13, 2017

Member

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

give-gutenberg-concept-v01

Block Appearance After Form Selection

give-gutenberg-concept-v02-after-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.
Member

kevinwhoffman commented Dec 13, 2017

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

give-gutenberg-concept-v01

Block Appearance After Form Selection

give-gutenberg-concept-v02-after-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

This comment has been minimized.

Show comment
Hide comment
@mathetos

mathetos Dec 14, 2017

Member

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/

Member

mathetos commented Dec 14, 2017

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/

@ravinderk ravinderk modified the milestones: 2.0.1, 2.0.2 Jan 22, 2018

@ravinderk ravinderk modified the milestones: 2.0.2, 2.0.3, 2.1 Jan 28, 2018

DevinWalker added a commit that referenced this issue Jan 30, 2018

Merge pull request #2741 from PareshRadadiya/new/feature/gutenberg-do…
…nation-form-block

Donation form preview fixes #2456
@PareshRadadiya

This comment has been minimized.

Show comment
Hide comment
@PareshRadadiya

PareshRadadiya Jan 30, 2018

Contributor

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.

Contributor

PareshRadadiya commented Jan 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@DevinWalker
Member

DevinWalker commented Jan 30, 2018

Looks great @PareshRadadiya

@DevinWalker DevinWalker modified the milestones: 2.1, Sprint 1 - Sequoia Mar 6, 2018

@DevinWalker DevinWalker added the Epic label Mar 8, 2018

@DevinWalker DevinWalker changed the title from Gutenberg: Create a donation form block to Give Gutenberg Block Concept Mar 9, 2018

@DevinWalker DevinWalker removed Epic labels Mar 9, 2018

@DevinWalker DevinWalker changed the title from Give Gutenberg Block Concept to design(gutenberg): give gutenberg block concept Mar 9, 2018

@DevinWalker

This comment has been minimized.

Show comment
Hide comment
@DevinWalker

DevinWalker Mar 9, 2018

Member

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.

Member

DevinWalker commented Mar 9, 2018

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.

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