Add color tools to time to read block (#49496)

* Add color tools to time to read block * Make the block element a `<div>` * Update tests to expect a div instead of a paragraph
WordPress · Mar 31, 2023 · eabaf5a · eabaf5a
1 parent c2b4b1e
commit eabaf5a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -590,7 +590,7 @@ Show minutes required to finish reading the post. ([Source](https://github.com/W
 
 -	**Name:** core/post-time-to-read
 -	**Category:** theme
--	**Supports:** spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Post Title

diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json
@@ -14,6 +14,13 @@
 		}
 	},
 	"supports": {
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

diff --git a/packages/block-library/src/post-time-to-read/edit.js b/packages/block-library/src/post-time-to-read/edit.js
@@ -93,7 +93,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 					} }
 				/>
 			</BlockControls>
-			<p { ...blockProps }>{ minutesToReadString }</p>
+			<div { ...blockProps }>{ minutesToReadString }</div>
 		</>
 	);
 }

diff --git a/packages/block-library/src/post-time-to-read/index.php b/packages/block-library/src/post-time-to-read/index.php
@@ -42,7 +42,7 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
 		$minutes_to_read_string
 	);

diff --git a/phpunit/blocks/render-post-time-to-read-test.php b/phpunit/blocks/render-post-time-to-read-test.php
@@ -114,7 +114,7 @@ public function test_no_content_post() {
 		$block         = new WP_Block( $parsed_block, $context );
 
 		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
-		$expected = '<p class="wp-block-post-time-to-read">1 minute</p>';
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
 
 		$this->assertSame( $expected, $actual );
 	}
@@ -136,7 +136,7 @@ public function test_less_than_one_minute_post() {
 		$block         = new WP_Block( $parsed_block, $context );
 
 		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
-		$expected = '<p class="wp-block-post-time-to-read">1 minute</p>';
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
 
 		$this->assertSame( $expected, $actual );
 	}
@@ -158,7 +158,7 @@ public function test_one_minute_post() {
 		$block         = new WP_Block( $parsed_block, $context );
 
 		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
-		$expected = '<p class="wp-block-post-time-to-read">1 minute</p>';
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
 
 		$this->assertSame( $expected, $actual );
 	}
@@ -180,7 +180,7 @@ public function test_two_minutes_post() {
 		$block         = new WP_Block( $parsed_block, $context );
 
 		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
-		$expected = '<p class="wp-block-post-time-to-read">2 minutes</p>';
+		$expected = '<div class="wp-block-post-time-to-read">2 minutes</div>';
 
 		$this->assertSame( $expected, $actual );
 	}