Justin Tadlock

<p>X3P0: Progress is a block that allows users to create progress bars using a straightforward interface.</p>
<p>The block lets you add progress for nearly any type of goal:</p>
<ul>
<li><strong>Percentage:</strong> Outputs a percentage from 0% to 100%.</li>
<li><strong>Decimal:</strong> Outputs a plain decimal number.</li>
<li><strong>Currency:</strong> Create financial progress bars, choosing from a list of worldwide currencies.</li>
<li><strong>Unit:</strong> Choose from a complete list of browser-supported units, such as yards, feet, liters, millimeters, and much more.</li>
</ul>
<p>The output of the progress bar is highly customizable.  Aside from standard block options, such as spacing, alignment, and border control, users also have a range of design tools at their disposal.</p>
<p>This block outputs proper <code><progress></code> and <code><label></code> elements in the markup.  This should aid in accessibility, ensuring that all potential visitors to your site can read what the value of the progress is.</p>
<p>You can find the full source code for this plugin via its <a href="https://github.com/x3p0-dev/x3p0-progress" rel="nofollow ugc">GitHub repository</a>.</p>


X3P0: Progress

A customizable progress bar block to visually track completion toward any percentage, numeric, financial, or unit-based goal.

Shafayat Hossain

<p>Circle Progress Bar Block is a modern Gutenberg block plugin that adds beautiful circular progress indicators to your WordPress site. Perfect for displaying progress, statistics, or metrics in a visually appealing way.</p>
<h3>Source Code</h3>
<p>All uncompiled source code is included in this plugin. The production code in <code>build/index.js</code> is compiled from:</p>
<h4>Main Source File</h4>
<p>Located at <code>src/index.js</code>, this is the complete React source code for the block:</p>
<pre><code>`javascript
</code></pre>
<p>import { registerBlockType } from ‘@wordpress/blocks’;<br />
import { InspectorControls } from ‘@wordpress/block-editor’;<br />
import {<br />
    PanelBody,<br />
    RangeControl,<br />
    ColorPicker,<br />
    TextControl,<br />
    SelectControl,<br />
} from ‘@wordpress/components’;</p>
<p>registerBlockType(‘circle-progress-bar/progress’, {<br />
    title: ‘Circle Progress Bar’,<br />
    icon: ‘chart-pie’,<br />
    category: ‘widgets’,<br />
    description: ‘A customizable circle progress bar.’,<br />
    keywords: [‘progress’, ‘circle’, ‘chart’],<br />
    supports: { html: false },<br />
    attributes: {<br />
        percentage: { type: ‘number’, default: 75 },<br />
        size: { type: ‘number’, default: 100 },<br />
        strokeColor: { type: ‘string’, default: ‘#00aaff’ },<br />
        bgColor: { type: ‘string’, default: ‘#e6e6e6’ },<br />
        text: { type: ‘string’, default: ‘Progress’ },<br />
        useShadow: { type: ‘boolean’, default: false },<br />
        useGradient: { type: ‘boolean’, default: false },<br />
        strokeWidth: { type: ‘number’, default: 10 },<br />
        fontSize: { type: ‘number’, default: 20 },<br />
        fontColor: { type: ‘string’, default: ‘#333’ }<br />
    },</p>
<pre><code>// Full source code available in src/index.js
// See GitHub repository for complete implementation
</code></pre>
<p>});<br />
    <code></code></p>
<h4>Build Tools</h4>
<p>The production code is generated using standard WordPress tools:<br />
* <code>@wordpress/scripts</code> – For development and build<br />
* Webpack – For module bundling<br />
* Babel – For modern JavaScript compatibility</p>
<h4>Building from Source</h4>
<ol>
<li>The source is in <code>src/index.js</code></li>
<li>Build tools are configured in <code>package.json</code></li>
<li>To compile:<br />
   <code>bash<br />
npm install<br />
npm run build</code></li>
<li>Output goes to <code>build/index.js</code></li>
</ol>
<h4>Directory Structure</h4>
<p>To work with the source code:<br />
1. Clone the GitHub repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a><br />
2. Install dependencies: <code>npm install</code><br />
3. Start development server: <code>npm start</code><br />
4. Build production version: <code>npm run build</code></p>
<h4>Features</h4>
<ul>
<li>
<p><strong>Fully Customizable Design</strong></p>
<ul>
<li>Adjustable circle size and stroke width</li>
<li>Custom colors for progress bar, background, and text</li>
<li>Optional gradient effects</li>
<li>Configurable font size and text</li>
<li>Shadow effects available</li>
</ul>
</li>
<li>
<p><strong>Block Editor Integration</strong></p>
<ul>
<li>Easy to use block controls</li>
<li>Live preview in editor</li>
<li>Works with Full Site Editing (FSE)</li>
<li>Multiple instances support</li>
</ul>
</li>
<li>
<p><strong>Performance Optimized</strong></p>
<ul>
<li>Lightweight SVG-based rendering</li>
<li>No external dependencies</li>
<li>Optimized for modern browsers</li>
</ul>
</li>
</ul>
<h3>Usage</h3>
<h4>Basic Configuration</h4>
<ol>
<li>After adding the block, set your desired percentage (0-100) in the block settings panel</li>
<li>Customize the appearance:
<ul>
<li>Change circle size using the “Size” slider</li>
<li>Adjust stroke width using the “Thickness” slider</li>
<li>Set colors for the progress bar, background, and text</li>
<li>Enable/disable gradient effect</li>
<li>Add custom text above or below the percentage</li>
</ul>
</li>
</ol>
<h4>Advanced Features</h4>
<ul>
<li><strong>Shadow Effects</strong>: Enable and customize shadow effects in the “Effects” panel</li>
<li><strong>Text Options</strong>: Configure font size, weight, and position</li>
</ul>
<h3>Development</h3>
<p>The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:</p>
<ul>
<li>GitHub Repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a></li>
</ul>
<h4>Building from Source</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies:<br />
   <code>npm install</code></li>
<li>For development with live reload:<br />
   <code>npm start</code></li>
<li>For production build:<br />
   <code>npm run build</code></li>
</ol>
<p>The plugin uses the following build tools:<br />
* @wordpress/scripts for development and build processes<br />
* webpack for bundling<br />
* Babel for JavaScript transpilation<br />
* ESLint and Prettier for code formatting</p>
<p>Source files are located in:<br />
* <code>src/</code> – Uncompiled JavaScript source code<br />
* <code>build/</code> – Compiled and minified production code</p>


Circle Progress Bar Block

A customizable circle progress bar Gutenberg block for displaying progress, statistics, or metrics in a visually appealing way.

X3P0: Progress vs Circle Progress Bar Block