Merge pull request #511 from ProgressPlanner/ari/branding

API to allow branding changes

Author: aristath

assets/js/web-components/prpl-badge-progress-bar.js

@@ -13,12 +13,13 @@
 customElements.define(
 	'prpl-badge-progress-bar',
 	class extends HTMLElement {
-		constructor( badgeId, points, maxPoints ) {
+		constructor( badgeId, points, maxPoints, brandingId = 0 ) {
 			// Get parent class properties
 			super();
 			badgeId = badgeId || this.getAttribute( 'data-badge-id' );
 			points = points || this.getAttribute( 'data-points' );
 			maxPoints = maxPoints || this.getAttribute( 'data-max-points' );
+			brandingId = brandingId || this.getAttribute( 'data-branding-id' );
 			const progress = ( points / maxPoints ) * 100;
 
 			this.innerHTML = `
@@ -49,6 +50,7 @@ customElements.define(
 								position: absolute;
 								left: calc(${ progress }% - 3.75rem);
 								top: -2.5rem;"
+							branding-id="${ brandingId }"
 						></prpl-badge>
 					</div>
 				</div>
@@ -93,16 +95,19 @@ const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
 	const badgeMaxPoints = progressBar.getAttribute( 'data-max-points' );
 	const badgeProgress = customElements.get( 'prpl-badge-progress-bar' );
 	const badgeNewPoints = parseInt( badgePoints ) + pointsDiff;
+	const brandingId = progressBar.getAttribute( 'data-branding-id' );
 
 	// Create a new badge progress bar.
 	const newProgressBar = new badgeProgress(
 		badgeId,
 		badgeNewPoints,
-		badgeMaxPoints
+		badgeMaxPoints,
+		brandingId
 	);
 	newProgressBar.setAttribute( 'data-badge-id', badgeId );
 	newProgressBar.setAttribute( 'data-points', badgeNewPoints );
 	newProgressBar.setAttribute( 'data-max-points', badgeMaxPoints );
+	newProgressBar.setAttribute( 'data-branding-id', brandingId );
 
 	// Replace the old badge progress bar with the new one.
 	progressBar.replaceWith( newProgressBar );

assets/js/web-components/prpl-badge.js

@@ -13,20 +13,26 @@
 customElements.define(
 	'prpl-badge',
 	class extends HTMLElement {
-		constructor( badgeId, badgeName ) {
+		constructor( badgeId, badgeName, brandingId = 0 ) {
 			// Get parent class properties
 			super();
 
 			badgeId = badgeId || this.getAttribute( 'badge-id' );
 			badgeName = badgeName || this.getAttribute( 'badge-name' );
+			brandingId = brandingId || this.getAttribute( 'branding-id' );
+
+			let url = `${ progressPlannerBadge.remoteServerRootUrl }/wp-json/progress-planner-saas/v1/badge-svg/?badge_id=${ badgeId }`;
+			if ( brandingId ) {
+				url += `&branding_id=${ brandingId }`;
+			}
 
 			if ( ! badgeName || 'null' === badgeName ) {
 				badgeName = `${ prplL10n( 'badge' ) }`;
 			}
 
 			this.innerHTML = `
 				<img
-					src="${ progressPlannerBadge.remoteServerRootUrl }/wp-json/progress-planner-saas/v1/badge-svg/?badge_id=${ badgeId }"
+					src="${ url }"
 					alt="${ badgeName }"
 					onerror="this.onerror=null;this.src='${ progressPlannerBadge.placeholderImageUrl }';"
 				/>

assets/js/web-components/prpl-gauge.js

@@ -26,6 +26,7 @@ customElements.define(
 				contentPadding:
 					'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)',
 				marginBottom: 'var(--prpl-padding)',
+				brandingId: 0,
 			},
 			content = ''
 		) {
@@ -60,6 +61,8 @@ customElements.define(
 				this.getAttribute( 'contentPadding' ) || props.contentPadding;
 			props.marginBottom =
 				this.getAttribute( 'marginBottom' ) || props.marginBottom;
+			props.brandingId =
+				this.getAttribute( 'branding-id' ) || props.brandingId;
 
 			this.innerHTML = `
 			<div style="padding: ${ props.contentPadding };
@@ -130,15 +133,17 @@ const prplUpdateRaviGauge = ( pointsDiff ) => {
 			contentPadding:
 				'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)',
 			marginBottom: 'var(--prpl-padding)',
+			brandingId: gaugeProps.brandingId,
 		},
-		`<prpl-badge complete="true" badge-id="${ gaugeProps.badgeId }" badge-name="${ gaugeProps.badgeName }"></prpl-badge>`
+		`<prpl-badge complete="true" badge-id="${ gaugeProps.badgeId }" badge-name="${ gaugeProps.badgeName }" branding-id="${ gaugeProps.brandingId }"></prpl-badge>`
 	);
 	gauge.id = gaugeProps.id;
 	gauge.setAttribute( 'background', gaugeProps.background );
 	gauge.setAttribute( 'color', gaugeProps.color );
 	gauge.setAttribute( 'data-max', gaugeProps.max );
 	gauge.setAttribute( 'data-value', newValue );
 	gauge.setAttribute( 'data-badge-id', gaugeProps.badgeId );
+	gauge.setAttribute( 'data-branding-id', gaugeProps.brandingId );
 
 	// Replace the old gauge with the new one.
 	const oldGauge = document.getElementById( gaugeProps.id );

classes/admin/class-page.php

@@ -12,6 +12,13 @@
  */
 class Page {
 
+	/**
+	 * Whether the branding inline styles have been added.
+	 *
+	 * @var boolean
+	 */
+	protected static $branding_inline_styles_added = false;
+
 	/**
 	 * Constructor.
 	 */
@@ -93,12 +100,21 @@ public function add_page() {
 		$page_identifier = 'progress-planner';
 
 		\add_menu_page(
-			'Progress Planner',
-			'Progress Planner' . $this->get_notification_counter(),
+			\progress_planner()->get_ui__branding()->get_admin_submenu_name(),
+			\progress_planner()->get_ui__branding()->get_admin_menu_name() . $this->get_notification_counter(),
+			'manage_options',
+			$page_identifier,
+			'__return_empty_string',
+			\progress_planner()->get_ui__branding()->get_admin_menu_icon()
+		);
+
+		\add_submenu_page(
+			$page_identifier,
+			\progress_planner()->get_ui__branding()->get_admin_submenu_name(),
+			\progress_planner()->get_ui__branding()->get_admin_submenu_name() . $this->get_notification_counter(),
 			'manage_options',
 			$page_identifier,
 			[ $this, 'render_page' ],
-			'data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjggNTAwIj48cGF0aCBmaWxsPSIjMzgyOTZkIiBkPSJNMjE3LjQ2IDE3Mi45YzMuMjEuMTIgNS45NyAxLjc0IDcuNzMgNC4xNS0xLjg3LTEwLjI0LTEwLjY0LTE4LjE3LTIxLjQ4LTE4LjU2LTEyLjUyLS40NS0yMy4wMyA5LjMzLTIzLjQ4IDIxLjg1LS40NSAxMi41MiA5LjMzIDIzLjAzIDIxLjg1IDIzLjQ4IDkuNC4zNCAxNy42Ny01LjEgMjEuNC0xMy4xMy0xLjgzIDEuNTEtNC4xOCAyLjQyLTYuNzQgMi4zMy01LjU1LS4yLTkuODktNC44Ni05LjY5LTEwLjQxLjItNS41NSA0Ljg2LTkuODkgMTAuNDEtOS42OVpNMjQxLjUxIDMwNS44NGMuNTggMS45MiAxLjEzIDMuODYgMS43MyA1Ljc3IDE0LjA0IDQ0Ljk3IDMzLjk0IDg4Ljc1IDU2LjQyIDEyNC4yN2w2Ny43NS0xMzAuMDRoLTEyNS45Wk0yOTcuOTYgMjA1Ljk3YzEyLjEyLTQuNSAyMy41NC03LjE4IDMzLjY0LTguOTYtMjIuNTEtMjIuMjctNjEuMjQtMjcuMDYtNjEuNDctMjcuMDkgMS4yNyA2LjE3LjU4IDE1LjgtMi40NCAyNi40Ni0zLjMgMTEuNjYtOS4zOCAyNC41NC0xOC43IDM1LjQ4LTMuNDUgNC4wNi03LjM2IDcuODMtMTEuNzMgMTEuMTloLjA3di0uMDFjLjE2LjYyLjM4IDEuMi41OCAxLjc5IDIuNzQgOC4yNyA4LjYxIDEzLjc0IDE0LjkzIDE3LjE0IDYuNDggMy40OSAxMy4zNyA0LjgzIDE3LjY4IDQuODMgNi40IDAgMTEuODgtMy43OSAxNC40My05LjIyLjk3LTIuMDYgMS41NS00LjMzIDEuNTUtNi43NiAwLTMuODUtMS40Mi03LjM0LTMuNjktMTAuMS0xLjkyLTIuMzMtNC40Ni00LjA4LTcuMzktNS4wM2w0NC44Mi04LjY1Yy02LjYzLTYuMTItMTQuNzItMTEuNTktMjIuNzMtMTYuMjMtMS45Ny0xLjE0LTEuNjktNC4wNS40NS00Ljg0WiIvPjxwYXRoIGZpbGw9IiNmYWEzMTAiIGQ9Ik0yODEuMzcgNDU4LjM3Yy0yNS43OS0zOC44NC00OC42OC04OC4wNC02NC40NS0xMzguNTQtMS40NS00LjYzLTIuODMtOS4zMS00LjE3LTEzLjk5LTEuMTItMy45NC0yLjIyLTcuODgtMy4yNS0xMS44LTIuMDktNy45Mi05LjI4LTEzLjQ2LTE3LjQ4LTEzLjQ2aC0yNy45NWMtOC4yIDAtMTUuMzkgNS41My0xNy40OCAxMy40NS0yLjI4IDguNjUtNC43OCAxNy4zMi03LjQyIDI1Ljc5LTE1Ljc3IDUwLjUtMzguNjUgOTkuNy02NC40NSAxMzguNTQtNC4wMSA2LjAzLTEuNzggMTEuNjMtLjY0IDEzLjc2IDIuNCA0LjQ3IDYuODYgNy4xNCAxMS45NCA3LjE0aDY2LjAxbDMuOTcgNi45MmM0LjU0IDcuOSAxMi45OSAxMi44MSAyMi4wNSAxMi44MXMxNy41MS00LjkxIDIyLjA2LTEyLjgxbDMuOTgtNi45Mmg2NmMzLjIyIDAgNi4xOS0xLjA4IDguNTUtMy4wMiAxLjM1LTEuMTEgMi41MS0yLjQ5IDMuMzgtNC4xMy41Ny0xLjA3IDEuNDItMy4wMiAxLjYxLTUuNDYuMTktMi40MS0uMjYtNS4zMS0yLjI1LTguMzFaIi8+PHBhdGggZmlsbD0iIzM4Mjk2ZCIgZD0iTTI5NS43IDc2LjA2Yy03LjU0LTEyLjA1LTMyLjM4IDEtNTkuNTQgMi44Ni0xNS4wNCAxLjAzLTM3LjA1LTExMC42My03MS43Ny01Ni45OS0zOS41NiA2MS4xLTc5LjEyLTQ0LjY4LTg4LjY2LTE1LjgzLTIxLjExIDQzLjI3IDI1LjE1IDg0LjYxIDI1LjE1IDg0LjYxcy0xMi44NCA3LjkyLTIwLjYzIDEzLjkzYy01LjQ3IDQuMTctMTAuODIgOC42NS0xNi4wMyAxMy41MS0yMC40NSAxOS4wMy0zNi4wNCA0MC4zMi00Ni43NyA2My44NkM2LjcyIDIwNS41NSAxLjExIDIyOS41OS42MiAyNTQuMTVjLS40OSAyNC41NiA0LjAxIDQ5LjEgMTMuNTQgNzMuNjMgOS41MiAyNC41MyAyNC4xNyA0Ny40MiA0My45NSA2OC42OCA0LjAyIDQuMzIgOC4xMiA4LjQxIDEyLjMxIDEyLjMgNC4xLTYuMzEgNy45Ny0xMi43NCAxMS42NC0xOS4yNiA0LjM5LTcuOCA4LjUtMTUuNzIgMTIuMjUtMjMuNzgtLjMzLS4zNS0uNjYtLjY5LS45OS0xLjAzLS4xNy0uMTgtLjM0LS4zNS0uNTEtLjUzLTE1LjUzLTE2LjY5LTI3LjE3LTM0LjU5LTM0LjkzLTUzLjcyLTcuNzctMTkuMTMtMTEuNS0zOC4yNS0xMS4yLTU3LjM2LjI5LTE5LjEgNC40Ny0zNy42OCAxMi41My01NS43MiA4LjA2LTE4LjA1IDIwLjAyLTM0LjQ1IDM1LjktNDkuMjIgMTMuOTktMTMuMDIgMjguODQtMjIuODMgNDQuNTUtMjkuNDEgMTUuNy02LjU5IDMxLjYzLTkuOTggNDcuNzYtMTAuMTggOS4wNS0uMTEgMTkuMTEgMS4xNSAyOS41MSA0LjUgMTAuMzIgNC4yNyAxOS4yMiA5LjQ0IDI2LjYzIDE1LjM1IDEwLjE5IDguMTMgMTcuNjEgMTcuNjUgMjIuMjIgMjguMSAxLjkxIDQuMzIgMy4zNyA4LjggNC4zMiAxMy40MSAxNi4yNy0yOC4yNyAzNi43NS03NS45NiAyNS41Ny05My44M1oiLz48L3N2Zz4='
 		);
 
 		// Wipe notification bits from hooks.
@@ -279,6 +295,10 @@ public function enqueue_styles() {
 		}
 
 		\progress_planner()->get_admin__enqueue()->enqueue_style( 'progress-planner/admin' );
+		if ( ! static::$branding_inline_styles_added ) {
+			\wp_add_inline_style( 'progress-planner/admin', \progress_planner()->get_ui__branding()->get_custom_css() );
+			static::$branding_inline_styles_added = true;
+		}
 		\progress_planner()->get_admin__enqueue()->enqueue_style( 'progress-planner/web-components/prpl-tooltip' );
 		\progress_planner()->get_admin__enqueue()->enqueue_style( 'progress-planner/web-components/prpl-install-plugin' );
 

classes/admin/widgets/class-whats-new.php

@@ -14,13 +14,6 @@
  */
 final class Whats_New extends Widget {
 
-	/**
-	 * The cache key.
-	 *
-	 * @var string
-	 */
-	const CACHE_KEY = 'blog_feed';
-
 	/**
 	 * The widget ID.
 	 *
@@ -34,13 +27,13 @@ final class Whats_New extends Widget {
 	 * @return array
 	 */
 	public function get_blog_feed() {
-		$feed_data = \progress_planner()->get_utils__cache()->get( self::CACHE_KEY );
+		$feed_data = \progress_planner()->get_utils__cache()->get( $this->get_cache_key() );
 
 		// Migrate old feed to new format.
 		if ( \is_array( $feed_data ) && ! isset( $feed_data['expires'] ) && ! isset( $feed_data['feed'] ) ) {
 			$feed_data = [
 				'feed'    => $feed_data,
-				'expires' => \get_option( '_transient_timeout_' . Cache::CACHE_PREFIX . self::CACHE_KEY, 0 ),
+				'expires' => \get_option( '_transient_timeout_' . Cache::CACHE_PREFIX . $this->get_cache_key(), 0 ),
 			];
 		}
 
@@ -55,7 +48,7 @@ public function get_blog_feed() {
 		// Transient expired, fetch new feed.
 		if ( $feed_data['expires'] < \time() ) {
 			// Get the feed using the REST API.
-			$response = \wp_remote_get( \progress_planner()->get_remote_server_root_url() . '/wp-json/wp/v2/posts/?per_page=2' );
+			$response = \wp_remote_get( \progress_planner()->get_ui__branding()->get_blog_feed_url() . '/wp-json/wp/v2/posts/?per_page=2' );
 
 			if ( 200 !== \wp_remote_retrieve_response_code( $response ) ) {
 				// If we cant fetch the feed, we will try again later.
@@ -82,9 +75,18 @@ public function get_blog_feed() {
 			}
 
 			// Transient uses 'expires' key to determine if it's expired.
-			\progress_planner()->get_utils__cache()->set( self::CACHE_KEY, $feed_data, 0 );
+			\progress_planner()->get_utils__cache()->set( $this->get_cache_key(), $feed_data, 0 );
 		}
 
 		return $feed_data['feed'];
 	}
+
+	/**
+	 * Get the cache key.
+	 *
+	 * @return string
+	 */
+	public function get_cache_key() {
+		return 'blog_feed_' . md5( \progress_planner()->get_ui__branding()->get_blog_feed_url() );
+	}
 }

classes/class-base.php

@@ -40,6 +40,7 @@
  * @method \Progress_Planner\Suggested_Tasks get_suggested_tasks()
  * @method \Progress_Planner\Suggested_Tasks_DB get_suggested_tasks_db()
  * @method \Progress_Planner\Utils\Deprecations get_utils__deprecations()
+ * @method \Progress_Planner\UI\Branding get_ui__branding()
  * @method \Progress_Planner\Plugin_Installer get_plugin_installer()
  * @method \Progress_Planner\Admin\Widgets\Badge_Streak_Content get_admin__widgets__badge_streak_content()
  * @method \Progress_Planner\Admin\Widgets\Badge_Streak_Maintenance get_admin__widgets__badge_streak_maintenance()

classes/suggested-tasks/providers/class-disable-comment-pagination.php

@@ -102,7 +102,7 @@ public function print_popover_instructions() {
 			/* translators: %d is the number of comments per page, %s is the "recommend to disable comment pagination" link */
 			\esc_html__( 'When comment pagination is enabled, your site creates a new page for every %1$d comments. This is not helping your website in search engines, and can break up the ongoing conversation. That\'s why we %2$s.', 'progress-planner' ),
 			(int) \get_option( 'comments_per_page' ),
-			'<a href="https://prpl.fyi/disable-comment-pagination" target="_blank">' . \esc_html__( 'recommend to disable comment pagination', 'progress-planner' ) . '</a>'
+			'<a href="' . \esc_url( \progress_planner()->get_ui__branding()->get_url( 'https://prpl.fyi/disable-comment-pagination' ) ) . '" target="_blank">' . \esc_html__( 'recommend to disable comment pagination', 'progress-planner' ) . '</a>'
 		);
 		echo '</p>';
 	}

classes/suggested-tasks/providers/class-email-sending.php

@@ -96,13 +96,6 @@ class Email_Sending extends Tasks_Interactive {
 	 */
 	protected $is_wp_mail_overridden = false;
 
-	/**
-	 * The troubleshooting guide URL.
-	 *
-	 * @var string
-	 */
-	protected $troubleshooting_guide_url = 'https://prpl.fyi/troubleshoot-smtp';
-
 	/**
 	 * Initialize the task provider.
 	 *
@@ -125,11 +118,21 @@ public function init() {
 		$this->email_subject = \esc_html__( 'Your Progress Planner test message!', 'progress-planner' );
 		$this->email_content = \sprintf(
 			// translators: %1$s the admin URL.
-			\__( 'You just used Progress Planner to verify if sending email works on your website. <br><br> The good news; it does! <a href="%1$s" target="_self">Click here to mark Ravi\'s Recommendation as completed</a>.', 'progress-planner' ),
-			\admin_url( 'admin.php?page=progress-planner&prpl_complete_task=' . $this->get_task_id() )
+			\__( 'You just used Progress Planner to verify if sending email works on your website. <br><br> The good news; it does! <a href="%1$s" target="_self">Click here to mark %2$s\'s Recommendation as completed</a>.', 'progress-planner' ),
+			\admin_url( 'admin.php?page=progress-planner&prpl_complete_task=' . $this->get_task_id() ),
+			\esc_html( \progress_planner()->get_ui__branding()->get_ravi_name() )
 		);
 	}
 
+	/**
+	 * Get the troubleshooting guide URL.
+	 *
+	 * @return string
+	 */
+	protected function get_troubleshooting_guide_url() {
+		return \esc_url( \progress_planner()->get_ui__branding()->get_url( 'https://prpl.fyi/troubleshoot-smtp' ) );
+	}
+
 	/**
 	 * We want task to be added always.
 	 *
@@ -207,7 +210,7 @@ public function enqueue_scripts( $hook ) {
 					'ajax_url'                  => \admin_url( 'admin-ajax.php' ),
 					'nonce'                     => \wp_create_nonce( 'progress_planner' ),
 					'unknown_error'             => \esc_html__( 'Unknown error', 'progress-planner' ),
-					'troubleshooting_guide_url' => $this->troubleshooting_guide_url,
+					'troubleshooting_guide_url' => $this->get_troubleshooting_guide_url(),
 				],
 			]
 		);
@@ -299,7 +302,7 @@ public function the_popover_content() {
 				'prpl_provider_id'                     => $this->get_provider_id(),
 				'prpl_email_subject'                   => $this->email_subject,
 				'prpl_email_error'                     => $this->email_error,
-				'prpl_troubleshooting_guide_url'       => $this->troubleshooting_guide_url,
+				'prpl_troubleshooting_guide_url'       => $this->get_troubleshooting_guide_url(),
 				'prpl_is_there_sending_email_override' => $this->is_there_sending_email_override(),
 				'prpl_task_actions'                    => $this->get_task_actions(),
 			]

classes/suggested-tasks/providers/class-tasks.php

@@ -284,7 +284,7 @@ public function get_provider_id() {
 	 * @return string
 	 */
 	public function get_external_link_url() {
-		return static::EXTERNAL_LINK_URL;
+		return \progress_planner()->get_ui__branding()->get_url( static::EXTERNAL_LINK_URL );
 	}
 
 	/**

classes/suggested-tasks/providers/integrations/yoast/class-fix-orphaned-content.php

@@ -89,7 +89,9 @@ protected function get_title_with_data( $task_data = [] ) {
 	 * @return string
 	 */
 	protected function get_url_with_data( $task_data = [] ) {
-		return \get_post( $task_data['target_post_id'] ) ? 'https://prpl.fyi/fix-orphaned-content' : '';
+		return \get_post( $task_data['target_post_id'] )
+			? \progress_planner()->get_ui__branding()->get_url( 'https://prpl.fyi/fix-orphaned-content' )
+			: '';
 	}
 
 	/**
@@ -230,7 +232,7 @@ public function exclude_completed_posts( $exclude_post_ids ) {
 	public function add_task_actions( $data = [], $actions = [] ) {
 		$actions[] = [
 			'priority' => 10,
-			'html'     => '<a class="prpl-tooltip-action-text" href="https://prpl.fyi/fix-orphaned-content" target="_blank">' . \esc_html__( 'Learn more about internal linking', 'progress-planner' ) . '</a>',
+			'html'     => '<a class="prpl-tooltip-action-text" href="' . \esc_url( \progress_planner()->get_ui__branding()->get_url( 'https://prpl.fyi/fix-orphaned-content' ) ) . '" target="_blank">' . \esc_html__( 'Learn more about internal linking', 'progress-planner' ) . '</a>',
 		];
 
 		return $actions;