Progress Bar

bar. The fill is capped at 100% even when the raised amount exceeds the goal. The bar color is a gradient taken from the global Appearance settings, not from the block’s own attributes.

When placed inside a Query Loop, the block resolves the post ID from the loop context automatically.

How to use it

1. Open the page or template where you want to show the progress bar.
2. Add the Progress Bar block from the Fundations category.
3. In the block inspector, set the bar height and corner radius if needed.
4. To change the bar color, go to Settings > Fundations > Appearance and update the progress color fields there.
5. Save the page.

Settings and options

Option	Type	Default	Description
Height	number	30	Bar height in pixels
Border radius	number	0	Corner rounding in pixels
Post ID override	number	0	Force a specific post ID (advanced use)

Bar colors are set globally, not per block. Go to Settings > Fundations > Appearance to change:

Setting key	Description
get_fund_progress_color	Gradient start color
get_fund_progress_color_end	Gradient end color
get_fund_progress_bg_color	Unfilled track background color

What you can and cannot do

• You can control height and border radius per block instance.
• You cannot set the bar fill color per block. Colors apply globally to all progress bars on the site.
• The bar cannot exceed 100% fill even if more than the goal was raised.
• The block shows nothing meaningful on pages that are not action pages unless demo mode is active or a post ID override is set.

Examples

Archive grid card: Place the block inside a Query Loop card template to show a progress bar for each action in a grid.

Donation sidebar: Add the bar at the top of a sidebar pattern alongside the Raised Amount and Goal Amount blocks.

Troubleshooting

Bar does not appear or shows 0%: Confirm the page is an action page (get_fund_action post type) or that a valid post ID override is set. Also check that a goal amount is set on the action — if the goal is 0 the percentage cannot be calculated.

Bar color does not change after updating block: Bar colors are global. Change them at Settings > Fundations > Appearance, not in the block editor.

Bar shows sample data on a non-action page: Demo mode is active. Disable it at Settings > Fundations > General.

Developer reference

Output filter

apply_filters(
    'get_fund_progress_block_output',
    string $output,
    array  $fund_data,
    array  $attributes,
    int    $post_id
);

Parameter	Type	Description
$output	string	Full block HTML
$fund_data	array	Keys: amount, raised_amount, actual_raised, offset, status, is_expired, percentage, post_id, end_date, days_remaining, title
$attributes	array	Block attributes
$post_id	int	Resolved post ID

Example: add a custom label below the bar

add_filter( 'get_fund_progress_block_output', function( $output, $fund_data, $attributes, $post_id ) {
    $label = sprintf(
        '<p class="my-progress-label">%d%% funded</p>',
        (int) $fund_data['percentage']
    );
    return $output . $label;
}, 10, 4 );