POC - experiment with a popover rendering server-side content from posts

assets/js/web-components/prpl-popover-post-content.js

@@ -0,0 +1,50 @@
+/* global customElements, HTMLElement */
+
+/**
+ * Register the custom web component.
+ */
+customElements.define(
+	'prpl-popover-post-content',
+	class extends HTMLElement {
+		constructor( postId = '', buttonContent = '' ) {
+			// Get parent class properties
+			super();
+
+			this.postId = postId;
+			this.buttonContent = buttonContent;
+
+			if ( ! this.postId && this.hasAttribute( 'post-id' ) ) {
+				this.postId = this.getAttribute( 'post-id' );
+			}
+
+			if ( ! this.postId ) {
+				return;
+			}
+
+			if ( ! this.buttonContent ) {
+				this.buttonContent = this.getAttribute( 'button-content' );
+			}
+
+			// Get the JSON response from https://progressplanner.com/wp-json/wp/v2/posts/{postId}
+			fetch(
+				`https://progressplanner.com/wp-json/wp/v2/posts/${ this.postId }`
+			)
+				.then( ( response ) => response.json() )
+				.then( ( data ) => {
+					if ( ! data.content.rendered || ! data.title.rendered ) {
+						return;
+					}
+
+					this.innerHTML = `
+						<button type="button" popovertarget="prpl-popover-post-content-${ this.postId }">
+							${ this.buttonContent }
+						</button>
+						<div id="prpl-popover-post-content-${ this.postId }" popover style="max-width:80vw; max-height:80vh; overflow-y: auto; overflow-x: hidden;">
+							<h1>${ data.title.rendered }</h1>
+							${ data.content.rendered }
+						</div>
+					`;
+				} );
+		}
+	}
+);

classes/admin/class-page.php

@@ -194,6 +194,7 @@ public function enqueue_scripts() {
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'web-components/prpl-chart-line' );
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'web-components/prpl-big-counter' );
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'web-components/prpl-tooltip' );
+				\progress_planner()->get_admin__enqueue()->enqueue_script( 'web-components/prpl-popover-post-content' );
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'header-filters', $default_localization_data );
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'settings', $default_localization_data );
 				\progress_planner()->get_admin__enqueue()->enqueue_script( 'grid-masonry' );

views/page-widgets/suggested-tasks.php

@@ -57,3 +57,4 @@
 		<?php \esc_html_e( 'Check back later for new tasks!', 'progress-planner' ); ?>
 	</p>
 </div>
+<prpl-popover-post-content post-id="3771" button-content="Read more"></prpl-popover-post-content>