Merge branch 'develop' into filip/fix-201

CHANGELOG.md

@@ -2,8 +2,14 @@
 
 Fixed:
 
-* Duplicate weekly suggested tasks.
-* Fixed the REST API endpoint for getting stats.
+* Remove duplicated weekly suggested tasks.
+* The REST API endpoint for getting stats was broken, causing the weekly emails not to work.
+* Scrollable monthly badges widget was the wrong height on page load.
+* 2026 monthly badges were showing up and shouldn't (yet).
+
+Enhancements:
+
+* Refocus the "add new task" input after a to-do item is added.
 
 = 1.0.1 =
 

README.md

@@ -7,7 +7,7 @@
 
 # Progress Planner
 
-![Progress Planner - Powering your website's progress](https://repository-images.githubusercontent.com/753019432/24c42936-cd56-4192-8f28-503073087bd1)
+![Progress Planner - Powering your website's progress](https://repository-images.githubusercontent.com/753019432/5ca27f0c-4380-4b01-a18c-1c7633262659)
 
 ## What does this plugin do?
 

assets/css/dashboard-widgets/score.css

@@ -1,6 +1,7 @@
 #progress_planner_dashboard_widget_score {
 
 	.prpl-dashboard-widget {
+		padding-top: 5px; /* Total 16px top spacing */
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 		grid-gap: calc(var(--prpl-gap) / 2);
@@ -36,12 +37,12 @@
 	}
 
 	.prpl-dashboard-widget-footer {
-		margin-top: 1em;
-		padding-top: 1em;
+		margin-top: 1rem;
+		padding-top: 1rem;
 		border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
 		font-size: var(--prpl-font-size-base);
 		display: flex;
-		gap: 1em;
+		gap: 0.5rem;
 		align-items: center;
 	}
 }

assets/css/page-widgets/whats-new.css

@@ -57,4 +57,5 @@
 	border-radius: var(--prpl-border-radius);
 	box-shadow: 5px 5px 5px var(--prpl-color-gray-2);
 	border: 1px solid var(--prpl-color-gray-2);
+	background-color: var(--prpl-color-gray-1); /* Fallback, if remote host image is not accessible */
 }

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

@@ -20,6 +20,9 @@ customElements.define(
 					}"
 					alt="Badge"
 					${ false === complete ? 'style="filter: grayscale(1);opacity: 0.25;"' : '' }
+					onerror="this.onerror=null;this.src='${
+						progressPlannerBadge.placeholderImageUrl
+					}';"
 				/>
 			`;
 		}

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

@@ -16,6 +16,9 @@ customElements.define(
 				start: '270deg',
 				cutout: '57%',
 				contentFontSize: 'var(--prpl-font-size-6xl)',
+				contentPadding:
+					'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)',
+				marginBottom: 'var(--prpl-padding)',
 			},
 			content = ''
 		) {
@@ -41,11 +44,18 @@ customElements.define(
 			props.cutout = this.getAttribute( 'cutout' ) || props.cutout;
 			props.contentFontSize =
 				this.getAttribute( 'contentFontSize' ) || props.contentFontSize;
+			props.contentPadding =
+				this.getAttribute( 'contentPadding' ) || props.contentPadding;
+			props.marginBottom =
+				this.getAttribute( 'marginBottom' ) || props.marginBottom;
 
 			this.innerHTML = `
-			<div style="padding: var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding); background: ${
+			<div style="padding: ${ props.contentPadding };
+			background: ${
 				props.background
-			}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative;margin-bottom: var(--prpl-padding);">
+			}; border-radius:var(--prpl-border-radius-big); aspect-ratio: 2 / 1; overflow: hidden; position: relative; margin-bottom: ${
+				props.marginBottom
+			};">
 				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${
 					props.background
 				} 0 ${ props.cutout }, transparent ${

assets/js/widgets/suggested-tasks.js

@@ -1,5 +1,4 @@
 /* global customElements, progressPlannerSuggestedTasks, confetti, prplDocumentReady, progressPlannerSuggestedTask */
-const PRPL_SUGGESTED_TASKS_MAX_ITEMS = 5;
 
 /**
  * Count the number of items in the list.
@@ -262,7 +261,8 @@ document.addEventListener( 'DOMContentLoaded', () => {
 
 	// Inject items, until we reach the maximum number of items.
 	while (
-		progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
+		progressPlannerCountItems() <
+			parseInt( progressPlannerSuggestedTasks.maxItems ) &&
 		progressPlannerGetNextItem()
 	) {
 		progressPlannerInjectNextItem();
@@ -299,8 +299,18 @@ class BadgeScroller {
 	init() {
 		this.addEventListeners();
 
-		// On page load.
-		this.setWrapperHeight();
+		// On page load, when all images are loaded.
+		const images = [ ...this.element.querySelectorAll( 'img' ) ];
+		if ( images.length ) {
+			Promise.all(
+				images.map(
+					( im ) =>
+						new Promise( ( resolve ) => ( im.onload = resolve ) )
+				)
+			).then( () => {
+				this.setWrapperHeight();
+			} );
+		}
 
 		// When popover is opened.
 		document
@@ -416,7 +426,8 @@ document.addEventListener(
 	'prplMaybeInjectSuggestedTaskEvent',
 	() => {
 		while (
-			progressPlannerCountItems() <= PRPL_SUGGESTED_TASKS_MAX_ITEMS &&
+			progressPlannerCountItems() <
+				parseInt( progressPlannerSuggestedTasks.maxItems ) &&
 			progressPlannerGetNextItem()
 		) {
 			progressPlannerInjectNextItem();

assets/js/widgets/todo.js

@@ -50,11 +50,6 @@ const progressPlannerInjectTodoItem = ( content, done, addToStart, save ) => {
 		document.getElementById( 'todo-list' ).appendChild( todoItemElement );
 	}
 
-	// Focus the new task's content element after it is added to the DOM
-	setTimeout( () => {
-		todoItemElement.querySelector( 'input[type="checkbox"]' ).focus();
-	}, 0 );
-
 	if ( save ) {
 		progressPlannerSaveTodoList();
 	}
@@ -91,5 +86,8 @@ prplDocumentReady( () => {
 			);
 
 			document.getElementById( 'new-todo-content' ).value = '';
+
+			// Focus the new task input element.
+			document.getElementById( 'new-todo-content' ).focus();
 		} );
 } );

classes/actions/class-content.php

@@ -27,11 +27,9 @@ public function __construct() {
 	 * @return void
 	 */
 	public function register_hooks() {
-		// Add activity when a post is updated.
-		\add_action( 'post_updated', [ $this, 'post_updated' ], 10, 2 );
 
-		// Add activity when a post is added.
-		\add_action( 'wp_insert_post', [ $this, 'insert_post' ], 10, 2 );
+		// Add activity when a post is added or updated.
+		\add_action( 'wp_insert_post', [ $this, 'insert_post' ], 10, 3 );
 		\add_action( 'transition_post_status', [ $this, 'transition_post_status' ], 10, 3 );
 
 		// Add activity when a post is trashed or deleted.
@@ -40,84 +38,41 @@ public function register_hooks() {
 	}
 
 	/**
-	 * Post updated.
+	 * Insert a post.
 	 *
-	 * Runs on post_updated hook.
+	 * Runs on wp_insert_post hook.
 	 *
 	 * @param int      $post_id The post ID.
 	 * @param \WP_Post $post    The post object.
-	 *
+	 * @param bool     $update  Whether this is an update.
 	 * @return void
 	 */
-	public function post_updated( $post_id, $post ) {
+	public function insert_post( $post_id, $post, $update ) {
 		// Bail if we should skip saving.
 		if ( $this->should_skip_saving( $post ) ) {
 			return;
 		}
 
-		// Reset the words count.
-		\progress_planner()->get_settings()->set( [ 'word_count', $post_id ], false );
-
-		if ( 'publish' !== $post->post_status ) {
-			return;
-		}
-
-		// Check if there is an update activity for this post, on this date.
-		$existing = \progress_planner()->get_query()->query_activities(
-			[
-				'category'   => 'content',
-				'type'       => 'update',
-				'data_id'    => (string) $post_id,
-				'start_date' => \progress_planner()->get_date()->get_datetime_from_mysql_date( $post->post_modified )->modify( '-12 hours' ),
-				'end_date'   => \progress_planner()->get_date()->get_datetime_from_mysql_date( $post->post_modified )->modify( '+12 hours' ),
-			],
-			'RAW'
-		);
+		// Set the type of activity.
+		$type = $update ? 'update' : 'publish';
 
-		// If there is an update activity for this post, on this date, bail.
-		if ( ! empty( $existing ) ) {
-			return;
-		}
-
-		$this->add_post_activity( $post, 'update' );
-	}
-
-	/**
-	 * Insert a post.
-	 *
-	 * Runs on wp_insert_post hook.
-	 *
-	 * @param int      $post_id The post ID.
-	 * @param \WP_Post $post    The post object.
-	 * @return void
-	 */
-	public function insert_post( $post_id, $post ) {
-		// Bail if we should skip saving.
-		if ( $this->should_skip_saving( $post ) ) {
-			return;
+		// Reset the words count if it's an update.
+		if ( 'update' === $type ) {
+			\progress_planner()->get_settings()->set( [ 'word_count', $post_id ], false );
 		}
 
+		// Bail if the post is not published.
 		if ( 'publish' !== $post->post_status ) {
 			return;
 		}
 
-		// Check if there is a publish activity for this post.
-		$existing = \progress_planner()->get_query()->query_activities(
-			[
-				'category' => 'content',
-				'type'     => 'publish',
-				'data_id'  => (string) $post_id,
-			],
-			'RAW'
-		);
-
-		// If there is a publish activity for this post, bail.
-		if ( ! empty( $existing ) ) {
+		// Bail if there is a recent activity for this post.
+		if ( $this->is_there_recent_activity( $post, $type ) ) {
 			return;
 		}
 
-		// Add a publish activity.
-		$this->add_post_activity( $post, 'publish' );
+		// Finally add an activity.
+		$this->add_post_activity( $post, $type );
 	}
 
 	/**
@@ -138,6 +93,11 @@ public function transition_post_status( $new_status, $old_status, $post ) {
 			return;
 		}
 
+		// Bail if there is a recent activity for this post.
+		if ( $this->is_there_recent_activity( $post, $new_status ) ) {
+			return;
+		}
+
 		// Add activity.
 		$this->add_post_activity( $post, $new_status === 'publish' ? 'publish' : 'update' );
 	}
@@ -236,6 +196,38 @@ private function should_skip_saving( $post ) {
 		return false;
 	}
 
+	/**
+	 * Check if there is a recent activity for this post.
+	 *
+	 * @param \WP_Post $post The post object.
+	 * @param string   $type The type of activity (ie publish, update, trash, delete etc).
+	 *
+	 * @return bool
+	 */
+	private function is_there_recent_activity( $post, $type ) {
+		// Query arguments.
+		$query_args = [
+			'category' => 'content',
+			'type'     => $type,
+			'data_id'  => (string) $post->ID,
+		];
+
+		// If it's an update add the start and end date. We don't want to add multiple update activities for the same post on the same day.
+		if ( 'update' === $type ) {
+			$query_args['start_date'] = \progress_planner()->get_date()->get_datetime_from_mysql_date( $post->post_modified )->modify( '-12 hours' );
+			$query_args['end_date']   = \progress_planner()->get_date()->get_datetime_from_mysql_date( $post->post_modified )->modify( '+12 hours' );
+		}
+
+		// Check if there is an activity for this post.
+		$existing = \progress_planner()->get_query()->query_activities(
+			$query_args,
+			'RAW'
+		);
+
+		// If there is an activity for this post, bail.
+		return ! empty( $existing ) ? true : false;
+	}
+
 	/**
 	 * Add an update activity.
 	 *

classes/admin/class-scripts.php

@@ -102,6 +102,7 @@ public function localize_script( $handle ) {
 					'progressPlannerBadge',
 					[
 						'remoteServerRootUrl' => \progress_planner()->get_remote_server_root_url(),
+						'placeholderImageUrl' => \progress_planner()->get_placeholder_svg(),
 					]
 				);
 				break;

classes/badges/class-monthly.php

@@ -57,7 +57,7 @@ public static function init_badges() {
 		$start_date      = $activation_date->modify( 'first day of this month' );
 
 		// Year when plugin was released.
-		$end_date = ( 2024 === (int) $start_date->format( 'Y' ) )
+		$end_date = ( 2024 === (int) $start_date->format( 'Y' ) && 2024 === (int) \gmdate( 'Y' ) )
 			? new \DateTime( 'last day of December next year' )
 			: new \DateTime( 'last day of December this year' );
 

classes/class-base.php

@@ -144,6 +144,18 @@ public function get_remote_server_root_url() {
 			: 'https://progressplanner.com';
 	}
 
+	/**
+	 * Get the placeholder SVG.
+	 *
+	 * @param int $width The width of the placeholder image.
+	 * @param int $height The height of the placeholder image.
+	 *
+	 * @return string
+	 */
+	public function get_placeholder_svg( $width = 1200, $height = 675 ) {
+		return 'data:image/svg+xml;base64,' . base64_encode( sprintf( '<svg width="%1$d" height="%2$d" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="%3$d" height="%4$d" style="fill:#F6F5FB;stroke:#534786;stroke-width:2"/><text x="50%%" y="50%%" font-size="20" text-anchor="middle" alignment-baseline="middle" font-family="monospace" fill="#534786">progressplanner.com</text></svg>', $width, $height, ( $width - 4 ), ( $height - 4 ) ) );
+	}
+
 	/**
 	 * Get the activation date.
 	 *