Add prefix and suffix

WordPress · Oct 3, 2022 · 5221b9d · 5221b9d
1 parent 6898947
commit 5221b9d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 11 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -582,7 +582,7 @@ Time to read the post. ([Source](https://github.com/WordPress/gutenberg/tree/tru
 - **Name:** core/post-time-to-read
 - **Category:** theme
 - **Supports:** ~~html~~, ~~multiple~~
-- **Attributes:** textAlign
+- **Attributes:** prefix, suffix, 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
@@ -10,6 +10,14 @@
  "attributes": {
  "textAlign": {
  "type": "string"
+ },
+ "prefix": {
+ "type": "string",
+ "default": ""
+ },
+ "suffix": {
+ "type": "string",
+ "default": ""
  }
  },
  "supports": {

diff --git a/packages/block-library/src/post-time-to-read/edit.js b/packages/block-library/src/post-time-to-read/edit.js
@@ -11,8 +11,13 @@ import {
  AlignmentControl,
  BlockControls,
  useBlockProps,
+ RichText,
 } from '@wordpress/block-editor';
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import {
+ createBlock,
+ getDefaultBlockName,
+ __unstableSerializeAndClean,
+} from '@wordpress/blocks';
 import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
 import { count as wordCount } from '@wordpress/wordcount';
 
@@ -23,8 +28,24 @@ import { count as wordCount } from '@wordpress/wordcount';
  */
 const AVERAGE_READING_RATE = 189;
 
-function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
- const { textAlign } = attributes;
+// Allowed formats for the prefix and suffix fields.
+const ALLOWED_FORMATS = [
+ 'core/bold',
+ 'core/image',
+ 'core/italic',
+ 'core/link',
+ 'core/strikethrough',
+ 'core/text-color',
+];
+
+function PostTimeToReadEdit( {
+ attributes,
+ setAttributes,
+ insertBlocksAfter,
+ isSelected,
+ context,
+} ) {
+ const { textAlign, prefix, suffix } = attributes;
  const { postId, postType } = context;
 
  const [ contentStructure ] = useEntityProp(
@@ -69,14 +90,10 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
  minutesToRead !== 0
  ? sprintf(
  /* translators: %d is the number of minutes the post will take to read. */
- _n(
- 'You can read this post in %d minute.',
- 'You can read this post in %d minutes.',
- minutesToRead
- ),
+ _n( '%d minute', '%d minutes', minutesToRead ),
  minutesToRead
  )
- : __( 'You can read this post in less than a minute.' );
+ : __( 'less than a minute' );
  }
 
  const blockProps = useBlockProps( {
@@ -95,7 +112,42 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
  } }
  />
  </BlockControls>
- <p { ...blockProps }>{ minutesToReadString }</p>
+ <p { ...blockProps }>
+ { ( isSelected || prefix ) && (
+ <RichText
+ allowedFormats={ ALLOWED_FORMATS }
+ className="wp-block-post-time-to-read__prefix"
+ multiline={ false }
+ aria-label={ __( 'Prefix' ) }
+ placeholder={ __( 'Prefix' ) + ' ' }
+ value={ prefix }
+ onChange={ ( value ) =>
+ setAttributes( { prefix: value } )
+ }
+ tagName="span"
+ />
+ ) }
+ { minutesToReadString }
+ { ( isSelected || suffix ) && (
+ <RichText
+ allowedFormats={ ALLOWED_FORMATS }
+ className="wp-block-post-time-to-read__suffix"
+ multiline={ false }
+ aria-label={ __( 'Suffix' ) }
+ placeholder={ ' ' + __( 'Suffix' ) }
+ value={ suffix }
+ onChange={ ( value ) =>
+ setAttributes( { suffix: value } )
+ }
+ tagName="span"
+ __unstableOnSplitAtEnd={ () =>
+ insertBlocksAfter(
+ createBlock( getDefaultBlockName() )
+ )
+ }
+ />
+ ) }
+ </p>
  </>
  );
 }