Merge pull request #413 from ProgressPlanner/filip/yoast-ravi-styling

Consistent styling for Ravi focus icon

Author: aristath

assets/css/focus-element.css

@@ -16,7 +16,7 @@
 	gap: 0.25rem;
 	background-color: #fff9f0;
 	font-size: 0.75rem;
-	border: 2px solid #faa310;
+	border: 2px solid #faa310 !important;
 	border-radius: 1rem;
 	color: #534786;
 	font-weight: 600;

assets/js/yoast-focus-element.js

@@ -95,6 +95,8 @@ function waitForMainAndObserveContent() {
 								const valueElement = el.querySelector(
 									task.valueElement.elementSelector
 								);
+								let raviIconPositionAbsolute = true;
+
 								if ( valueElement ) {
 									// We usually add icon to the option header.
 									let addIconElement = valueElement.closest(
@@ -109,6 +111,8 @@ function waitForMainAndObserveContent() {
 										addIconElement = valueElement
 											.closest( 'fieldset' )
 											.querySelector( task.iconElement );
+
+										raviIconPositionAbsolute = false;
 									}
 
 									// Upload input field.
@@ -122,25 +126,37 @@ function waitForMainAndObserveContent() {
 											'.prpl-form-row-ravi'
 										)
 									) {
-										addIconElement.style.position =
-											'relative';
+										// Check for value if specified in task.
+										const valueMatches = checkTaskValue(
+											valueElement,
+											task
+										);
 
 										// Create a new span with the class prpl-form-row-ravi.
 										const raviIconWrapper =
 											document.createElement( 'span' );
 										raviIconWrapper.classList.add(
-											'prpl-form-row-ravi'
+											'prpl-form-row-ravi',
+											'prpl-element-awards-points-icon-wrapper'
 										);
-										raviIconWrapper.style.position =
-											'absolute';
-										raviIconWrapper.style.right = '-1.5rem';
-										raviIconWrapper.style.top = '0';
 
-										// Check for value if specified in task.
-										const valueMatches = checkTaskValue(
-											valueElement,
-											task
-										);
+										if ( valueMatches ) {
+											raviIconWrapper.classList.add(
+												'complete'
+											);
+										}
+
+										// Styling for absolute positioning.
+										if ( raviIconPositionAbsolute ) {
+											addIconElement.style.position =
+												'relative';
+
+											raviIconWrapper.style.position =
+												'absolute';
+											raviIconWrapper.style.right =
+												'3.5rem';
+											raviIconWrapper.style.top = '-7px';
+										}
 
 										raviIconWrapper.appendChild(
 											document.createElement( 'span' )
@@ -156,16 +172,29 @@ function waitForMainAndObserveContent() {
 										iconImg.width = 16;
 										iconImg.height = 16;
 
-										// Apply grayscale if state doesn't match
-										iconImg.style.filter = ! valueMatches
-											? 'grayscale(100%)'
-											: 'none';
-
 										// Append the icon image to the raviIconWrapper.
 										raviIconWrapper
 											.querySelector( 'span' )
 											.appendChild( iconImg );
 
+										// Add the points to the raviIconWrapper.
+										const pointsWrapper =
+											document.createElement( 'span' );
+										pointsWrapper.classList.add(
+											'prpl-form-row-points'
+										);
+										pointsWrapper.textContent = valueMatches
+											? '✓'
+											: '+1';
+										raviIconWrapper.appendChild(
+											pointsWrapper
+										);
+
+										// Finally add the raviIconWrapper to the DOM.
+										addIconElement.appendChild(
+											raviIconWrapper
+										);
+
 										// Watch for changes in aria-checked to update the icon dynamically
 										const valueElementObserver =
 											new MutationObserver( () => {
@@ -175,10 +204,22 @@ function waitForMainAndObserveContent() {
 														valueElement,
 														task
 													);
-												iconImg.style.filter =
-													! currentValueMatches
-														? 'grayscale(100%)'
-														: 'none';
+
+												if ( currentValueMatches ) {
+													raviIconWrapper.classList.add(
+														'complete'
+													);
+
+													pointsWrapper.textContent =
+														'✓';
+												} else {
+													raviIconWrapper.classList.remove(
+														'complete'
+													);
+
+													pointsWrapper.textContent =
+														'+1';
+												}
 											} );
 
 										valueElementObserver.observe(
@@ -191,11 +232,6 @@ function waitForMainAndObserveContent() {
 												],
 											}
 										);
-
-										// Finally add the raviIconWrapper to the DOM.
-										addIconElement.appendChild(
-											raviIconWrapper
-										);
 									}
 								}
 							}

classes/suggested-tasks/local-tasks/providers/integrations/yoast/class-add-yoast-providers.php

@@ -63,6 +63,9 @@ public function enqueue_assets( $hook ) {
 				],
 			]
 		);
+
+		// Enqueue the style.
+		\progress_planner()->get_admin__enqueue()->enqueue_style( 'progress-planner/focus-element' );
 	}
 	/**
 	 * Add the providers.

classes/suggested-tasks/local-tasks/providers/integrations/yoast/class-organization-logo.php

@@ -73,10 +73,10 @@ public function get_focus_tasks() {
 			'iconElement'  => 'legend.yst-label',
 			'valueElement' => [
 				'elementSelector' => $this->yoast_seo->helpers->options->get( 'company_or_person', 'company' ) !== 'person'
-					? 'input[name="wpseo_titles.company_logo_id"]'
-					: 'input[name="wpseo_titles.person_logo_id"]',
+					? 'input[name="wpseo_titles.company_logo"]'
+					: 'input[name="wpseo_titles.person_logo"]',
 				'attributeName'   => 'value',
-				'attributeValue'  => '0',
+				'attributeValue'  => '',
 				'operator'        => '!=',
 			],
 		];