From 2ae46a06247096d20cc52874eee004f82ec96808 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 14 Jan 2025 12:55:06 +0530 Subject: [PATCH 01/16] Implement meter progress block with basic controls --- docs/reference-guides/core-blocks.md | 9 ++ packages/block-library/src/index.js | 22 ++-- .../block-library/src/progress-bar/block.json | 34 +++++ .../block-library/src/progress-bar/edit.js | 118 ++++++++++++++++++ .../block-library/src/progress-bar/index.js | 30 +++++ .../block-library/src/progress-bar/init.js | 6 + .../block-library/src/progress-bar/save.js | 74 +++++++++++ 7 files changed, 283 insertions(+), 10 deletions(-) create mode 100644 packages/block-library/src/progress-bar/block.json create mode 100644 packages/block-library/src/progress-bar/edit.js create mode 100644 packages/block-library/src/progress-bar/index.js create mode 100644 packages/block-library/src/progress-bar/init.js create mode 100644 packages/block-library/src/progress-bar/save.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3b251813e41c0..28f25a040ea11 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -700,6 +700,15 @@ Add text that respects your spacing and tabs, and also allows styling. ([Source] - **Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) - **Attributes:** content +## Progress Bar + +Display a progress bar. Useful for tracking progress on a task or project. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/progress-bar)) + +- **Name:** core/progress-bar +- **Category:** design +- **Supports:** align, ~~html~~ +- **Attributes:** backgroundColor, label, max, progressColor, value + ## Pullquote Give special visual emphasis to a quote from your text. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/pullquote)) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 262f11de6ee22..0c25f6c0593c7 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -4,8 +4,8 @@ import { setDefaultBlockName, setFreeformContentHandlerName, - setUnregisteredTypeHandlerName, setGroupingBlockName, + setUnregisteredTypeHandlerName, } from '@wordpress/blocks'; /** @@ -21,17 +21,16 @@ import { // // See https://github.com/WordPress/gutenberg/pull/40655 for more context. import * as archives from './archives'; -import * as avatar from './avatar'; import * as audio from './audio'; +import * as avatar from './avatar'; +import * as reusableBlock from './block'; import * as button from './button'; import * as buttons from './buttons'; import * as calendar from './calendar'; import * as categories from './categories'; -import * as classic from './freeform'; import * as code from './code'; import * as column from './column'; import * as columns from './columns'; -import * as comments from './comments'; import * as commentAuthorAvatar from './comment-author-avatar'; import * as commentAuthorName from './comment-author-name'; import * as commentContent from './comment-content'; @@ -39,19 +38,22 @@ import * as commentDate from './comment-date'; import * as commentEditLink from './comment-edit-link'; import * as commentReplyLink from './comment-reply-link'; import * as commentTemplate from './comment-template'; -import * as commentsPaginationPrevious from './comments-pagination-previous'; +import * as comments from './comments'; import * as commentsPagination from './comments-pagination'; import * as commentsPaginationNext from './comments-pagination-next'; import * as commentsPaginationNumbers from './comments-pagination-numbers'; +import * as commentsPaginationPrevious from './comments-pagination-previous'; import * as commentsTitle from './comments-title'; import * as cover from './cover'; import * as details from './details'; import * as embed from './embed'; import * as file from './file'; +import * as footnotes from './footnotes'; import * as form from './form'; import * as formInput from './form-input'; -import * as formSubmitButton from './form-submit-button'; import * as formSubmissionNotification from './form-submission-notification'; +import * as formSubmitButton from './form-submit-button'; +import * as classic from './freeform'; import * as gallery from './gallery'; import * as group from './group'; import * as heading from './heading'; @@ -70,13 +72,13 @@ import * as navigation from './navigation'; import * as navigationLink from './navigation-link'; import * as navigationSubmenu from './navigation-submenu'; import * as nextpage from './nextpage'; -import * as pattern from './pattern'; import * as pageList from './page-list'; import * as pageListItem from './page-list-item'; import * as paragraph from './paragraph'; +import * as pattern from './pattern'; import * as postAuthor from './post-author'; -import * as postAuthorName from './post-author-name'; import * as postAuthorBiography from './post-author-biography'; +import * as postAuthorName from './post-author-name'; import * as postComment from './post-comment'; import * as postCommentsCount from './post-comments-count'; import * as postCommentsForm from './post-comments-form'; @@ -91,6 +93,7 @@ import * as postTerms from './post-terms'; import * as postTimeToRead from './post-time-to-read'; import * as postTitle from './post-title'; import * as preformatted from './preformatted'; +import * as progressBar from './progress-bar'; import * as pullquote from './pullquote'; import * as query from './query'; import * as queryNoResults from './query-no-results'; @@ -101,7 +104,6 @@ import * as queryPaginationPrevious from './query-pagination-previous'; import * as queryTitle from './query-title'; import * as queryTotal from './query-total'; import * as quote from './quote'; -import * as reusableBlock from './block'; import * as readMore from './read-more'; import * as rss from './rss'; import * as search from './search'; @@ -121,7 +123,6 @@ import * as termDescription from './term-description'; import * as textColumns from './text-columns'; import * as verse from './verse'; import * as video from './video'; -import * as footnotes from './footnotes'; import isBlockMetadataExperimental from './utils/is-block-metadata-experimental'; @@ -182,6 +183,7 @@ const getAllBlocks = () => { verse, video, footnotes, + progressBar, // theme blocks navigation, diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json new file mode 100644 index 0000000000000..2ae33f6952fd9 --- /dev/null +++ b/packages/block-library/src/progress-bar/block.json @@ -0,0 +1,34 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "core/progress-bar", + "category": "design", + "title": "Progress Bar", + "description": "Display a progress bar. Useful for tracking progress on a task or project.", + "textdomain": "default", + "attributes": { + "label": { + "type": "string", + "default": "Progress" + }, + "value": { + "type": "number", + "default": 50 + }, + "max": { + "type": "number", + "default": 100 + }, + "backgroundColor": { + "type": "string" + }, + "progressColor": { + "type": "string" + } + }, + "supports": { + "align": true, + "html": false + }, + "style": "wp-block-progress-bar" +} diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js new file mode 100644 index 0000000000000..87de1e437d52d --- /dev/null +++ b/packages/block-library/src/progress-bar/edit.js @@ -0,0 +1,118 @@ +/** + * WordPress dependencies + */ +import { + InspectorControls, + PanelColorSettings, + useBlockProps, +} from '@wordpress/block-editor'; +import { PanelBody, RangeControl, TextControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export default function Edit( { attributes, setAttributes } ) { + const { + label, + value, + max = 100, + backgroundColor, + progressColor, + } = attributes; + + const blockProps = useBlockProps( { + className: 'wp-block-progress-bar', + } ); + + // Custom styles for the progress bar + const progressBarStyle = { + backgroundColor: backgroundColor || '#f0f0f0', + borderRadius: '4px', + overflow: 'hidden', + height: '24px', + position: 'relative', + }; + + const progressStyle = { + backgroundColor: progressColor || '#4CAF50', + width: `${ ( value / max ) * 100 }%`, + height: '100%', + transition: 'width 0.3s ease', + }; + + return ( +
+ + + + setAttributes( { labelText } ) + } + /> + + setAttributes( { currentValue } ) + } + min={ 0 } + max={ max } + /> + + setAttributes( { maxValue } ) + } + min={ 1 } + max={ 1000 } + /> + + + setAttributes( { bgColor } ), + label: __( 'Background Color' ), + }, + { + value: progressColor, + onChange: ( progressBarColor ) => + setAttributes( { progressBarColor } ), + label: __( 'Progress Color' ), + }, + ] } + /> + + +
+ { label && ( +
+ { label } +
+ ) } +
+
+ + { value }% + +
+
+
+
+ ); +} diff --git a/packages/block-library/src/progress-bar/index.js b/packages/block-library/src/progress-bar/index.js new file mode 100644 index 0000000000000..8bd95626c5f86 --- /dev/null +++ b/packages/block-library/src/progress-bar/index.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { _x } from '@wordpress/i18n'; +import { home } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import initBlock from '../utils/init-block'; +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; + +export { metadata, name }; + +export const settings = { + icon: home, + edit, + save, + example: { + attributes: { + label: _x( 'Progress Bar', 'block example' ), + }, + }, +}; + +export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/progress-bar/init.js b/packages/block-library/src/progress-bar/init.js new file mode 100644 index 0000000000000..a7f22ef02d640 --- /dev/null +++ b/packages/block-library/src/progress-bar/init.js @@ -0,0 +1,6 @@ +/** + * Internal dependencies + */ +import { init } from '.'; + +export default init(); diff --git a/packages/block-library/src/progress-bar/save.js b/packages/block-library/src/progress-bar/save.js new file mode 100644 index 0000000000000..80fdf09e30627 --- /dev/null +++ b/packages/block-library/src/progress-bar/save.js @@ -0,0 +1,74 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { + label, + value, + max = 100, + backgroundColor, + progressColor, + } = attributes; + + const blockProps = useBlockProps.save( { + className: 'wp-block-progress-bar', + } ); + + // Calculate the percentage + const percentage = Math.min( Math.max( ( value / max ) * 100, 0 ), 100 ); + + // Custom styles for the progress bar + const progressBarStyle = { + backgroundColor: backgroundColor || '#f0f0f0', + borderRadius: '4px', + overflow: 'hidden', + height: '24px', + position: 'relative', + }; + + const progressStyle = { + backgroundColor: progressColor || '#4CAF50', + width: `${ percentage }%`, + height: '100%', + transition: 'width 0.3s ease', + }; + + return ( +
+
+ { label && ( +
+ { label } +
+ ) } +
+ +
+ + { percentage.toFixed( 1 ) }% + +
+ +
+
+
+ ); +} From 59c28db2aea863c5f084cde2ed58f9b6317cd9f1 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 14 Jan 2025 13:23:00 +0530 Subject: [PATCH 02/16] Fix: Correct attribute names in the Progress Bar block's edit component --- packages/block-library/src/progress-bar/edit.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 87de1e437d52d..df99950f0631b 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -48,7 +48,7 @@ export default function Edit( { attributes, setAttributes } ) { label={ __( 'Label' ) } value={ label || '' } onChange={ ( labelText ) => - setAttributes( { labelText } ) + setAttributes( { label: labelText } ) } /> - setAttributes( { currentValue } ) + setAttributes( { value: currentValue } ) } min={ 0 } max={ max } @@ -68,7 +68,7 @@ export default function Edit( { attributes, setAttributes } ) { label={ __( 'Maximum Value' ) } value={ max } onChange={ ( maxValue ) => - setAttributes( { maxValue } ) + setAttributes( { max: maxValue } ) } min={ 1 } max={ 1000 } @@ -80,13 +80,15 @@ export default function Edit( { attributes, setAttributes } ) { { value: backgroundColor, onChange: ( bgColor ) => - setAttributes( { bgColor } ), + setAttributes( { backgroundColor: bgColor } ), label: __( 'Background Color' ), }, { value: progressColor, onChange: ( progressBarColor ) => - setAttributes( { progressBarColor } ), + setAttributes( { + progressColor: progressBarColor, + } ), label: __( 'Progress Color' ), }, ] } From 33fe2b576aab39b49838ea5ed7eefb8c3c210f18 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 15 Jan 2025 11:13:51 +0530 Subject: [PATCH 03/16] Add enhancements to Progress Bar block - 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. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/progress-bar/block.json | 16 +++- .../block-library/src/progress-bar/edit.js | 73 ++++++++++++------- .../block-library/src/progress-bar/save.js | 60 +++++++-------- 4 files changed, 87 insertions(+), 64 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 28f25a040ea11..cf1ac06193d5a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou - **Name:** core/progress-bar - **Category:** design - **Supports:** align, ~~html~~ -- **Attributes:** backgroundColor, label, max, progressColor, value +- **Attributes:** backgroundColor, height, label, max, progressColor, showValue, value ## Pullquote diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json index 2ae33f6952fd9..f85da36eb184f 100644 --- a/packages/block-library/src/progress-bar/block.json +++ b/packages/block-library/src/progress-bar/block.json @@ -9,7 +9,7 @@ "attributes": { "label": { "type": "string", - "default": "Progress" + "default": "" }, "value": { "type": "number", @@ -20,10 +20,20 @@ "default": 100 }, "backgroundColor": { - "type": "string" + "type": "string", + "default": "#f0f0f0" }, "progressColor": { - "type": "string" + "type": "string", + "default": "#1E1E1E" + }, + "height": { + "type": "number", + "default": 11 + }, + "showValue": { + "type": "boolean", + "default": true } }, "supports": { diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index df99950f0631b..6e596a8cd1c8f 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -4,9 +4,10 @@ import { InspectorControls, PanelColorSettings, + RichText, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl, TextControl } from '@wordpress/components'; +import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; export default function Edit( { attributes, setAttributes } ) { @@ -16,23 +17,23 @@ export default function Edit( { attributes, setAttributes } ) { max = 100, backgroundColor, progressColor, + height, + showValue, } = attributes; const blockProps = useBlockProps( { className: 'wp-block-progress-bar', } ); - // Custom styles for the progress bar const progressBarStyle = { - backgroundColor: backgroundColor || '#f0f0f0', - borderRadius: '4px', + backgroundColor, overflow: 'hidden', - height: '24px', + height: `${ height }px`, position: 'relative', }; const progressStyle = { - backgroundColor: progressColor || '#4CAF50', + backgroundColor: progressColor, width: `${ ( value / max ) * 100 }%`, height: '100%', transition: 'width 0.3s ease', @@ -42,15 +43,6 @@ export default function Edit( { attributes, setAttributes } ) {
- - setAttributes( { label: labelText } ) - } - /> + + setAttributes( { height: heightValue } ) + } + min={ 6 } + max={ 30 } + /> + + setAttributes( { showValue: ! showValue } ) + } + />
- { label && ( -
- { label } -
- ) } +
+ + setAttributes( { label: content } ) + } + placeholder={ __( 'Write heading…' ) } + /> + { showValue &&

{ value }%

} +
- - { value }% - -
+ >
diff --git a/packages/block-library/src/progress-bar/save.js b/packages/block-library/src/progress-bar/save.js index 80fdf09e30627..814f317de8cd2 100644 --- a/packages/block-library/src/progress-bar/save.js +++ b/packages/block-library/src/progress-bar/save.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useBlockProps } from '@wordpress/block-editor'; +import { RichText, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { @@ -10,27 +10,24 @@ export default function save( { attributes } ) { max = 100, backgroundColor, progressColor, + height, + showValue, } = attributes; const blockProps = useBlockProps.save( { className: 'wp-block-progress-bar', } ); - // Calculate the percentage - const percentage = Math.min( Math.max( ( value / max ) * 100, 0 ), 100 ); - - // Custom styles for the progress bar const progressBarStyle = { - backgroundColor: backgroundColor || '#f0f0f0', - borderRadius: '4px', + backgroundColor, overflow: 'hidden', - height: '24px', + height: `${ height }px`, position: 'relative', }; const progressStyle = { - backgroundColor: progressColor || '#4CAF50', - width: `${ percentage }%`, + backgroundColor: progressColor, + width: `${ ( value / max ) * 100 }%`, height: '100%', transition: 'width 0.3s ease', }; @@ -38,35 +35,28 @@ export default function save( { attributes } ) { return (
- { label && ( -
- { label } -
- ) } +
+ + { showValue &&

{ value }%

} +
- -
- - { percentage.toFixed( 1 ) }% - -
- +
From aaa18538bafb3fe8181c45181ed06f189bde5c2d Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 15 Jan 2025 11:29:29 +0530 Subject: [PATCH 04/16] Refactor Progress Bar block settings with ToolsPanel - 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. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/progress-bar/block.json | 1 - .../block-library/src/progress-bar/edit.js | 138 ++++++++++++------ 3 files changed, 98 insertions(+), 43 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index cf1ac06193d5a..2edde425e892a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -706,7 +706,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou - **Name:** core/progress-bar - **Category:** design -- **Supports:** align, ~~html~~ +- **Supports:** ~~html~~ - **Attributes:** backgroundColor, height, label, max, progressColor, showValue, value ## Pullquote diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json index f85da36eb184f..0e0a972caa128 100644 --- a/packages/block-library/src/progress-bar/block.json +++ b/packages/block-library/src/progress-bar/block.json @@ -37,7 +37,6 @@ } }, "supports": { - "align": true, "html": false }, "style": "wp-block-progress-bar" diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 6e596a8cd1c8f..de172a20509db 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -7,9 +7,19 @@ import { RichText, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; +import { + RangeControl, + ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + export default function Edit( { attributes, setAttributes } ) { const { label, @@ -39,54 +49,100 @@ export default function Edit( { attributes, setAttributes } ) { transition: 'width 0.3s ease', }; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + return (
- - { + setAttributes( { + label: '', + value: 50, + max: 100, + backgroundColor: '#f0f0f0', + progressColor: '#1E1E1E', + height: 11, + showValue: true, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + - setAttributes( { value: currentValue } ) - } - min={ 0 } - max={ max } - /> - value !== 50 } + onDeselect={ () => setAttributes( { value: 50 } ) } + > + + setAttributes( { value: currentValue } ) + } + min={ 0 } + max={ max } + /> + + - setAttributes( { max: maxValue } ) - } - min={ 1 } - max={ 1000 } - /> - max !== 100 } + onDeselect={ () => setAttributes( { max: 100 } ) } + > + + setAttributes( { max: maxValue } ) + } + min={ 1 } + max={ 1000 } + /> + + - setAttributes( { height: heightValue } ) - } - min={ 6 } - max={ 30 } - /> - height !== 11 } + onDeselect={ () => setAttributes( { height: 11 } ) } + > + + setAttributes( { height: heightValue } ) + } + min={ 6 } + max={ 30 } + /> + + - setAttributes( { showValue: ! showValue } ) + isShownByDefault + hasValue={ () => ! showValue } + onDeselect={ () => + setAttributes( { showValue: true } ) } - /> - + > + + setAttributes( { showValue: ! showValue } ) + } + /> + + Date: Wed, 15 Jan 2025 12:25:32 +0530 Subject: [PATCH 05/16] Replace Progress Bar block icon with a custom icon - 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. --- .../block-library/src/progress-bar/index.js | 4 ++-- packages/icons/src/index.js | 1 + packages/icons/src/library/progress-bar.js | 23 +++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 packages/icons/src/library/progress-bar.js diff --git a/packages/block-library/src/progress-bar/index.js b/packages/block-library/src/progress-bar/index.js index 8bd95626c5f86..b7f1257c98b14 100644 --- a/packages/block-library/src/progress-bar/index.js +++ b/packages/block-library/src/progress-bar/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { _x } from '@wordpress/i18n'; -import { home } from '@wordpress/icons'; +import { progressBar as icon } from '@wordpress/icons'; /** * Internal dependencies @@ -17,7 +17,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - icon: home, + icon, edit, save, example: { diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index e82b09e5d5afe..fad7466582062 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -218,6 +218,7 @@ export { default as previous } from './library/previous'; export { default as next } from './library/next'; export { default as offline } from './library/offline'; export { default as preformatted } from './library/preformatted'; +export { default as progressBar } from './library/progress-bar'; export { default as published } from './library/published'; export { default as pullLeft } from './library/pull-left'; export { default as pullRight } from './library/pull-right'; diff --git a/packages/icons/src/library/progress-bar.js b/packages/icons/src/library/progress-bar.js new file mode 100644 index 0000000000000..ae16345ba45f2 --- /dev/null +++ b/packages/icons/src/library/progress-bar.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/primitives'; + +const progressBar = ( + +); + +export default progressBar; From 0732f70d39d3d83910dbb523626a3257ee85bb98 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Thu, 16 Jan 2025 14:17:11 +0530 Subject: [PATCH 06/16] Refactor Progress Bar block styling and add dedicated SCSS file - 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. --- .../block-library/src/progress-bar/edit.js | 12 +-------- .../block-library/src/progress-bar/style.scss | 25 +++++++++++++++++++ packages/block-library/src/style.scss | 1 + 3 files changed, 27 insertions(+), 11 deletions(-) create mode 100644 packages/block-library/src/progress-bar/style.scss diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index de172a20509db..d1087b12f3132 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -37,16 +37,12 @@ export default function Edit( { attributes, setAttributes } ) { const progressBarStyle = { backgroundColor, - overflow: 'hidden', height: `${ height }px`, - position: 'relative', }; const progressStyle = { backgroundColor: progressColor, width: `${ ( value / max ) * 100 }%`, - height: '100%', - transition: 'width 0.3s ease', }; const dropdownMenuProps = useToolsPanelDropdownMenuProps(); @@ -165,13 +161,7 @@ export default function Edit( { attributes, setAttributes } ) {
-
+
div:first-child { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__bar { + width: 100%; + overflow: hidden; + position: relative; + } + + &__progress { + height: 100%; + + @media not (prefers-reduced-motion) { + transition: width 0.3s ease; + } + } +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index c61049c23151b..298371ff72dee 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -70,5 +70,6 @@ @import "./verse/style.scss"; @import "./video/style.scss"; @import "./footnotes/style.scss"; +@import "./progress-bar/style.scss"; @import "common.scss"; From 89a290e8e2997b31d2dfdb3a3bf2583b13f038b5 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Fri, 17 Jan 2025 12:55:43 +0530 Subject: [PATCH 07/16] Add Progress Bar block registration and refactor save logic - 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. --- lib/blocks.php | 1 + packages/block-library/src/progress-bar/save.js | 12 +----------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 342cd25191e68..3efeda6bd0843 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -43,6 +43,7 @@ function gutenberg_reregister_core_block_types() { 'verse', 'video', 'embed', + 'progress-bar', ), 'block_names' => array( 'archives.php' => 'core/archives', diff --git a/packages/block-library/src/progress-bar/save.js b/packages/block-library/src/progress-bar/save.js index 814f317de8cd2..0d6c9d38178fa 100644 --- a/packages/block-library/src/progress-bar/save.js +++ b/packages/block-library/src/progress-bar/save.js @@ -20,28 +20,18 @@ export default function save( { attributes } ) { const progressBarStyle = { backgroundColor, - overflow: 'hidden', height: `${ height }px`, - position: 'relative', }; const progressStyle = { backgroundColor: progressColor, width: `${ ( value / max ) * 100 }%`, - height: '100%', - transition: 'width 0.3s ease', }; return (
-
+
Date: Mon, 20 Jan 2025 13:13:52 +0530 Subject: [PATCH 08/16] Add read progress functionality to Progress Bar block 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 --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/progress-bar/block.json | 4 ++ .../block-library/src/progress-bar/edit.js | 71 ++++++++++++++----- .../block-library/src/progress-bar/save.js | 43 +++++++---- .../block-library/src/progress-bar/style.scss | 26 +++++++ 5 files changed, 117 insertions(+), 29 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 2edde425e892a..33999079053b0 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou - **Name:** core/progress-bar - **Category:** design - **Supports:** ~~html~~ -- **Attributes:** backgroundColor, height, label, max, progressColor, showValue, value +- **Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, value ## Pullquote diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json index 0e0a972caa128..1db43535e23b0 100644 --- a/packages/block-library/src/progress-bar/block.json +++ b/packages/block-library/src/progress-bar/block.json @@ -34,6 +34,10 @@ "showValue": { "type": "boolean", "default": true + }, + "isReadProgress": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index d1087b12f3132..6db77f03ef705 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -29,6 +29,7 @@ export default function Edit( { attributes, setAttributes } ) { progressColor, height, showValue, + isReadProgress, } = attributes; const blockProps = useBlockProps( { @@ -45,6 +46,11 @@ export default function Edit( { attributes, setAttributes } ) { width: `${ ( value / max ) * 100 }%`, }; + const readProgressStyle = { + backgroundColor: progressColor, + height: `${ height }px`, + }; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return ( @@ -61,6 +67,7 @@ export default function Edit( { attributes, setAttributes } ) { progressColor: '#1E1E1E', height: 11, showValue: true, + isReadProgress: false, } ); } } dropdownMenuProps={ dropdownMenuProps } @@ -138,6 +145,26 @@ export default function Edit( { attributes, setAttributes } ) { } /> + isReadProgress } + onDeselect={ () => + setAttributes( { isReadProgress: false } ) + } + > + + setAttributes( { + isReadProgress: ! isReadProgress, + } ) + } + /> +
-
- - setAttributes( { label: content } ) - } - placeholder={ __( 'Write heading…' ) } - /> - { showValue &&

{ value }%

} -
+ { ! isReadProgress && ( +
+ + setAttributes( { label: content } ) + } + placeholder={ __( 'Write heading…' ) } + /> + { showValue &&

{ value }%

} +
+ ) }
diff --git a/packages/block-library/src/progress-bar/save.js b/packages/block-library/src/progress-bar/save.js index 0d6c9d38178fa..29c6b1bff9878 100644 --- a/packages/block-library/src/progress-bar/save.js +++ b/packages/block-library/src/progress-bar/save.js @@ -3,7 +3,7 @@ */ import { RichText, useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes } ) { +export default function Save( { attributes } ) { const { label, value, @@ -12,8 +12,10 @@ export default function save( { attributes } ) { progressColor, height, showValue, + isReadProgress, } = attributes; + // eslint-disable-next-line react-compiler/react-compiler const blockProps = useBlockProps.save( { className: 'wp-block-progress-bar', } ); @@ -28,24 +30,41 @@ export default function save( { attributes } ) { width: `${ ( value / max ) * 100 }%`, }; + const readProgressStyle = { + backgroundColor: progressColor, + height: `${ height }px`, + }; + return (
-
- - { showValue &&

{ value }%

} -
+ { ! isReadProgress && ( +
+ + { showValue &&

{ value }%

} +
+ ) }
diff --git a/packages/block-library/src/progress-bar/style.scss b/packages/block-library/src/progress-bar/style.scss index 480e011429803..fa08d207e3caf 100644 --- a/packages/block-library/src/progress-bar/style.scss +++ b/packages/block-library/src/progress-bar/style.scss @@ -1,3 +1,12 @@ +@keyframes grow-progress { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} + .wp-block-progress-bar { &__container { width: 100%; @@ -22,4 +31,21 @@ transition: width 0.3s ease; } } + + &__read-bar { + width: 100%; + position: fixed; + left: 0; + top: 0; + } + + &__read-progress { + position: fixed; + left: 0; + top: 0; + width: 100%; + transform-origin: 0 50%; + animation: grow-progress auto linear; + animation-timeline: scroll() !important; + } } From 92166b6c9194882fe8a9b3a95539c1ac305b9e9d Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 21 Jan 2025 08:49:49 +0530 Subject: [PATCH 09/16] Update progress bar styling for admin bar compatibility --- .../block-library/src/progress-bar/style.scss | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/block-library/src/progress-bar/style.scss b/packages/block-library/src/progress-bar/style.scss index fa08d207e3caf..9427e4c028677 100644 --- a/packages/block-library/src/progress-bar/style.scss +++ b/packages/block-library/src/progress-bar/style.scss @@ -37,6 +37,19 @@ position: fixed; left: 0; top: 0; + z-index: 1000; + + .admin-bar & { + top: 32px; + + @media screen and (max-width: 779px) { + top: 46px; + } + + @media screen and (max-width: 594px) { + top: 0; + } + } } &__read-progress { @@ -46,6 +59,19 @@ width: 100%; transform-origin: 0 50%; animation: grow-progress auto linear; + z-index: 1000; animation-timeline: scroll() !important; + + .admin-bar & { + top: 32px; + + @media screen and (max-width: 779px) { + top: 46px; + } + + @media screen and (max-width: 594px) { + top: 0; + } + } } } From dcf5034fb5940ffd72e6a5c03138fac50ff75f6a Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 21 Jan 2025 13:31:47 +0530 Subject: [PATCH 10/16] Add custom symbol and position options - 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`. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/progress-bar/block.json | 8 +++ .../block-library/src/progress-bar/edit.js | 58 ++++++++++++++++++- .../block-library/src/progress-bar/save.js | 10 +++- 4 files changed, 75 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 33999079053b0..b3f570fc233ea 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou - **Name:** core/progress-bar - **Category:** design - **Supports:** ~~html~~ -- **Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, value +- **Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, symbol, symbolPosition, value ## Pullquote diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json index 1db43535e23b0..f994e868d97c2 100644 --- a/packages/block-library/src/progress-bar/block.json +++ b/packages/block-library/src/progress-bar/block.json @@ -38,6 +38,14 @@ "isReadProgress": { "type": "boolean", "default": false + }, + "symbol": { + "type": "string", + "default": "%" + }, + "symbolPosition": { + "type": "string", + "default": "suffix" } }, "supports": { diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 6db77f03ef705..b70b92175f7f3 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -9,6 +9,8 @@ import { } from '@wordpress/block-editor'; import { RangeControl, + SelectControl, + TextControl, ToggleControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, @@ -30,6 +32,8 @@ export default function Edit( { attributes, setAttributes } ) { height, showValue, isReadProgress, + symbol, + symbolPosition, } = attributes; const blockProps = useBlockProps( { @@ -68,6 +72,8 @@ export default function Edit( { attributes, setAttributes } ) { height: 11, showValue: true, isReadProgress: false, + symbol: '%', + symbolPosition: 'suffix', } ); } } dropdownMenuProps={ dropdownMenuProps } @@ -165,6 +171,50 @@ export default function Edit( { attributes, setAttributes } ) { } /> + symbol !== '%' } + onDeselect={ () => setAttributes( { symbol: '%' } ) } + > + + setAttributes( { symbol: newSymbol } ) + } + /> + + symbolPosition !== 'suffix' } + onDeselect={ () => + setAttributes( { symbolPosition: 'suffix' } ) + } + > + + setAttributes( { symbolPosition: position } ) + } + /> + - { showValue &&

{ value }%

} + { showValue && ( +

+ { symbolPosition === 'prefix' + ? `${ symbol }${ value }` + : `${ value }${ symbol }` } +

+ ) }
) }
- { showValue &&

{ value }%

} + { showValue && ( +

+ { symbolPosition === 'prefix' + ? `${ symbol }${ value }` + : `${ value }${ symbol }` } +

+ ) }
) }
Date: Wed, 22 Jan 2025 13:05:02 +0530 Subject: [PATCH 11/16] Progress Bar: Replace max value range control with number control 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. --- packages/block-library/src/progress-bar/edit.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index b70b92175f7f3..6412d0e2afc6f 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -8,6 +8,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { + __experimentalNumberControl as NumberControl, RangeControl, SelectControl, TextControl, @@ -102,16 +103,16 @@ export default function Edit( { attributes, setAttributes } ) { hasValue={ () => max !== 100 } onDeselect={ () => setAttributes( { max: 100 } ) } > - setAttributes( { max: maxValue } ) } - min={ 1 } - max={ 1000 } /> setAttributes( { height: heightValue } ) } - min={ 6 } + min={ 1 } max={ 30 } /> From 665f35d39e2e14c99c778efc98ed831e56519583 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Thu, 23 Jan 2025 11:09:49 +0530 Subject: [PATCH 12/16] Add total value and custom separator options - 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 --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/progress-bar/block.json | 8 +++ .../block-library/src/progress-bar/edit.js | 62 ++++++++++++++++--- .../block-library/src/progress-bar/save.js | 20 +++--- 4 files changed, 77 insertions(+), 15 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b3f570fc233ea..447d3cd99e5a8 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -707,7 +707,7 @@ Display a progress bar. Useful for tracking progress on a task or project. ([Sou - **Name:** core/progress-bar - **Category:** design - **Supports:** ~~html~~ -- **Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, symbol, symbolPosition, value +- **Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, seprator, showTotal, showValue, symbol, symbolPosition, value ## Pullquote diff --git a/packages/block-library/src/progress-bar/block.json b/packages/block-library/src/progress-bar/block.json index f994e868d97c2..bb5f96a644f2c 100644 --- a/packages/block-library/src/progress-bar/block.json +++ b/packages/block-library/src/progress-bar/block.json @@ -46,6 +46,14 @@ "symbolPosition": { "type": "string", "default": "suffix" + }, + "showTotal": { + "type": "boolean", + "default": false + }, + "seprator": { + "type": "string", + "default": "/" } }, "supports": { diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 6412d0e2afc6f..935e9fd81ee6d 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -35,6 +35,8 @@ export default function Edit( { attributes, setAttributes } ) { isReadProgress, symbol, symbolPosition, + showTotal, + seprator, } = attributes; const blockProps = useBlockProps( { @@ -58,6 +60,16 @@ export default function Edit( { attributes, setAttributes } ) { const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + const formatValue = ( val ) => { + return symbolPosition === 'prefix' + ? `${ symbol }${ val }` + : `${ val }${ symbol }`; + }; + + const valueDisplay = showTotal + ? `${ formatValue( value ) } ${ seprator } ${ formatValue( max ) }` + : formatValue( value ); + return (
@@ -75,6 +87,8 @@ export default function Edit( { attributes, setAttributes } ) { isReadProgress: false, symbol: '%', symbolPosition: 'suffix', + showTotal: false, + seprator: '/', } ); } } dropdownMenuProps={ dropdownMenuProps } @@ -152,6 +166,46 @@ export default function Edit( { attributes, setAttributes } ) { } /> + { showValue && ( + showTotal } + onDeselect={ () => + setAttributes( { showTotal: false } ) + } + > + + setAttributes( { showTotal: ! showTotal } ) + } + /> + + ) } + { showValue && showTotal && ( + seprator !== '/' } + onDeselect={ () => + setAttributes( { seprator: '/' } ) + } + > + + setAttributes( { seprator: newSeprator } ) + } + /> + + ) } - { showValue && ( -

- { symbolPosition === 'prefix' - ? `${ symbol }${ value }` - : `${ value }${ symbol }` } -

- ) } + { showValue &&

{ valueDisplay }

}
) }
{ + return symbolPosition === 'prefix' + ? `${ symbol }${ val }` + : `${ val }${ symbol }`; + }; + + const valueDisplay = showTotal + ? `${ formatValue( value ) } ${ seprator } ${ formatValue( max ) }` + : formatValue( value ); + return (
@@ -47,13 +59,7 @@ export default function Save( { attributes } ) { className="wp-block-progress-bar__label" value={ label } /> - { showValue && ( -

- { symbolPosition === 'prefix' - ? `${ symbol }${ value }` - : `${ value }${ symbol }` } -

- ) } + { showValue &&

{ valueDisplay }

}
) }
Date: Thu, 23 Jan 2025 11:21:51 +0530 Subject: [PATCH 13/16] Improve control visibility logic - 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 --- .../block-library/src/progress-bar/edit.js | 346 ++++++++++-------- 1 file changed, 189 insertions(+), 157 deletions(-) diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 935e9fd81ee6d..14c979141154c 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -93,119 +93,6 @@ export default function Edit( { attributes, setAttributes } ) { } } dropdownMenuProps={ dropdownMenuProps } > - value !== 50 } - onDeselect={ () => setAttributes( { value: 50 } ) } - > - - setAttributes( { value: currentValue } ) - } - min={ 0 } - max={ max } - /> - - max !== 100 } - onDeselect={ () => setAttributes( { max: 100 } ) } - > - - setAttributes( { max: maxValue } ) - } - /> - - height !== 11 } - onDeselect={ () => setAttributes( { height: 11 } ) } - > - - setAttributes( { height: heightValue } ) - } - min={ 1 } - max={ 30 } - /> - - ! showValue } - onDeselect={ () => - setAttributes( { showValue: true } ) - } - > - - setAttributes( { showValue: ! showValue } ) - } - /> - - { showValue && ( - showTotal } - onDeselect={ () => - setAttributes( { showTotal: false } ) - } - > - - setAttributes( { showTotal: ! showTotal } ) - } - /> - - ) } - { showValue && showTotal && ( - seprator !== '/' } - onDeselect={ () => - setAttributes( { seprator: '/' } ) - } - > - - setAttributes( { seprator: newSeprator } ) - } - /> - - ) } - symbol !== '%' } - onDeselect={ () => setAttributes( { symbol: '%' } ) } - > - - setAttributes( { symbol: newSymbol } ) - } - /> - - symbolPosition !== 'suffix' } - onDeselect={ () => - setAttributes( { symbolPosition: 'suffix' } ) - } - > - - setAttributes( { symbolPosition: position } ) - } - /> - + { ! isReadProgress && ( + <> + value !== 50 } + onDeselect={ () => + setAttributes( { value: 50 } ) + } + > + + setAttributes( { value: currentValue } ) + } + min={ 0 } + max={ max } + /> + + max !== 100 } + onDeselect={ () => + setAttributes( { max: 100 } ) + } + > + + setAttributes( { max: maxValue } ) + } + /> + + height !== 11 } + onDeselect={ () => + setAttributes( { height: 11 } ) + } + > + + setAttributes( { height: heightValue } ) + } + min={ 1 } + max={ 30 } + /> + + ! showValue } + onDeselect={ () => + setAttributes( { showValue: true } ) + } + > + + setAttributes( { + showValue: ! showValue, + } ) + } + /> + + { showValue && ( + showTotal } + onDeselect={ () => + setAttributes( { showTotal: false } ) + } + > + + setAttributes( { + showTotal: ! showTotal, + } ) + } + /> + + ) } + { showValue && showTotal && ( + seprator !== '/' } + onDeselect={ () => + setAttributes( { seprator: '/' } ) + } + > + + setAttributes( { + seprator: newSeprator, + } ) + } + /> + + ) } + { showValue && ( + <> + symbol !== '%' } + onDeselect={ () => + setAttributes( { symbol: '%' } ) + } + > + + setAttributes( { + symbol: newSymbol, + } ) + } + /> + + + symbolPosition !== 'suffix' + } + onDeselect={ () => + setAttributes( { + symbolPosition: 'suffix', + } ) + } + > + + setAttributes( { + symbolPosition: position, + } ) + } + /> + + + ) } + + ) } Date: Mon, 27 Jan 2025 11:17:35 +0530 Subject: [PATCH 14/16] Progress Bar: Adjusted bar height control placement and labels - 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" --- .../block-library/src/progress-bar/edit.js | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/progress-bar/edit.js b/packages/block-library/src/progress-bar/edit.js index 14c979141154c..36dde1da40567 100644 --- a/packages/block-library/src/progress-bar/edit.js +++ b/packages/block-library/src/progress-bar/edit.js @@ -155,27 +155,30 @@ export default function Edit( { attributes, setAttributes } ) { } /> - height !== 11 } - onDeselect={ () => - setAttributes( { height: 11 } ) - } - > - - setAttributes( { height: heightValue } ) - } - min={ 1 } - max={ 30 } - /> - + + ) } + height !== 11 } + onDeselect={ () => setAttributes( { height: 11 } ) } + > + + setAttributes( { height: heightValue } ) + } + min={ 1 } + max={ 30 } + /> + + + { ! isReadProgress && ( + <> Date: Tue, 28 Jan 2025 14:21:01 +0530 Subject: [PATCH 15/16] Add e2e test for Progress Bar block value rendering - Added test to verify Progress Bar block rendering in editor - Added verification for prefix symbol ($) display - Added assertion to check correct value formatting ($50) --- test/e2e/specs/editor/blocks/progress.spec.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 test/e2e/specs/editor/blocks/progress.spec.js diff --git a/test/e2e/specs/editor/blocks/progress.spec.js b/test/e2e/specs/editor/blocks/progress.spec.js new file mode 100644 index 0000000000000..6211c341b0e9f --- /dev/null +++ b/test/e2e/specs/editor/blocks/progress.spec.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Progress Bar', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterEach( async ( { requestUtils } ) => { + await requestUtils.deleteAllPosts(); + } ); + + test( 'should render progress bar with correct prefix symbol and value', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { name: 'core/progress-bar' } ); + await page.getByLabel( 'Value Symbol' ).click(); + await page.getByLabel( 'Value Symbol' ).fill( '$' ); + await page.getByLabel( 'Symbol Position' ).selectOption( 'prefix' ); + + const editorFrame = page + .locator( 'iframe[name="editor-canvas"]' ) + .contentFrame(); + + const progressBarValue = editorFrame + .locator( '.wp-block-progress-bar__container > div > p' ) + .nth( 1 ); + + await expect( progressBarValue ).toHaveText( '$50' ); + } ); +} ); From 6d56d85aaeaaef914713ec6aef544866c2435085 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 29 Jan 2025 11:08:06 +0530 Subject: [PATCH 16/16] Add e2e test for Progress Bar block color settings - Added test to verify background color selection - Added test to verify progress bar color selection - Added CSS assertions for color values --- test/e2e/specs/editor/blocks/progress.spec.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/test/e2e/specs/editor/blocks/progress.spec.js b/test/e2e/specs/editor/blocks/progress.spec.js index 6211c341b0e9f..0acda6fc00372 100644 --- a/test/e2e/specs/editor/blocks/progress.spec.js +++ b/test/e2e/specs/editor/blocks/progress.spec.js @@ -31,4 +31,36 @@ test.describe( 'Progress Bar', () => { await expect( progressBarValue ).toHaveText( '$50' ); } ); + + test( 'should apply custom background and progress colors', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { name: 'core/progress-bar' } ); + + await page.getByRole( 'button', { name: 'Background Color' } ).click(); + await page.getByLabel( 'Cyan bluish gray' ).click(); + await page.getByRole( 'button', { name: 'Progress Color' } ).click(); + await page.getByLabel( 'Vivid purple' ).click(); + + const editorFrame = page + .locator( 'iframe[name="editor-canvas"]' ) + .contentFrame(); + + const barContainer = editorFrame.locator( + '.wp-block-progress-bar__bar' + ); + const progressBar = editorFrame.locator( + '.wp-block-progress-bar__progress' + ); + + await expect( barContainer ).toHaveCSS( + 'background-color', + 'rgb(171, 184, 195)' + ); + await expect( progressBar ).toHaveCSS( + 'background-color', + 'rgb(155, 81, 224)' + ); + } ); } );