New Block: Implement progress bar block #68652
Draft
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.
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?
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast