Update Edit homepage banner design and copy

projects/packages/jetpack-mu-wpcom/changelog/update-edit-homepage-banner

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update `Edit homepage` banner design and copy

projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js

@@ -1,72 +1,28 @@
+import { wpcomTrackEvent } from 'wpcom-tracks-module';
+
 /**
- * JavaScript for the Pages-Homepage connection banner.
- * Creates and inserts a banner in the Pages admin screen to connect users
- * to homepage editing options when the homepage is controlled by theme settings.
+ * JavaScript for the Pages-Homepage connection banner event tracking.
  *
  * @param {object} $ - The jQuery object
  */
 
 /* global jQuery */
 ( function ( $ ) {
 	/**
-	 * Create the connection banner element programmatically.
-	 *
-	 * @return {HTMLElement} The created banner element.
+	 * Track whether the "Edit Homepage" button in the banner is shown/clicked.
 	 */
-	function createBannerElement() {
-		// Get localized data
-		const data = window.wpcomPagesHomepageConnectionBanner || {};
-
-		// Create main container with card class
-		const container = document.createElement( 'div' );
-		container.className = 'wpcom-homepage-notice card';
-
-		// Create content wrapper
-		const content = document.createElement( 'div' );
-		content.className = 'wpcom-homepage-notice-content';
-
-		// Create info section
-		const info = document.createElement( 'div' );
-		info.className = 'wpcom-homepage-notice-info';
-
-		// Create text paragraph
-		const text = document.createElement( 'p' );
-		text.className = 'wpcom-homepage-notice-text';
-		text.textContent = data.text;
-		info.appendChild( text );
-
-		// Add the info section to content
-		content.appendChild( info );
-
-		// Add edit link if user has permission
-		if ( data.canEdit ) {
-			const actions = document.createElement( 'div' );
-			actions.className = 'wpcom-homepage-notice-actions';
-
-			const link = document.createElement( 'a' );
-			link.className = 'wpcom-homepage-notice-edit-link';
-			link.href = data.editLink;
-			link.textContent = data.editText;
+	$( document ).ready( function () {
+		const banner = document.getElementById( 'edit-homepage-banner' );
 
-			actions.appendChild( link );
-			content.appendChild( actions );
+		if ( ! banner ) {
+			return;
 		}
 
-		// Add the content to the container
-		container.appendChild( content );
-
-		return container;
-	}
+		wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' );
 
-	/**
-	 * Insert the banner at the correct position in the page.
-	 */
-	$( document ).ready( function () {
-		const banner = createBannerElement();
-		const $tablenav = $( '.tablenav.top' );
-
-		if ( $tablenav.length ) {
-			$tablenav.before( banner );
-		}
+		const bannerBtn = banner.querySelector( 'a.button-primary' );
+		bannerBtn?.addEventListener( 'click', function () {
+			wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' );
+		} );
 	} );
 } )( jQuery );

projects/packages/jetpack-mu-wpcom/src/features/pages/pages-homepage-connection-banner.php

@@ -8,58 +8,65 @@
  * @package automattic/jetpack-mu-wpcom
  */
 
+/**
+ * Displays the homepage connection banner in the admin notices.
+ */
+function homepage_connection_banner() {
+	$message = sprintf(
+		'<p>%s</p><a href="%s" class="button-primary">%s</a>',
+		esc_html( __( 'Looking to customize your homepage?', 'jetpack-mu-wpcom' ) ),
+		esc_url( admin_url( 'site-editor.php' ) ),
+		esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' )
+	);
+
+	wp_admin_notice(
+		$message,
+		array(
+			'type' => 'info',
+			'id'   => 'edit-homepage-banner',
+		)
+	);
+}
+
 /**
  * Adds a connection banner to the Pages screen linking to homepage editing.
  */
 function wpcom_add_pages_homepage_connection_banner() {
 	$screen = get_current_screen();
-	if ( ! $screen || 'edit-page' !== $screen->id ) {
+	if ( ! $screen || ! wp_is_block_theme() ) {
 		return;
 	}
 
-	if ( ! wp_is_block_theme() ) {
+	$is_edit_page_screen = 'edit-page' === $screen->id;
+
+	if ( ! $is_edit_page_screen ) {
 		return;
 	}
 
 	$show_on_front  = get_option( 'show_on_front' );
 	$front_page_id  = (int) get_option( 'page_on_front' );
 	$posts_on_front = $show_on_front === 'posts' || ( $show_on_front === 'page' && ! $front_page_id );
-	if ( ! $posts_on_front ) {
+	$can_edit       = current_user_can( 'edit_theme_options' );
+
+	if ( ! $posts_on_front || ! $can_edit ) {
 		return;
 	}
 
-	$can_edit     = current_user_can( 'edit_theme_options' );
-	$edit_link    = admin_url( 'site-editor.php' );
-	$display_text = __( 'Your homepage is set to display latest posts.', 'jetpack-mu-wpcom' );
+	add_action( 'admin_notices', 'homepage_connection_banner' );
 
-	wp_register_style(
-		'wpcom-pages-homepage-connection-banner',
-		plugin_dir_url( __FILE__ ) . 'css/pages-homepage-connection-banner.css',
+	wp_register_script_module(
+		'wpcom-tracks-module',
+		plugin_dir_url( __FILE__ ) . '../../common/tracks.js',
 		array(),
-		'20250312'
+		'20250604'
 	);
-	wp_enqueue_style( 'wpcom-pages-homepage-connection-banner' );
 
-	wp_register_script(
+	wp_enqueue_script_module(
 		'wpcom-pages-homepage-connection-banner',
 		plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js',
-		array( 'jquery' ),
-		'20250312',
-		true
-	);
-
-	// Passing data to JavaScript
-	wp_localize_script(
-		'wpcom-pages-homepage-connection-banner',
-		'wpcomPagesHomepageConnectionBanner',
-		array(
-			'text'     => esc_html( $display_text ),
-			'editLink' => $can_edit ? esc_url( $edit_link ) : '',
-			'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ),
-			'canEdit'  => $can_edit,
-		)
+		array( 'wpcom-tracks-module', 'jquery' ),
+		'20250604'
 	);
-	wp_enqueue_script( 'wpcom-pages-homepage-connection-banner' );
 }
 
 add_action( 'current_screen', 'wpcom_add_pages_homepage_connection_banner' );