New Block: Implement progress bar block #68652
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Infinite-Null
changed the title
Infinite-Null
changed the title
Mamaduka
added
[Type] Enhancement
- Introduced default attributes for `backgroundColor`, `progressColor`, `height`, and `showValue`. - Added a `height` attribute to control the height of the progress bar dynamically. - Added a `showValue` toggle to display the progress percentage. - Replaced `TextControl` with `RichText` for the `label` attribute, enabling inline editing. - Adjusted styles for better flexibility and customization. - Updated `edit.js` and `save.js` to handle new attributes and functionality. - Refactored progress bar rendering logic for cleaner output.
- Replaced `PanelBody` with `ToolsPanel` and `ToolsPanelItem` for settings organization. - Added `resetAll` functionality to `ToolsPanel` for resetting all attributes to default values. - Integrated `useToolsPanelDropdownMenuProps` for dropdown menu support. - Refactored individual settings (`value`, `max`, `height`, `showValue`) into `ToolsPanelItem` components with better attribute handling. - Improved UI and UX for configuring the Progress Bar block in the editor.
- Updated the Progress Bar block to use a custom `progressBar` icon from the WordPress icons library instead of the `home` icon. - Added the `progressBar` icon to the icons library for consistent usage. - Adjusted the block metadata to reference the new icon, enhancing visual representation in the editor.
- Simplified inline styles for the Progress Bar block to improve maintainability: - Removed unnecessary `overflow`, `position`, and `transition` properties from `progressBarStyle` and `progressStyle`. - Updated structural styles for better compatibility and readability. - Removed redundant inline `div` styles in the block's markup for a cleaner layout. - Integrated a dedicated SCSS file (`progress-bar/style.scss`) for the Progress Bar block: - Ensures consistent styling across the block. - Facilitates easier future modifications by consolidating styles into a central location. - Updated `style.scss` to include the newly created `progress-bar/style.scss` file.
- Registered the `Progress Bar` block in `lib/blocks.php` to ensure proper loading and functionality within the block editor. - Refactored the save logic for the Progress Bar block: - Simplified `progressBarStyle` and `progressStyle` by removing redundant CSS properties (`overflow`, `position`, `height`, and `transition`). - Updated the block's markup to streamline structure and remove unnecessary `div` styles for better performance and maintainability. - Ensured the output HTML remains lightweight and optimized for frontend rendering.
Added a new "read progress" mode to the Progress Bar block that allows it to function as a reading progress indicator. Key changes included: * Added isReadProgress attribute with default false * Added toggle control in the editor UI * Updated block rendering for read progress mode * Added fixed positioning and scroll animation styles * Updated save component to handle read progress mode * Added grow-progress animation keyframes
- Introduced new attributes `symbol` and `symbolPosition` in the block's `block.json`. - Updated the block's edit component to include controls for customizing the value symbol and its position (prefix or suffix). - Updated the block's save logic to render the symbol based on the selected position. - Ensured backward compatibility by setting default values for `symbol` as `%` and `symbolPosition` as `suffix`.
Updates the maximum value field in the Progress Bar block from a RangeControl to NumberControl, allowing for more flexible value input. Also adjusts the minimum height constraint from 6px to 1px for finer control over bar appearance. Adds shift+arrow key support for increments of 10.
- Added option to show maximum value alongside current value - Added custom separator control with "/" as default - Made total value display respect symbol position setting - Conditionally rendered total value controls only when "Show value" is enabled - Added new block attributes: showTotal (boolean) and separator (string) - Refactored value formatting logic into a reusable function
- Moved read progress toggle to top level for better visibility - Grouped all value-related controls under a conditional block - Reorganized controls to show/hide based on read progress state
- Moved bar height control outside the conditional block to make it available for all progress bar types - Simplified "Progress bar height" label to "Bar height"
Infinite-Null
requested review from
spacedmonkey,
ajitbohra,
fabiankaegy,
juanmaguitar and
ndiego
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @mgozdis. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #34219
What?
Added a new Progress Bar block to WordPress block editor that allows users to display customizable progress indicators.
Why?
Progress bars are essential UI elements for showing completion status or data visualization. Adding this as a block gives WordPress users a native way to display progress metrics without relying on external plugins or custom code.
How?
Implemented a new block type with the following:
Testing Instructions
Test the following features:
use as read progressScreencast
Progress Bar:
Screen.Recording.2025-01-27.at.11.03.49.AM.mov
Use as read progress:
Screen.Recording.2025-01-27.at.11.06.47.AM.mov