[FEATURE] Added Reading Time and Word Count to the Insights

Build/resources/javascript/Components/ReadingTime.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import LoadingIndicator from './LoadingIndicator';
+import { __, _n } from "@wordpress/i18n";
+import { InsightsCard } from "@yoast/components";
+
+const ReadingTime = ({readingTime}) => {
+    if (readingTime) {
+        const estimatedReadingTime = readingTime.result;
+        return <InsightsCard
+            amount={ estimatedReadingTime }
+            unit={ _n( "minute", "minutes", estimatedReadingTime, "wordpress-seo" ) }
+            title={ __( "Reading time", "wordpress-seo" ) }
+            linkTo={ 'https://yoa.st/4fd' }
+            linkText={ __( "Learn more about reading time", "wordpress-seo" ) }
+        />
+    }
+    return <LoadingIndicator />
+}
+
+const mapStateToProps = (state) => {
+    return {
+        ...state.readingTime
+    }
+}
+
+export default connect(mapStateToProps)(ReadingTime);

Build/resources/javascript/Components/WordCount.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import LoadingIndicator from './LoadingIndicator';
+import { __, _n } from "@wordpress/i18n";
+import { InsightsCard } from "@yoast/components";
+
+const WordCount = ({wordCount}) => {
+    if (wordCount) {
+        let unitString = _n( "word", "words", wordCount.result.count, "wordpress-seo" );
+        let titleString = __( "Word count", "wordpress-seo" );
+        let linkText =  __( "Learn more about word count", "wordpress-seo" );
+        if ( wordCount.result.unit === "character" ) {
+            unitString = _n( "character", "characters", wordCount.result.count, "wordpress-seo" );
+            titleString = __( "Character count", "wordpress-seo" );
+            linkText =  __( "Learn more about character count", "wordpress-seo" );
+        }
+
+        return <InsightsCard
+            amount={ wordCount.result.count }
+            unit={ unitString }
+            title={ titleString }
+            //linkTo={ 'https://yoa.st/word-count' }
+            linkText={ linkText }
+        />
+    }
+    return <LoadingIndicator />
+}
+
+const mapStateToProps = (state) => {
+    return {
+        ...state.wordCount
+    }
+}
+
+export default connect(mapStateToProps)(WordCount);

Build/resources/javascript/analysis/refreshAnalysis.js

@@ -4,6 +4,8 @@ import {analyzeData} from '../redux/actions/analysis';
 import {getRelevantWords} from '../redux/actions/relevantWords';
 import {getInsights} from "../redux/actions/insights";
 import {getFleschReadingScore} from "../redux/actions/flesch";
+import {getReadingTime} from "../redux/actions/readingTime";
+import {getWordCount} from "../redux/actions/wordCount";
 
 export default function refreshAnalysis(worker, store) {
     const state = store.getState();
@@ -23,5 +25,7 @@ export default function refreshAnalysis(worker, store) {
         store.dispatch(getRelevantWords(worker, paper)),
         store.dispatch(getInsights(worker, paper)),
         store.dispatch(getFleschReadingScore(worker, paper)),
+        store.dispatch(getReadingTime(worker, paper)),
+        store.dispatch(getWordCount(worker, paper)),
     ]);
 }

Build/resources/javascript/plugin.js

@@ -22,6 +22,8 @@ import {setFocusKeywordSynonyms} from "./redux/actions/focusKeywordSynonyms";
 import {setLocaleData} from "@wordpress/i18n";
 import {Paper} from "yoastseo";
 import {getLinkingSuggestions} from "./redux/actions/linkingSuggestions";
+import ReadingTime from "./Components/ReadingTime";
+import WordCount from "./Components/WordCount";
 
 let YoastTypo3 = {
     _yoastWorker: null,
@@ -228,6 +230,16 @@ let YoastPlugin = {
             const fleschRoot = createRoot(container);
             fleschRoot.render(<Provider store={store}><FleschReadingScore /></Provider>);
         });
+
+        document.querySelectorAll('[data-yoast-readingtime]').forEach(container => {
+            const readingTimeRoot = createRoot(container);
+            readingTimeRoot.render(<Provider store={store}><ReadingTime /></Provider>);
+        });
+
+        document.querySelectorAll('[data-yoast-wordcount]').forEach(container => {
+            const wordCountRoot = createRoot(container);
+            wordCountRoot.render(<Provider store={store}><WordCount /></Provider>);
+        });
     },
 
     initCornerstone: () => {

Build/resources/javascript/redux/actions/index.js

@@ -6,6 +6,8 @@ import {getRelevantWords} from "./relevantWords";
 import {getInsights} from "./insights";
 import {getFleschReadingScore} from "./flesch";
 import {getLinkingSuggestions} from "./linkingSuggestions";
+import {getReadingTime} from "./readingTime";
+import {getWordCount} from "./wordCount";
 
 export default {
     getContent,
@@ -15,5 +17,7 @@ export default {
     getRelevantWords,
     getInsights,
     getFleschReadingScore,
+    getReadingTime,
+    getWordCount,
     getLinkingSuggestions
 };

Build/resources/javascript/redux/actions/readingTime.js

@@ -0,0 +1,17 @@
+export const GET_READINGTIME_REQUEST = 'GET_READINGTIME_REQUEST';
+export const GET_READINGTIME_SUCCESS = 'GET_READINGTIME_SUCCESS';
+
+export function getReadingTime(worker, paper) {
+    return dispatch => {
+        dispatch({type: GET_READINGTIME_REQUEST});
+
+        return worker
+            .runResearch('readingTime', paper)
+            .then((results) => {
+                dispatch({type: GET_READINGTIME_SUCCESS, payload: results});
+            }).catch((error) => {
+                console.error('An error occured while analyzing the text:');
+                console.error(error);
+            });
+    };
+}

Build/resources/javascript/redux/actions/wordCount.js

@@ -0,0 +1,17 @@
+export const GET_WORDCOUNT_REQUEST = 'GET_WORDCOUNT_REQUEST';
+export const GET_WORDCOUNT_SUCCESS = 'GET_WORDCOUNT_SUCCESS';
+
+export function getWordCount(worker, paper) {
+    return dispatch => {
+        dispatch({type: GET_WORDCOUNT_REQUEST});
+
+        return worker
+            .runResearch('wordCountInText', paper)
+            .then((results) => {
+                dispatch({type: GET_WORDCOUNT_SUCCESS, payload: results});
+            }).catch((error) => {
+                console.error('An error occured while analyzing the text:');
+                console.error(error);
+            });
+    };
+}

Build/resources/javascript/redux/reducers/flesch.js

@@ -1,8 +1,7 @@
 import {GET_FLESCH_REQUEST, GET_FLESCH_SUCCESS} from '../actions/flesch';
 
 const initialState = {
-    isCheckingFlesch: false,
-    words: []
+    isCheckingFlesch: false
 };
 
 function fleschReducer (state = initialState, action) {

Build/resources/javascript/redux/reducers/index.js

@@ -5,6 +5,8 @@ import analysis from './analysis';
 import relevantWords from './relevantWords';
 import insights from "./insights";
 import flesch from "./flesch";
+import readingTime from "./readingTime";
+import wordCount from "./wordCount";
 import linkingSuggestions from "./linkingSuggestions";
 export default {
     content,
@@ -14,5 +16,7 @@ export default {
     relevantWords,
     insights,
     flesch,
+    readingTime,
+    wordCount,
     linkingSuggestions
 }

Build/resources/javascript/redux/reducers/insights.js

@@ -1,8 +1,7 @@
 import {GET_INSIGHTS_REQUEST, GET_INSIGHTS_SUCCESS} from '../actions/insights';
 
 const initialState = {
-    isCheckingInsights: false,
-    words: []
+    isCheckingInsights: false
 };
 
 function insightsReducer (state = initialState, action) {

Build/resources/javascript/redux/reducers/readingTime.js

@@ -0,0 +1,18 @@
+import {GET_READINGTIME_REQUEST, GET_READINGTIME_SUCCESS} from '../actions/readingTime';
+
+const initialState = {
+    isCheckingReadingTime: false
+};
+
+function readingTimeReducer (state = initialState, action) {
+    switch(action.type) {
+        case GET_READINGTIME_REQUEST:
+            return {...state, isCheckingReadingTime: true};
+        case GET_READINGTIME_SUCCESS:
+            return {...state, isCheckingReadingTime: false, readingTime: action.payload};
+        default:
+            return state;
+    }
+}
+
+export default readingTimeReducer;

Build/resources/javascript/redux/reducers/wordCount.js

@@ -0,0 +1,18 @@
+import {GET_WORDCOUNT_REQUEST, GET_WORDCOUNT_SUCCESS} from '../actions/wordCount';
+
+const initialState = {
+    isCheckingWordCount: false
+};
+
+function wordCountReducer (state = initialState, action) {
+    switch(action.type) {
+        case GET_WORDCOUNT_REQUEST:
+            return {...state, isCheckingWordCount: true};
+        case GET_WORDCOUNT_SUCCESS:
+            return {...state, isCheckingWordCount: false, wordCount: action.payload};
+        default:
+            return state;
+    }
+}
+
+export default wordCountReducer;

Build/resources/sass/yoast.scss

@@ -225,6 +225,12 @@ div.yoast-analysis {
 		z-index: -1;
 	}
 
+	.yoast-insights-row {
+		display: flex;
+		gap: 40px;
+		padding-top: 15px;
+	}
+
 	.yoast-insights-card {
 		&__content {
 			padding-top: 5px;

CHANGELOG.md

@@ -10,6 +10,11 @@ We will follow [Semantic Versioning](http://semver.org/).
 ### Breaking
 - Replaced the `urlToCheck` with a new `ModifyPreviewUrl` event
 
+### Added
+- Added "Flesh reading score" to the Insights
+- Added "Reading time" to the Insights
+- Added "Word count" to the Insights
+
 ### Changed
 - Updated all the underlying Yoast libraries to the latest version
   - Added custom combine-reducers package to replace the existing one with CSP issues 

Resources/Private/Templates/TCA/Insights.html

@@ -1,8 +1,12 @@
 <html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
 <div class="yoastSeo-insights">
     <div data-yoast-insights></div>
-    <div data-yoast-flesch></div>
-    <div data-yoast-readingtime></div>
-    <div data-yoast-wordcount></div>
+    <div class="yoast-insights-row">
+        <div data-yoast-flesch></div>
+    </div>
+    <div class="yoast-insights-row">
+        <div data-yoast-readingtime></div>
+        <div data-yoast-wordcount></div>
+    </div>
 </div>
 </html>