內容簡介
總結：Circle Progress Bar Block 是一個現代的 Gutenberg 區塊外掛程式，可將美麗的圓形進度指示器加入到您的 WordPress 網站中。非常適合以視覺上吸引人的方式顯示進度、統計或指標。
問題與答案：
1. 這是一個什麼樣的 WordPress 外掛程式？
- 答案：Circle Progress Bar Block 是一個現代的 Gutenberg 區塊外掛程式，可將美麗的圓形進度指示器加入到您的 WordPress 網站中。
2. 這個外掛程式的主要來源碼在哪裡？
- 答案：主要源碼位於 src/index.js，這是用於該區塊的完整 React 源碼。
3. 這個外掛程式如何進行編譯？
- 答案：使用標準 WordPress 工具進行編譯：@wordpress/scripts 用於開發和構建、Webpack 用於模組打包、Babel 用於現代 JavaScript 兼容性。
4. 如何從源代碼進行構建？
- 答案：首先複製 GitHub 倉庫，安裝依賴項，再啟動開發伺服器進行即時重新加載，或建立生產版本。
5. 這個外掛程式提供了哪些自訂功能？
- 答案：提供完全可定制的設計，可以調整圓形大小和筆劃寬度，設置進度槓、背景和文字的顏色，啟用/停用漸變效果，添加自定義文字等。
外掛標籤
開發者團隊
原文外掛簡介
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.
Source Code
All uncompiled source code is included in this plugin. The production code in build/index.js is compiled from:
Main Source File
Located at src/index.js, this is the complete React source code for the block:
`javascript
import { registerBlockType } from ‘@wordpress/blocks’;
import { InspectorControls } from ‘@wordpress/block-editor’;
import {
PanelBody,
RangeControl,
ColorPicker,
TextControl,
SelectControl,
} from ‘@wordpress/components’;
registerBlockType(‘circle-progress-bar/progress’, {
title: ‘Circle Progress Bar’,
icon: ‘chart-pie’,
category: ‘widgets’,
description: ‘A customizable circle progress bar.’,
keywords: [‘progress’, ‘circle’, ‘chart’],
supports: { html: false },
attributes: {
percentage: { type: ‘number’, default: 75 },
size: { type: ‘number’, default: 100 },
strokeColor: { type: ‘string’, default: ‘#00aaff’ },
bgColor: { type: ‘string’, default: ‘#e6e6e6’ },
text: { type: ‘string’, default: ‘Progress’ },
useShadow: { type: ‘boolean’, default: false },
useGradient: { type: ‘boolean’, default: false },
strokeWidth: { type: ‘number’, default: 10 },
fontSize: { type: ‘number’, default: 20 },
fontColor: { type: ‘string’, default: ‘#333’ }
},
// Full source code available in src/index.js
// See GitHub repository for complete implementation
});
Build Tools
The production code is generated using standard WordPress tools:
* @wordpress/scripts – For development and build
* Webpack – For module bundling
* Babel – For modern JavaScript compatibility
Building from Source
The source is in src/index.js
Build tools are configured in package.json
To compile:
bash
npm install
npm run build
Output goes to build/index.js
Directory Structure
To work with the source code:
1. Clone the GitHub repository: https://github.com/jqsafi/circle-progress-bar
2. Install dependencies: npm install
3. Start development server: npm start
4. Build production version: npm run build
Features
Fully Customizable Design
Adjustable circle size and stroke width
Custom colors for progress bar, background, and text
Optional gradient effects
Configurable font size and text
Shadow effects available
Block Editor Integration
Easy to use block controls
Live preview in editor
Works with Full Site Editing (FSE)
Multiple instances support
Performance Optimized
Lightweight SVG-based rendering
No external dependencies
Optimized for modern browsers
Usage
Basic Configuration
After adding the block, set your desired percentage (0-100) in the block settings panel
Customize the appearance:
Change circle size using the “Size” slider
Adjust stroke width using the “Thickness” slider
Set colors for the progress bar, background, and text
Enable/disable gradient effect
Add custom text above or below the percentage
Advanced Features
Shadow Effects: Enable and customize shadow effects in the “Effects” panel
Text Options: Configure font size, weight, and position
Development
The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:
GitHub Repository: https://github.com/jqsafi/circle-progress-bar
Building from Source
Clone the repository
Install dependencies:
npm install
For development with live reload:
npm start
For production build:
npm run build
The plugin uses the following build tools:
* @wordpress/scripts for development and build processes
* webpack for bundling
* Babel for JavaScript transpilation
* ESLint and Prettier for code formatting
Source files are located in:
* src/ – Uncompiled JavaScript source code
* build/ – Compiled and minified production code
