Merge pull request Yoast#20933 from Yoast/feature/elementor-highlighting

Merges feature/elementor-highlighting to trunk
josevarghese · Dec 12, 2023 · ebe04d1 · ebe04d1
2 parents af062d9 + 807265d
commit ebe04d1
Show file tree

Hide file tree

Showing 39 changed files with 658 additions and 242 deletions.
diff --git a/admin/class-expose-shortlinks.php b/admin/class-expose-shortlinks.php
@@ -39,6 +39,9 @@ class WPSEO_Expose_Shortlinks implements WPSEO_WordPress_Integration {
 		'shortlinks.upsell.sidebar.keyphrase_distribution'          => 'https://yoa.st/keyphrase-distribution-sidebar',
 		'shortlinks.upsell.sidebar.word_complexity'                 => 'https://yoa.st/word-complexity-sidebar',
 		'shortlinks.upsell.sidebar.internal_linking_suggestions'    => 'https://yoa.st/internal-linking-suggestions-sidebar',
+		'shortlinks.upsell.sidebar.highlighting_seo_analysis'       => 'https://yoa.st/highlighting-seo-analysis',
+		'shortlinks.upsell.sidebar.highlighting_readability_analysis' => 'https://yoa.st/highlighting-readability-analysis',
+		'shortlinks.upsell.sidebar.highlighting_inclusive_analysis' => 'https://yoa.st/highlighting-inclusive-analysis',
 		'shortlinks.upsell.metabox.news'                            => 'https://yoa.st/get-news-metabox',
 		'shortlinks.upsell.metabox.go_premium'                      => 'https://yoa.st/pe-premium-page',
 		'shortlinks.upsell.metabox.focus_keyword_synonyms_button'   => 'https://yoa.st/keyword-synonyms-popup',

diff --git a/packages/analysis-report/src/AnalysisList.js b/packages/analysis-report/src/AnalysisList.js
@@ -108,6 +108,8 @@ export default function AnalysisList( props ) {
 				isPremium={ props.isPremium }
 				onResultChange={ props.onResultChange }
 				markButtonFactory={ props.markButtonFactory }
+				shouldUpsellHighlighting={ props.shouldUpsellHighlighting }
+				renderHighlightingUpsell={ props.renderHighlightingUpsell }
 			/>;
 		} ) }
 	</AnalysisListBase>;
@@ -124,6 +126,8 @@ AnalysisList.propTypes = {
 	onEditButtonClick: PropTypes.func,
 	isPremium: PropTypes.bool,
 	onResultChange: PropTypes.func,
+	shouldUpsellHighlighting: PropTypes.bool,
+	renderHighlightingUpsell: PropTypes.func,
 };
 
 AnalysisList.defaultProps = {
@@ -135,4 +139,6 @@ AnalysisList.defaultProps = {
 	onEditButtonClick: noop,
 	isPremium: false,
 	onResultChange: noop,
+	shouldUpsellHighlighting: false,
+	renderHighlightingUpsell: noop,
 };
diff --git a/packages/analysis-report/src/AnalysisResult.js b/packages/analysis-report/src/AnalysisResult.js
@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+/* eslint-disable complexity */
+import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { noop } from "lodash";
@@ -16,6 +17,7 @@ const AnalysisResultBase = styled.li`
 	padding: 0;
 	display: flex;
 	align-items: flex-start;
+	position: relative;
 `;
 
 const ScoreIcon = styled( SvgIcon )`
@@ -43,12 +45,13 @@ const areMarkButtonsHidden = function( props ) {
 /**
  * Factory method which creates a new instance of the default mark button.
  *
- * @param {String} ariaLabel The button aria-label.
- * @param {String} id The button id.
- * @param {String} className The button class name.
- * @param {String} status Status of the buttons. Supports: "enabled", "disabled".
- * @param {Function} onClick Onclick handler.
- * @param {Boolean} isPressed Whether the button is in a pressed state.
+ * @param {string} ariaLabel 	The button aria-label.
+ * @param {string} id 			The button id.
+ * @param {string} className 	The button class name.
+ * @param {string} status 		Status of the buttons. Supports: "enabled", "disabled", "hidden".
+ * @param {function} onClick 	Onclick handler.
+ * @param {boolean} isPressed 	Whether the button is in a pressed state.
+ *
  * @returns {JSX.Element} A new mark button.
  */
 const createMarkButton = ( {
@@ -79,14 +82,19 @@ const createMarkButton = ( {
  * @returns {ReactElement} The rendered AnalysisResult component.
  */
 const AnalysisResult = ( { markButtonFactory, ...props } ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const closeModal = useCallback( () => setIsOpen( false ), [] );
+	const openModal = useCallback( () => setIsOpen( true ), [] );
+
 	markButtonFactory = markButtonFactory || createMarkButton;
 	const { id, marker, hasMarksButton } = props;
 
 	let marksButton = null;
 	if ( ! areMarkButtonsHidden( props ) ) {
 		marksButton = markButtonFactory(
 			{
-				onClick: props.onButtonClickMarks,
+				onClick: props.shouldUpsellHighlighting ? openModal : props.onButtonClickMarks,
 				status: props.marksButtonStatus,
 				className: props.marksButtonClassName,
 				id: props.buttonIdMarks,
@@ -118,6 +126,7 @@ const AnalysisResult = ( { markButtonFactory, ...props } ) => {
 				<span dangerouslySetInnerHTML={ { __html: stripTagsFromHtmlString( props.text, ALLOWED_TAGS ) } } />
 			</AnalysisResultText>
 			{ marksButton }
+			{ props.renderHighlightingUpsell( isOpen, closeModal ) }
 			{
 				props.hasEditButton && props.isPremium &&
 				<IconCTAEditButton
@@ -157,6 +166,8 @@ AnalysisResult.propTypes = {
 		PropTypes.func,
 		PropTypes.array,
 	] ),
+	shouldUpsellHighlighting: PropTypes.bool,
+	renderHighlightingUpsell: PropTypes.func,
 };
 
 AnalysisResult.defaultProps = {
@@ -173,6 +184,8 @@ AnalysisResult.defaultProps = {
 	onResultChange: noop,
 	id: "",
 	marker: noop,
+	shouldUpsellHighlighting: false,
+	renderHighlightingUpsell: noop,
 };
 
 export default AnalysisResult;
diff --git a/packages/analysis-report/src/ContentAnalysis.js b/packages/analysis-report/src/ContentAnalysis.js
@@ -67,6 +67,8 @@ class ContentAnalysis extends React.Component {
 					onEditButtonClick={ this.props.onEditButtonClick }
 					isPremium={ this.props.isPremium }
 					onResultChange={ this.props.onResultChange }
+					shouldUpsellHighlighting={ this.props.shouldUpsellHighlighting }
+					renderHighlightingUpsell={ this.props.renderHighlightingUpsell }
 				/>
 			</StyledCollapsible>
 		);
@@ -152,6 +154,8 @@ ContentAnalysis.propTypes = {
 		goodResults: PropTypes.string,
 	} ),
 	onResultChange: PropTypes.func,
+	shouldUpsellHighlighting: PropTypes.bool,
+	renderHighlightingUpsell: PropTypes.func,
 };
 
 ContentAnalysis.defaultProps = {
@@ -172,6 +176,8 @@ ContentAnalysis.defaultProps = {
 	isPremium: false,
 	resultCategoryLabels: {},
 	onResultChange: () => {},
+	shouldUpsellHighlighting: false,
+	renderHighlightingUpsell: () => {},
 };
 
 export default ContentAnalysis;
diff --git a/packages/analysis-report/tests/__snapshots__/AnalysisResultTest.js.snap b/packages/analysis-report/tests/__snapshots__/AnalysisResultTest.js.snap
@@ -18,9 +18,20 @@ exports[`the AnalysisResult component matches the snapshot 1`] = `
 }
 
 .c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   box-sizing: border-box;
   min-width: 32px;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   border: 1px solid #ccc;
   background-color: #a4286a;
   box-shadow: inset 0 2px 0 rgba( 93,35,122,0.7 );
@@ -52,6 +63,7 @@ exports[`the AnalysisResult component matches the snapshot 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -166,6 +178,7 @@ exports[`the AnalysisResult component with a activated premium matches the snaps
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -258,6 +271,7 @@ exports[`the AnalysisResult component with a beta badge label matches the snapsh
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -326,9 +340,20 @@ exports[`the AnalysisResult component with disabled buttons matches the snapshot
 }
 
 .c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   box-sizing: border-box;
   min-width: 32px;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   border: 1px solid #ccc;
   background-color: #a4286a;
   box-shadow: inset 0 2px 0 rgba( 93,35,122,0.7 );
@@ -360,6 +385,7 @@ exports[`the AnalysisResult component with disabled buttons matches the snapshot
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -449,6 +475,7 @@ exports[`the AnalysisResult component with hidden buttons matches the snapshot 1
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -512,9 +539,20 @@ exports[`the AnalysisResult component with html in the text matches the snapshot
 }
 
 .c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   box-sizing: border-box;
   min-width: 32px;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   border: 1px solid #ccc;
   background-color: #a4286a;
   box-shadow: inset 0 2px 0 rgba( 93,35,122,0.7 );
@@ -546,6 +584,7 @@ exports[`the AnalysisResult component with html in the text matches the snapshot
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {
@@ -635,6 +674,7 @@ exports[`the AnalysisResult component with suppressed text matches the snapshot
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
+  position: relative;
 }
 
 .c2 {