[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fm89y28qhdXJifwsdE8J104cEurSflXx8EKXuYvcHRTg":3},{"slug":4,"display_name":5,"profile_url":6,"plugin_count":7,"total_installs":8,"avg_security_score":9,"avg_patch_time_days":10,"trust_score":11,"computed_at":12,"plugins":13},"jqsafi","Shafayat Hossain","https:\u002F\u002Fprofiles.wordpress.org\u002Fjqsafi\u002F",1,20,100,30,94,"2026-04-05T18:59:27.578Z",[14],{"slug":15,"name":16,"version":17,"author":5,"author_profile":6,"description":18,"short_description":19,"active_installs":8,"downloaded":20,"rating":21,"num_ratings":21,"last_updated":22,"tested_up_to":23,"requires_at_least":24,"requires_php":25,"tags":26,"homepage":32,"download_link":33,"security_score":9,"vuln_count":21,"unpatched_count":21,"last_vuln_date":34,"fetched_at":35},"circle-progress-bar-shafayat-hossain","Circle Progress Bar Block","1.0.0","\u003Cp>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.\u003C\u002Fp>\n\u003Ch3>Source Code\u003C\u002Fh3>\n\u003Cp>All uncompiled source code is included in this plugin. The production code in \u003Ccode>build\u002Findex.js\u003C\u002Fcode> is compiled from:\u003C\u002Fp>\n\u003Ch4>Main Source File\u003C\u002Fh4>\n\u003Cp>Located at \u003Ccode>src\u002Findex.js\u003C\u002Fcode>, this is the complete React source code for the block:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>`javascript\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>import { registerBlockType } from ‘@wordpress\u002Fblocks’;\u003Cbr \u002F>\nimport { InspectorControls } from ‘@wordpress\u002Fblock-editor’;\u003Cbr \u002F>\nimport {\u003Cbr \u002F>\n    PanelBody,\u003Cbr \u002F>\n    RangeControl,\u003Cbr \u002F>\n    ColorPicker,\u003Cbr \u002F>\n    TextControl,\u003Cbr \u002F>\n    SelectControl,\u003Cbr \u002F>\n} from ‘@wordpress\u002Fcomponents’;\u003C\u002Fp>\n\u003Cp>registerBlockType(‘circle-progress-bar\u002Fprogress’, {\u003Cbr \u002F>\n    title: ‘Circle Progress Bar’,\u003Cbr \u002F>\n    icon: ‘chart-pie’,\u003Cbr \u002F>\n    category: ‘widgets’,\u003Cbr \u002F>\n    description: ‘A customizable circle progress bar.’,\u003Cbr \u002F>\n    keywords: [‘progress’, ‘circle’, ‘chart’],\u003Cbr \u002F>\n    supports: { html: false },\u003Cbr \u002F>\n    attributes: {\u003Cbr \u002F>\n        percentage: { type: ‘number’, default: 75 },\u003Cbr \u002F>\n        size: { type: ‘number’, default: 100 },\u003Cbr \u002F>\n        strokeColor: { type: ‘string’, default: ‘#00aaff’ },\u003Cbr \u002F>\n        bgColor: { type: ‘string’, default: ‘#e6e6e6’ },\u003Cbr \u002F>\n        text: { type: ‘string’, default: ‘Progress’ },\u003Cbr \u002F>\n        useShadow: { type: ‘boolean’, default: false },\u003Cbr \u002F>\n        useGradient: { type: ‘boolean’, default: false },\u003Cbr \u002F>\n        strokeWidth: { type: ‘number’, default: 10 },\u003Cbr \u002F>\n        fontSize: { type: ‘number’, default: 20 },\u003Cbr \u002F>\n        fontColor: { type: ‘string’, default: ‘#333’ }\u003Cbr \u002F>\n    },\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F Full source code available in src\u002Findex.js\n\u002F\u002F See GitHub repository for complete implementation\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>});\u003Cbr \u002F>\n    \u003Ccode>\u003C\u002Fcode>\u003C\u002Fp>\n\u003Ch4>Build Tools\u003C\u002Fh4>\n\u003Cp>The production code is generated using standard WordPress tools:\u003Cbr \u002F>\n* \u003Ccode>@wordpress\u002Fscripts\u003C\u002Fcode> – For development and build\u003Cbr \u002F>\n* Webpack – For module bundling\u003Cbr \u002F>\n* Babel – For modern JavaScript compatibility\u003C\u002Fp>\n\u003Ch4>Building from Source\u003C\u002Fh4>\n\u003Col>\n\u003Cli>The source is in \u003Ccode>src\u002Findex.js\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Build tools are configured in \u003Ccode>package.json\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>To compile:\u003Cbr \u002F>\n   \u003Ccode>bash\u003Cbr \u002F>\nnpm install\u003Cbr \u002F>\nnpm run build\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Output goes to \u003Ccode>build\u002Findex.js\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>Directory Structure\u003C\u002Fh4>\n\u003Cp>To work with the source code:\u003Cbr \u002F>\n1. Clone the GitHub repository: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjqsafi\u002Fcircle-progress-bar\" rel=\"nofollow ugc\">https:\u002F\u002Fgithub.com\u002Fjqsafi\u002Fcircle-progress-bar\u003C\u002Fa>\u003Cbr \u002F>\n2. Install dependencies: \u003Ccode>npm install\u003C\u002Fcode>\u003Cbr \u002F>\n3. Start development server: \u003Ccode>npm start\u003C\u002Fcode>\u003Cbr \u002F>\n4. Build production version: \u003Ccode>npm run build\u003C\u002Fcode>\u003C\u002Fp>\n\u003Ch4>Features\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>Fully Customizable Design\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Adjustable circle size and stroke width\u003C\u002Fli>\n\u003Cli>Custom colors for progress bar, background, and text\u003C\u002Fli>\n\u003Cli>Optional gradient effects\u003C\u002Fli>\n\u003Cli>Configurable font size and text\u003C\u002Fli>\n\u003Cli>Shadow effects available\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Cstrong>Block Editor Integration\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Easy to use block controls\u003C\u002Fli>\n\u003Cli>Live preview in editor\u003C\u002Fli>\n\u003Cli>Works with Full Site Editing (FSE)\u003C\u002Fli>\n\u003Cli>Multiple instances support\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Cstrong>Performance Optimized\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Lightweight SVG-based rendering\u003C\u002Fli>\n\u003Cli>No external dependencies\u003C\u002Fli>\n\u003Cli>Optimized for modern browsers\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Usage\u003C\u002Fh3>\n\u003Ch4>Basic Configuration\u003C\u002Fh4>\n\u003Col>\n\u003Cli>After adding the block, set your desired percentage (0-100) in the block settings panel\u003C\u002Fli>\n\u003Cli>Customize the appearance:\n\u003Cul>\n\u003Cli>Change circle size using the “Size” slider\u003C\u002Fli>\n\u003Cli>Adjust stroke width using the “Thickness” slider\u003C\u002Fli>\n\u003Cli>Set colors for the progress bar, background, and text\u003C\u002Fli>\n\u003Cli>Enable\u002Fdisable gradient effect\u003C\u002Fli>\n\u003Cli>Add custom text above or below the percentage\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>Advanced Features\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Shadow Effects\u003C\u002Fstrong>: Enable and customize shadow effects in the “Effects” panel\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Text Options\u003C\u002Fstrong>: Configure font size, weight, and position\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Development\u003C\u002Fh3>\n\u003Cp>The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>GitHub Repository: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjqsafi\u002Fcircle-progress-bar\" rel=\"nofollow ugc\">https:\u002F\u002Fgithub.com\u002Fjqsafi\u002Fcircle-progress-bar\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>Building from Source\u003C\u002Fh4>\n\u003Col>\n\u003Cli>Clone the repository\u003C\u002Fli>\n\u003Cli>Install dependencies:\u003Cbr \u002F>\n   \u003Ccode>npm install\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>For development with live reload:\u003Cbr \u002F>\n   \u003Ccode>npm start\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>For production build:\u003Cbr \u002F>\n   \u003Ccode>npm run build\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>The plugin uses the following build tools:\u003Cbr \u002F>\n* @wordpress\u002Fscripts for development and build processes\u003Cbr \u002F>\n* webpack for bundling\u003Cbr \u002F>\n* Babel for JavaScript transpilation\u003Cbr \u002F>\n* ESLint and Prettier for code formatting\u003C\u002Fp>\n\u003Cp>Source files are located in:\u003Cbr \u002F>\n* \u003Ccode>src\u002F\u003C\u002Fcode> – Uncompiled JavaScript source code\u003Cbr \u002F>\n* \u003Ccode>build\u002F\u003C\u002Fcode> – Compiled and minified production code\u003C\u002Fp>\n","A customizable circle progress bar Gutenberg block for displaying progress, statistics, or metrics in a visually appealing way.",486,0,"2025-05-21T20:38:00.000Z","6.8.5","6.0","7.4",[27,28,29,30,31],"block-editor","circle","gutenberg","progress","progress-bar","","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fcircle-progress-bar-shafayat-hossain.1.0.0.zip",null,"2026-03-15T15:16:48.613Z"]