X3P0: Progress

WordPress block for outputting awesome progress bars.

Theme Support

I am a theme author at heart, so I love seeing plugins and themes working together to do awesome stuff. This also means that I want to make this plugin as extendable as possible so that I can do cool stuff with my own themes.

Settings (theme.json)

Aside from the normal block-related settings that you can define, the block has a few additional custom settings. You can adjust some custom block variables via the settings.x3p0/progress key. The following is an example usage of each:

{
	"settings": {
		"custom": {
			"x3p0/progress": {
				"color": {
					"background": "var(--wp--preset--color--secondary)",
					"foreground": "var(--wp--preset--color--primary)"
				},
				"height": "1.5rem",
				"justifyLabel": "space-between"
			}
		}
	}
}

If the background and foreground colors are not defined in theme.json, the block will fall back to reasonable defaults using CSS custom properties:

• Background: var(--wp--preset--color--secondary, var(--wp--preset--color--pale-cyan-blue))
• Foreground: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue))

Styles (theme.json)

The block supports the full array of design tools available, so you can also style these just like most other Core WordPress blocks via styles.blocks.x3p0/progress in theme.json. Here's an example from my own theme:

{
	"styles": {
		"blocks": {
			"x3p0/progress": {
				"css": "&.is-layout-flex { gap: var(--wp--preset--spacing--20); }",
				"color": {
					"background": "transparent",
					"text": "var(--wp--custom--color--foreground--default)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--sm)",
					"lineHeight": "var(--wp--custom--line-height--sm)"
				}
			}
		}
	}
}

Note that spacing.blockGap doesn't work as of WordPress 6.8, which is why it's defined via the css field.

Custom Block Stylesheet

An alternative to the theme.json method (or in addition to), you can load a block-specific stylesheet and work with plain ol' CSS. Here's an example of loading a themeslug/public/css/blocks/x3p0-progress.css stylesheet:

add_action('init', function() {
	wp_enqueue_block_style('x3p0/progress', [
		'handle' => 'themeslug-block-x3p0-progress',
		'src'    => get_theme_file_uri('public/css/blocks/x3p0-progress.css'),
		'path'   => get_theme_file_path('public/css/blocks/x3p0-progress.css')
	]);
});

And some CSS to overwrite the default custom CSS properties:

.wp-block-x3p0-progress {
	--x3p0-progress--height: 1.5rem;
	--x3p0-progress--justify-label: left;
	--x3p0-progress--color--background: #eeeeee;
	--x3p0-progress--color--foreground: #000000;
}

Of course, you have full access to the plugin's style rules, so feel free to look at how the default stylesheet is structured. I'd warn against changing anything other than default cosmetics and breaking the user's expected use of the plugin.

Copyright and License

X3P0: Progress is licensed under the GNU GPL, version 2 or later.

2022-2025 © Justin Tadlock.