diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-edit-homepage-banner b/projects/packages/jetpack-mu-wpcom/changelog/update-edit-homepage-banner new file mode 100644 index 0000000000000..7f04a7d4bf228 --- /dev/null +++ b/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 diff --git a/projects/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css b/projects/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css deleted file mode 100644 index 7c79abe3c80ec..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css +++ /dev/null @@ -1,51 +0,0 @@ -/** - * Styles for the Pages-Homepage connection banner. - */ - - .wpcom-homepage-notice.card { - clear: both; - max-width: none; - width: 100%; - margin: 8px 0; - padding: 16px 20px; - background: #fff; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - box-sizing: border-box; - display: block; -} - -.wpcom-homepage-notice-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.wpcom-homepage-notice-text { - margin: 0; - font-size: 14px; - color: #3c434a; - line-height: 1.4; -} - -.wpcom-homepage-notice-edit-link { - font-size: 13px; - padding: 4px 0; -} - -.wpcom-homepage-notice-edit-link:hover { - text-decoration: underline; -} - -@media screen and (max-width: 782px) { - - .wpcom-homepage-notice-content { - flex-direction: column; - align-items: flex-start; - } - - .wpcom-homepage-notice-actions { - margin-top: 12px; - } -} \ No newline at end of file diff --git a/projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js b/projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js index 7725529be31b7..e2df6d9ef6679 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js @@ -1,7 +1,7 @@ +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 */ @@ -9,64 +9,20 @@ /* 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 ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/pages/pages-homepage-connection-banner.php b/projects/packages/jetpack-mu-wpcom/src/features/pages/pages-homepage-connection-banner.php index ef93b63c26f30..c6540bc572fda 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/pages/pages-homepage-connection-banner.php +++ b/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( + '

%s

%s', + 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' );