Merge branch 'feature/content-analysis-in-sidebar' into stories/9305-…

…2-implement-openSections

js/src/analysis/PostDataCollector.js

@@ -10,7 +10,7 @@ import { update as updateTrafficLight } from "../ui/trafficLight";
 import { update as updateAdminBar }from "../ui/adminBar";
 
 import publishBox from "../ui/publishBox";
-import isGutenbergDataAvailable from "../helpers/isGutenbergDataAvailable";
+import { isGutenbergDataAvailable } from "../helpers/isGutenbergAvailable";
 
 let $ = jQuery;
 let currentKeyword = "";

js/src/edit.js

@@ -10,15 +10,16 @@ import flowRight from "lodash/flowRight";
 
 import IntlProvider from "./components/IntlProvider";
 import markerStatusReducer from "./redux/reducers/markerButtons";
-import analysis from "yoast-components/composites/Plugin/ContentAnalysis/reducers/contentAnalysisReducer";
-import activeKeyword from "./redux/reducers/activeKeyword";
 import keywordsReducer from "./redux/reducers/keywords";
+import analysisReducer from "yoast-components/composites/Plugin/ContentAnalysis/reducers/contentAnalysisReducer";
+import activeKeywordReducer from "./redux/reducers/activeKeyword";
 import activeTab from "./redux/reducers/activeTab";
 import AnalysisSection from "./components/contentAnalysis/AnalysisSection";
 import Data from "./analysis/data.js";
-import isGutenbergDataAvailable from "./helpers/isGutenbergDataAvailable";
+import { isGutenbergDataAvailable } from "./helpers/isGutenbergAvailable";
 import SnippetPreviewSection from "./components/SnippetPreviewSection";
 import openSidebarSectionsReducer from "./redux/reducers/openSidebarSections";
+import cornerstoneContentReducer from "./redux/reducers/cornerstoneContent";
 
 // This should be the entry point for all the edit screens. Because of backwards compatibility we can't change this at once.
 let localizedData = { intl: {} };
@@ -52,10 +53,11 @@ function configureStore() {
 
 	const rootReducer = combineReducers( {
 		marksButtonStatus: markerStatusReducer,
-		analysis: analysis,
-		activeKeyword: activeKeyword,
 		keywords: keywordsReducer,
 		openSidebarSections: openSidebarSectionsReducer,
+		analysis: analysisReducer,
+		activeKeyword: activeKeywordReducer,
+		isCornerstone: cornerstoneContentReducer,
 		activeTab,
 	} );
 

js/src/helpers/isGutenbergAvailable.js

@@ -0,0 +1,25 @@
+/* global wp */
+
+import isUndefined from "lodash/isUndefined";
+
+/**
+ * Checks if the data API from Gutenberg is available.
+ *
+ * @returns {boolean} True if the data API is available.
+ */
+export const isGutenbergDataAvailable = () => {
+	return ( ! isUndefined( window.wp ) && ! isUndefined( wp.data ) );
+};
+
+/**
+ * Checks if the Gutenberg editor is being used.
+ *
+ * Gutenberg uses wp_add_inline_script to pass along the initial post data.
+ * Therefor we can test if this variable exists to know if the Gutenberg editor is being used.
+ * see: https://github.com/WordPress/gutenberg/blob/master/lib/client-assets.php#L853
+ *
+ * @returns {boolean} True if the Gutenberg editor is being used.
+ */
+export const isGutenbergPostAvailable = () => {
+	return ! isUndefined( window._wpGutenbergPost );
+};

js/src/redux/actions/cornerstoneContent.js

@@ -0,0 +1,14 @@
+const PREFIX = "WPSEO_";
+
+export const TOGGLE_CORNERSTONE_CONTENT = `${ PREFIX }TOGGLE_CORNERSTONE_CONTENT`;
+
+/**
+ * An action creator for toggling whether the current item is cornerstone content or not.
+ *
+ * @returns {Object} The toggle cornerstone content action.
+ */
+export const toggleCornerstoneContent = function() {
+	return {
+		type: TOGGLE_CORNERSTONE_CONTENT,
+	};
+};

js/src/redux/reducers/activeKeyword.js

@@ -5,10 +5,10 @@ const INITIAL_STATE = null;
 /**
  * A reducer for the active keyword.
  *
- * @param {Object} state The current state of the object.
+ * @param {string} state The current state of the object.
  * @param {Object} action The current action received.
  *
- * @returns {Object} The state.
+ * @returns {string} The state.
  */
 function activeKeywordReducer( state = INITIAL_STATE, action ) {
 	switch( action.type ) {

js/src/redux/reducers/cornerstoneContent.js

@@ -0,0 +1,22 @@
+import { TOGGLE_CORNERSTONE_CONTENT } from "../actions/cornerstoneContent";
+
+const INITIAL_STATE = false;
+
+/**
+ * A reducer for the active keyword.
+ *
+ * @param {boolean} state The current state of the object.
+ * @param {Object} action The current action received.
+ *
+ * @returns {boolean} The state.
+ */
+function cornerstoneContentReducer( state = INITIAL_STATE, action ) {
+	switch( action.type ) {
+		case TOGGLE_CORNERSTONE_CONTENT:
+			return ! state;
+		default:
+			return state;
+	}
+}
+
+export default cornerstoneContentReducer;

js/src/wp-seo-post-scraper.js

@@ -24,6 +24,7 @@ import isContentAnalysisActive from "./analysis/isContentAnalysisActive";
 import snippetPreviewHelpers from "./analysis/snippetPreview";
 import UsedKeywords from "./analysis/usedKeywords";
 import { setMarkerStatus } from "./redux/actions/markerButtons";
+import { isGutenbergPostAvailable } from "./helpers/isGutenbergAvailable";
 
 ( function( $ ) {
 	"use strict"; // eslint-disable-line
@@ -96,7 +97,7 @@ import { setMarkerStatus } from "./redux/actions/markerButtons";
 	 * @returns {boolean} True when markers should be shown.
 	 */
 	function displayMarkers() {
-		return wpseoPostScraperL10n.show_markers === "1";
+		return ! isGutenbergPostAvailable() && wpseoPostScraperL10n.show_markers === "1";
 	}
 
 	/**

js/tests/isGutenbergDataAvailable.test.js → js/tests/isGutenbergAvailable.test.js

@@ -1,4 +1,4 @@
-import isGutenbergDataAvailable from "../src/helpers/isGutenbergDataAvailable.js";
+import { isGutenbergDataAvailable, isGutenbergPostAvailable } from "../src/helpers/isGutenbergAvailable.js";
 
 describe( 'isGutenbergDataAvailable', () => {
 	it( 'returns true if both wp and wp.data are defined', () => {
@@ -17,3 +17,16 @@ describe( 'isGutenbergDataAvailable', () => {
 		expect( actual ).toBe( false );
 	} );
 } );
+
+describe( 'isGutenbergPostAvailable', () => {
+	it( 'returns true if _wpGutenbergPost is defined', () => {
+		window._wpGutenbergPost = { id: 1234 };
+		const actual = isGutenbergPostAvailable();
+		expect( actual ).toBe( true );
+	} );
+	it( 'returns false if _wpGutenbergPost is not defined', () => {
+		delete window._wpGutenbergPost;
+		const actual = isGutenbergPostAvailable();
+		expect( actual ).toEqual( false );
+	} );
+} );

js/tests/redux/actions/cornerstoneContent.test.js

@@ -0,0 +1,14 @@
+/* global describe, it, expect */
+
+import * as actions from "../../../src/redux/actions/cornerstoneContent";
+
+describe( "cornerstone actions", () => {
+	it( "toggleCornerstoneContent should return an action with the TOGGLE_CORNERSTONE_CONTENT type", () => {
+		const expected = {
+			type: actions.TOGGLE_CORNERSTONE_CONTENT,
+		};
+		const actual = actions.toggleCornerstoneContent();
+
+		expect( actual ).toEqual( expected );
+	} );
+} );

js/tests/redux/reducers/cornerstoneContent.test.js

@@ -0,0 +1,26 @@
+/* global describe, it, expect */
+
+import { toggleCornerstoneContent } from "../../../src/redux/actions/cornerstoneContent";
+import cornerstoneContentReducer from "../../../src/redux/reducers/cornerstoneContent";
+
+describe( "cornerstone reducers", () => {
+	describe( "cornerstoneContentReducer on receiving the TOGGLE_CORNERSTONE_CONTENT action", () => {
+		it( "should set isCornerstoneContent's current value to true if it was false", () => {
+			const state = false;
+			const action = toggleCornerstoneContent();
+			const expected = true;
+			const actual = cornerstoneContentReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+
+		it( "should set isCornerstoneContent's current value to false if it was true", () => {
+			const state = true;
+			const action = toggleCornerstoneContent();
+			const expected = false;
+			const actual = cornerstoneContentReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+	} );
+} );