New Block: Implement progress bar block

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:** ~~html~~
+-	**Attributes:** backgroundColor, height, isReadProgress, label, max, progressColor, showValue, symbol, symbolPosition, 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))

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',

packages/block-library/src/index.js

@@ -4,8 +4,8 @@
 import {
 	setDefaultBlockName,
 	setFreeformContentHandlerName,
-	setUnregisteredTypeHandlerName,
 	setGroupingBlockName,
+	setUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
 
 /**
@@ -21,37 +21,39 @@ 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';
 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,

packages/block-library/src/progress-bar/block.json

@@ -0,0 +1,55 @@
+{
+	"$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": ""
+		},
+		"value": {
+			"type": "number",
+			"default": 50
+		},
+		"max": {
+			"type": "number",
+			"default": 100
+		},
+		"backgroundColor": {
+			"type": "string",
+			"default": "#f0f0f0"
+		},
+		"progressColor": {
+			"type": "string",
+			"default": "#1E1E1E"
+		},
+		"height": {
+			"type": "number",
+			"default": 11
+		},
+		"showValue": {
+			"type": "boolean",
+			"default": true
+		},
+		"isReadProgress": {
+			"type": "boolean",
+			"default": false
+		},
+		"symbol": {
+			"type": "string",
+			"default": "%"
+		},
+		"symbolPosition": {
+			"type": "string",
+			"default": "suffix"
+		}
+	},
+	"supports": {
+		"html": false
+	},
+	"style": "wp-block-progress-bar"
+}