How to use IgnitionDeck Project & Grid Blocks

The IgnitionDeck plugin comes with 2 blocks for the WordPress Gutenberg editor: a Featured Project block and a Project Grid block. Both of these blocks can be found by searching for "IgnitionDeck" in the blocks editor.

The blocks can be used on Pages, Posts, and other areas that are block enabled. Multiple blocks can also be used on the same page or post.

Featured Project Block

This is a great way to showcase a single project on the homepage or highlight a project in each project category. The block will display the project title, featured image, short description, meta data (project goal, progress, etc.), a button to the project, as well as social media links.

The image can be set to appear on the right or left side of the block with the text appearing on the opposite side. The text and buttons can be custom coloured.

To use the block:

1. Locate and select the "Featured Project" block by searching for "IgnitionDeck". Searching by "featured" or "project" also works. A blank block will be placed on the page.
2. Select the project you want to display from the Select Project drop menu in the sidebar:
3. The project will be inserted into the block preview with the default appearance. 
4. Select the Color Settings drop down to change the color of the block content items. There are 5 areas that can be customize: Title, Description, Button, Button Text, and Meta.
5. Set the image appearance to right or left under the Layout Settings drop menu
6. Repeat steps 1-5 for any additional projects to be displayed on the page.
7. Publish and enjoy!

Project Grid Block

The Project Grid block can be used to create a custom home page sorting projects into specialized sections, creating filtered project category pages, creating a page to showcase successful or ongoing projects. 

The grid will display the project title, featured image, short description, meta data (project goal, progress, etc.), project owner, a button to the project, project category, days remaining, as well as success/failure flags. The grid can be customized to show from 1 to 6 columns and can be set to a fixed number of projects or to display all of your projects at once. The grid supports custom color options, as well as the ability to toggle on/off various elements. 

To use the block:

1. Locate and select the "Featured Project" block by searching for "IgnitionDeck". Searching by "grid" or "project" also works. A blank grid block will be placed on the page.
2. Select the project status for the projects you wish to display. There are four (4) options:
   1. All—every project on the site regardless of whether the project is open/closed, met its goal, or has failed.
   2. Active—only projects that are currently open to accept pledges
   3. Successful—projects that have met their funding goal. These projects can also be open/closed.
   4. Failed—projects that have not met their funding goal.
3. Next, optionally filter the project grid by the Project Category (set up in Projects » Project Category).
4. Set the number of columns to appear in the grid. Grid supports between 1 and 6 columns.
5. Set the number of projects to display in the grid. There are two options available: All projects or a slider that will accept up to 50 projects. Multiples of the number of columns is a good rule of thumb for a pleasing layout (i.e. displaying 16 projects in 4 columns creates 4 even rows):Caution! Displaying all project can cause the page to load slowly if there are hundreds of projects on the site.
6. Set the size of the project titles using the heading level menu. The headings will use the site/theme default styles for font and sizing.
7. Additional options to hide/display project elements can be set including Show Excerpt (project short description), Show Image (project featured image), and Show Badges (success/failure flags)
8. Finally, select the Color Settings drop down to change the color of the block content items. There are 6 areas that can be customize: Title, Description, Project bar, Category Tag, Badge, and Meta.

Additionally, all elements are assigned a class that can be targeted with CSS to hide individual elements on a project by project basis. For example, if all active, open-ended projects were being displayed but you didn't wish to show the number of days remaining (0 days on on-going projects), you could hide that meta element with the following CSS:

/* HIDE DAYS REMAINING */
.idcf-grid-projects-block-single-info-days {
    display: none;
}

This can be further targeted by identifying individual projects:

/* HIDE DAYS REMAINING ON PROJECT 5 */
.idcf-grid-projects-block-single-5 .idcf-grid-projects-block-single-info-days {
     display: none; 
}