feat(grid): display multiple forms in a grid

[DevinWalker]

Issue Overview

We should have a [donation_form_grid] shortcode that display donation forms in a nice layout:

Grid Element Explanation

Shortcode Attributes

• number: Default = 3
• goal (if applicable): Default = true
• excerpt: Default = true
• featured_image : Default = true

Acceptance Criteria

• Grid should fill full width of container
• Grid should be responsive
• Grid should have minimal conflict with themes

Tasks

• Design Grid
• Develop Shortcode
• Implement CSS Grid
• Test with Popular Themes (Avada, Divi, X, etc)
• Documentation

[mathetos]

This sounds like an Add-on to me, not a Core feature.

[DevinWalker]

Nope, not to me.

[mathetos]

@DevinWalker I think there's overlap here with issue #1230

What do you think of moving this issue to be a feature of #1230 Basically, the [give_forms] shortcode proposed in #1230 could have a display_style attribute as follows:

• [give_forms id="all" display_style="grid"]
• [give_forms id="5,6,7" display_style="list"]

[Benunc]

Adding a "category" or "tag" parameter to this shortcode would be powerful, as well. Users have requested this. (one today)

[khan19]

Hello,

Are these shortcodes ready to use? I have used them on Avada theme. It didn't work.

Thanks,
Mazhar

[ravinderk]

@khan19 We are working on this and it will work on next release (1.8.15).

[khan19]

Alright, Thank you :) Good wishes for next release!

[mehul0810]

@DevinWalker I've tried to build the [donation_form_grid] shortcode. But, It seems that with current structure of donation forms. It will require to break lots of code related to donation forms and duplication of code as well.
Also, If we build it now then we need to test the main functionality donation form as well and refactoring the donation forms and the shortcodes again when we release the Form API (i.e. #1038).

I had the discussion for the same with @ravinderk and came to a conclusion that we should bump this issue after Form API so that we can work systematically with out any break and duplication of code.

Even, I've saved the WIP for this issue so that I can re-use it again. (Ref: https://github.com/mehul0810/Give/tree/issue/1414)

Let me know your thoughts.

[DevinWalker]

@mehul0810 I was thinking that rather than loading the structure of the donation form within each grid item that you could simply create your own structure and the "Donate Now" button would either:

A. Load the donation form in a modal via AJAX
B. Take the donor to the single donation form page

This will allow you to control the markup of the grid within the shortcode and you wouldn't be tied to the form structure. Let me know what you think and we can discuss.

[raftaar1191]

I also think the same @DevinWalker

We can create our own structure than redirecting link to the single page this sounds good and simple too I guess.

[amjad]

I think the modal popup may not work very well on mobile devices. Its better to have it redirect to its own page. This is definitely a missing feature! Pretty sure many users have multiple forms and it gets hard not being able to show them all in one page in this nice grid layout. We have several clients already waiting for this feature!

What's the status on this?

[mehul0810]

We can create a Gutenberg block for this shortcode and we can add the shortcode attributes in the presentation layout of Gutenberg which can be helpful for end user as discussed with @DevinWalker over call on Friday.

[raftaar1191]

yes @mehul0810 but there will be other user as well who are not going to install the Gutenberg as there default editor

[ravinderk]

@Sidsector9 Can you recreate a pr for this issue because the last pr merged into WordImpress:feature/gutenberg-donation-form-block which is Gutenberg block specific which is not a priority for 2.1.

[amjad]

will this be a part of 2.1 ?

[ravinderk]

@amjad Yes.
If you need more information about 2.1 release planning then you can check this link: https://github.com/WordImpress/Give/wiki/Give-Release-Planning

[amjad]

Awesome, thanks!

[kevinwhoffman]

@Sidsector9 After discussing with @DevinWalker, I am going to work with you to get CSS Grid implemented in the Donation Form Grid prior to release. We want to make sure CSS Grid is our grid solution moving forward.

[Sidsector9]

@kevinwhoffman Are we focusing to implement Grid for just Donation Form Grid or the entire Give plugin?

[kevinwhoffman]

Closing in favor of #2943 which picks up where this issue left off.