From d8418c79b0f4f19c0e7b138db2c5ad9931c3cef8 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Tue, 27 May 2025 17:22:54 +0200 Subject: [PATCH 01/11] Update `Edit homepage` banner design and copy --- .../css/pages-homepage-connection-banner.css | 50 ++++++++++--------- .../js/pages-homepage-connection-banner.js | 36 +++++++------ .../pages-homepage-connection-banner.php | 6 +-- 3 files changed, 51 insertions(+), 41 deletions(-) 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 index 7c79abe3c80ec..17052f4835dac 100644 --- 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 @@ -1,41 +1,48 @@ /** * 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); + padding: 8px; + background: #ECEEFB; + border: none; + border-radius: var(--radius-s, 2px); + box-shadow: none; 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-left-column { + margin-right: 4px; + padding: 4px 4px 0 4px; + + .dashicons-info-outline { + color: var(--Scales-Grays-gray-900, #1E1E1E); + } +} + +.wpcom-homepage-notice-right-column { + padding-top: 4px; } -.wpcom-homepage-notice-edit-link { - font-size: 13px; - padding: 4px 0; +.wpcom-homepage-notice-text { + color: var(--Scales-Grays-gray-900, #1E1E1E); + line-height: var(--s, 20px); + margin: 0 0 8px 0; } -.wpcom-homepage-notice-edit-link:hover { - text-decoration: underline; +.wpcom-homepage-notice-edit-btn { + line-height: var(--s, 20px) !important; + margin-bottom: 4px !important; + padding: 0 8px !important; } @media screen and (max-width: 782px) { @@ -44,8 +51,5 @@ 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..e1d5e2b0cbb4b 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 @@ -21,35 +21,41 @@ const container = document.createElement( 'div' ); container.className = 'wpcom-homepage-notice card'; + const leftColumn = document.createElement( 'div' ); + leftColumn.className = 'wpcom-homepage-notice-left-column'; + + // Create info icon + const icon = document.createElement( 'span' ); + icon.className = 'dashicons dashicons-info-outline'; + + leftColumn.appendChild( icon ); + + const rightColumn = document.createElement( 'div' ); + rightColumn.className = 'wpcom-homepage-notice-right-column'; + // 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 ); + + rightColumn.appendChild( text ); // Add the info section to content - content.appendChild( info ); + content.appendChild( leftColumn ); + content.appendChild( rightColumn ); // 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; + const btn = document.createElement( 'button' ); + btn.className = 'wpcom-homepage-notice-edit-btn button button-primary'; + btn.href = data.editLink; + btn.textContent = data.editText; - actions.appendChild( link ); - content.appendChild( actions ); + rightColumn.appendChild( btn ); } // Add the content to the container 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..d7aa9e8f98c70 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 @@ -30,13 +30,13 @@ function wpcom_add_pages_homepage_connection_banner() { $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' ); + $display_text = __( 'Looking to customize your homepage?', 'jetpack-mu-wpcom' ); wp_register_style( 'wpcom-pages-homepage-connection-banner', plugin_dir_url( __FILE__ ) . 'css/pages-homepage-connection-banner.css', array(), - '20250312' + '20250527' ); wp_enqueue_style( 'wpcom-pages-homepage-connection-banner' ); @@ -44,7 +44,7 @@ function wpcom_add_pages_homepage_connection_banner() { 'wpcom-pages-homepage-connection-banner', plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js', array( 'jquery' ), - '20250312', + '20250527', true ); From 62c989706434dacd3adc5b2f16aac2f508423c88 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Tue, 27 May 2025 17:24:20 +0200 Subject: [PATCH 02/11] changelog --- .../jetpack-mu-wpcom/changelog/update-edit-homepage-banner | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-edit-homepage-banner 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 From 7e82f56386bfb55c13732a5f5d877f2597f8833c Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 28 May 2025 12:47:52 +0200 Subject: [PATCH 03/11] Add tracking; keep button as anchor --- .../css/pages-homepage-connection-banner.css | 1 - .../js/pages-homepage-connection-banner.js | 37 +++++++++++++++---- 2 files changed, 29 insertions(+), 9 deletions(-) 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 index 17052f4835dac..9389ac3c3e3e1 100644 --- 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 @@ -40,7 +40,6 @@ } .wpcom-homepage-notice-edit-btn { - line-height: var(--s, 20px) !important; margin-bottom: 4px !important; padding: 0 8px !important; } 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 e1d5e2b0cbb4b..734571afabd25 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 @@ -8,6 +8,21 @@ /* global jQuery */ ( function ( $ ) { + const trackEvent = ( eventName, eventProperties = {} ) => { + const currentUser = window.JP_CONNECTION_INITIAL_STATE?.userConnectionData?.currentUser ?? {}; + const blogId = eventProperties.blogId ?? currentUser.blogId; + + window._tkq = window._tkq || []; + window._tkq.push( [ + 'recordEvent', + eventName, + { + ...eventProperties, + blog_id: blogId, + }, + ] ); + }; + /** * Create the connection banner element programmatically. * @@ -17,10 +32,11 @@ // Get localized data const data = window.wpcomPagesHomepageConnectionBanner || {}; - // Create main container with card class + // Create card container const container = document.createElement( 'div' ); container.className = 'wpcom-homepage-notice card'; + // Crete left column element const leftColumn = document.createElement( 'div' ); leftColumn.className = 'wpcom-homepage-notice-left-column'; @@ -30,13 +46,10 @@ leftColumn.appendChild( icon ); + // Crete right column element const rightColumn = document.createElement( 'div' ); rightColumn.className = 'wpcom-homepage-notice-right-column'; - // Create content wrapper - const content = document.createElement( 'div' ); - content.className = 'wpcom-homepage-notice-content'; - // Create text paragraph const text = document.createElement( 'p' ); text.className = 'wpcom-homepage-notice-text'; @@ -44,21 +57,27 @@ rightColumn.appendChild( text ); - // Add the info section to content + // Create content wrapper + const content = document.createElement( 'div' ); + content.className = 'wpcom-homepage-notice-content'; + content.appendChild( leftColumn ); content.appendChild( rightColumn ); // Add edit link if user has permission if ( data.canEdit ) { - const btn = document.createElement( 'button' ); + const btn = document.createElement( 'a' ); + btn.className = 'wpcom-homepage-notice-edit-btn button button-primary'; btn.href = data.editLink; btn.textContent = data.editText; + btn.onclick = function () { + trackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); + }; rightColumn.appendChild( btn ); } - // Add the content to the container container.appendChild( content ); return container; @@ -72,6 +91,8 @@ const $tablenav = $( '.tablenav.top' ); if ( $tablenav.length ) { + trackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); + $tablenav.before( banner ); } } ); From ac73dd419a79af2d5d5d9e122e5df1dbc17eb6a0 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 28 May 2025 13:02:12 +0200 Subject: [PATCH 04/11] Fix tabs --- .../css/pages-homepage-connection-banner.css | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) 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 index 9389ac3c3e3e1..6e9574373effa 100644 --- 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 @@ -8,9 +8,9 @@ width: 100%; margin: 8px 0; padding: 8px; - background: #ECEEFB; - border: none; - border-radius: var(--radius-s, 2px); + background: #ECEEFB; + border: none; + border-radius: var(--radius-s, 2px); box-shadow: none; box-sizing: border-box; display: block; @@ -21,26 +21,26 @@ } .wpcom-homepage-notice-left-column { - margin-right: 4px; - padding: 4px 4px 0 4px; + margin-right: 4px; + padding: 4px 4px 0 4px; - .dashicons-info-outline { - color: var(--Scales-Grays-gray-900, #1E1E1E); - } + .dashicons-info-outline { + color: var(--Scales-Grays-gray-900, #1E1E1E); + } } .wpcom-homepage-notice-right-column { - padding-top: 4px; + padding-top: 4px; } .wpcom-homepage-notice-text { color: var(--Scales-Grays-gray-900, #1E1E1E); - line-height: var(--s, 20px); + line-height: var(--s, 20px); margin: 0 0 8px 0; } .wpcom-homepage-notice-edit-btn { - margin-bottom: 4px !important; + margin-bottom: 4px !important; padding: 0 8px !important; } From c99f84b4bde20f1b50c371ae96dcc1ab68cadb7a Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 28 May 2025 19:09:55 +0200 Subject: [PATCH 05/11] Show the banner in the Site editor pages list too --- .../css/pages-homepage-connection-banner.css | 10 ++ .../js/pages-homepage-connection-banner.js | 116 ++++++++++++++++-- .../pages-homepage-connection-banner.php | 8 +- 3 files changed, 122 insertions(+), 12 deletions(-) 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 index 6e9574373effa..6e6bc4f993453 100644 --- 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 @@ -14,6 +14,16 @@ box-shadow: none; box-sizing: border-box; display: block; + + &.is-site-editor { + display: none; + margin: 16px 16px 0 12px; + width: calc(100% - 28px); + + &.show { + display: block; + } + } } .wpcom-homepage-notice-content { 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 734571afabd25..6e7a6157c10fe 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 @@ -26,15 +26,22 @@ /** * Create the connection banner element programmatically. * + * @param {object} data - The data for configuring the banner. + * @param {string} data.text - The text to display in the banner. + * @param {string} data.editLink - The URL to the edit page. + * @param {string} data.editText - The text for the edit button. + * @param {boolean} data.canEdit - Whether the user can edit the homepage. * @return {HTMLElement} The created banner element. */ - function createBannerElement() { - // Get localized data - const data = window.wpcomPagesHomepageConnectionBanner || {}; - + function createBannerElement( data ) { // Create card container const container = document.createElement( 'div' ); container.className = 'wpcom-homepage-notice card'; + if ( data.screenId === 'edit-page' ) { + container.classList.add( 'is-edit-page' ); + } else if ( data.screenId === 'site-editor' ) { + container.classList.add( 'is-site-editor' ); + } // Crete left column element const leftColumn = document.createElement( 'div' ); @@ -72,7 +79,11 @@ btn.href = data.editLink; btn.textContent = data.editText; btn.onclick = function () { - trackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); + if ( data.screenId === 'edit-page' ) { + trackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); + } else if ( data.screenId === 'site-editor' ) { + trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_clicked' ); + } }; rightColumn.appendChild( btn ); @@ -87,13 +98,98 @@ * Insert the banner at the correct position in the page. */ $( document ).ready( function () { - const banner = createBannerElement(); - const $tablenav = $( '.tablenav.top' ); + // Get localized data + const data = window.wpcomPagesHomepageConnectionBanner || {}; + + const banner = createBannerElement( data ); + + if ( data.screenId === 'edit-page' ) { + const $tablenav = $( '.tablenav.top' ); - if ( $tablenav.length ) { - trackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); + if ( $tablenav.length ) { + trackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); - $tablenav.before( banner ); + $tablenav.before( banner ); + } + } + + if ( data.screenId === 'site-editor' ) { + hijackHistory(); + + waitForElement( $, '.edit-site-layout__content', function () { + $( '.edit-site' ).prepend( banner ); + + if ( isPagesListPage() ) { + trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); + + banner.classList.add( 'show' ); + } + + window.addEventListener( 'locationchange', function () { + if ( isPagesListPage() ) { + trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); + + banner.classList.add( 'show' ); + } else { + banner.classList.remove( 'show' ); + } + } ); + } ); } } ); } )( jQuery ); + +const hijackHistory = () => { + // Save a reference to the original methods + const originalPushState = history.pushState; + const originalReplaceState = history.replaceState; + + // Override pushState + history.pushState = function () { + const result = originalPushState.apply( history, arguments ); + + window.dispatchEvent( new Event( 'locationchange' ) ); + return result; + }; + + // Override replaceState + history.replaceState = function () { + const result = originalReplaceState.apply( history, arguments ); + + window.dispatchEvent( new Event( 'locationchange' ) ); + return result; + }; + + // Listen for popstate (for browser back/forward buttons) + window.addEventListener( 'popstate', function () { + window.dispatchEvent( new Event( 'locationchange' ) ); + } ); +}; + +const waitForElement = ( $, selector, callback ) => { + // Check if the element already exists on initial load + if ( $( selector ).length ) { + callback(); + return; + } + + const observer = new MutationObserver( function ( mutationsList, obs ) { + for ( const mutation of mutationsList ) { + // Check if the added nodes contain our selector + if ( mutation.type === 'childList' && $( selector ).length ) { + obs.disconnect(); + callback(); + return; + } + } + } ); + + observer.observe( document.body, { childList: true, subtree: true } ); +}; + +const isPagesListPage = () => { + const url = new URL( window.location.href ); + const params = new URLSearchParams( url.search ); + + return params.get( 'p' ) === '/page'; +}; 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 d7aa9e8f98c70..152067f2316bd 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 @@ -13,11 +13,14 @@ */ 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; + $is_site_editor_screen = 'site-editor' === $screen->id; + + if ( ! $is_edit_page_screen && ! $is_site_editor_screen ) { return; } @@ -57,6 +60,7 @@ function wpcom_add_pages_homepage_connection_banner() { 'editLink' => $can_edit ? esc_url( $edit_link ) : '', 'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ), 'canEdit' => $can_edit, + 'screenId' => esc_html( $screen->id ), ) ); wp_enqueue_script( 'wpcom-pages-homepage-connection-banner' ); From f6b39d762767966904b47dd38ce01d2cc4a6f61f Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 28 May 2025 20:19:39 +0200 Subject: [PATCH 06/11] Import `wpcomTrackEvent` module --- .../js/pages-homepage-connection-banner.js | 27 +++------- .../pages-homepage-connection-banner.php | 49 ++++++++++++------- 2 files changed, 37 insertions(+), 39 deletions(-) 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 6e7a6157c10fe..03e4d8afbb42f 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,3 +1,5 @@ +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 @@ -8,21 +10,6 @@ /* global jQuery */ ( function ( $ ) { - const trackEvent = ( eventName, eventProperties = {} ) => { - const currentUser = window.JP_CONNECTION_INITIAL_STATE?.userConnectionData?.currentUser ?? {}; - const blogId = eventProperties.blogId ?? currentUser.blogId; - - window._tkq = window._tkq || []; - window._tkq.push( [ - 'recordEvent', - eventName, - { - ...eventProperties, - blog_id: blogId, - }, - ] ); - }; - /** * Create the connection banner element programmatically. * @@ -80,9 +67,9 @@ btn.textContent = data.editText; btn.onclick = function () { if ( data.screenId === 'edit-page' ) { - trackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); } else if ( data.screenId === 'site-editor' ) { - trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_clicked' ); + wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_clicked' ); } }; @@ -107,7 +94,7 @@ const $tablenav = $( '.tablenav.top' ); if ( $tablenav.length ) { - trackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); $tablenav.before( banner ); } @@ -120,14 +107,14 @@ $( '.edit-site' ).prepend( banner ); if ( isPagesListPage() ) { - trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); + wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); banner.classList.add( 'show' ); } window.addEventListener( 'locationchange', function () { if ( isPagesListPage() ) { - trackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); + wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); banner.classList.add( 'show' ); } else { 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 152067f2316bd..7108f37188322 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 @@ -31,10 +31,6 @@ function wpcom_add_pages_homepage_connection_banner() { return; } - $can_edit = current_user_can( 'edit_theme_options' ); - $edit_link = admin_url( 'site-editor.php' ); - $display_text = __( 'Looking to customize your homepage?', 'jetpack-mu-wpcom' ); - wp_register_style( 'wpcom-pages-homepage-connection-banner', plugin_dir_url( __FILE__ ) . 'css/pages-homepage-connection-banner.css', @@ -43,27 +39,42 @@ function wpcom_add_pages_homepage_connection_banner() { ); wp_enqueue_style( 'wpcom-pages-homepage-connection-banner' ); - wp_register_script( - 'wpcom-pages-homepage-connection-banner', - plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js', - array( 'jquery' ), + $can_edit = current_user_can( 'edit_theme_options' ); + $localized_data = array( + 'text' => esc_html( __( 'Looking to customize your homepage?', 'jetpack-mu-wpcom' ) ), + 'editLink' => $can_edit ? esc_url( admin_url( 'site-editor.php' ) ) : '', + 'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ), + 'canEdit' => $can_edit, + 'screenId' => esc_html( $screen->id ), + ); + + add_action( + 'admin_footer', + function () use ( $localized_data ) { + ?> + + esc_html( $display_text ), - 'editLink' => $can_edit ? esc_url( $edit_link ) : '', - 'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ), - 'canEdit' => $can_edit, - 'screenId' => esc_html( $screen->id ), - ) + plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js', + array( 'wpcom-tracks-module', 'jquery' ), + '20250527', + true ); - wp_enqueue_script( 'wpcom-pages-homepage-connection-banner' ); } add_action( 'current_screen', 'wpcom_add_pages_homepage_connection_banner' ); From e55660a8b4678d9f24044ea503b03cfdc8dd9dd0 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Thu, 29 May 2025 13:49:15 +0200 Subject: [PATCH 07/11] Use `script_module_data` to provide the data to the front --- .../pages/js/pages-homepage-connection-banner.js | 13 +++++++++++-- .../pages/pages-homepage-connection-banner.php | 13 ++++--------- 2 files changed, 15 insertions(+), 11 deletions(-) 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 03e4d8afbb42f..4cff2751895d8 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 @@ -85,8 +85,17 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; * Insert the banner at the correct position in the page. */ $( document ).ready( function () { - // Get localized data - const data = window.wpcomPagesHomepageConnectionBanner || {}; + const dataContainer = document.getElementById( + 'wp-script-module-data-wpcom-pages-homepage-connection-banner' + ); + let data = {}; + if ( dataContainer ) { + try { + data = JSON.parse( dataContainer.textContent ); + } catch { + data = {}; + } + } const banner = createBannerElement( data ); 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 7108f37188322..b59719c311467 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 @@ -48,16 +48,11 @@ function wpcom_add_pages_homepage_connection_banner() { 'screenId' => esc_html( $screen->id ), ); - add_action( - 'admin_footer', + add_filter( + 'script_module_data_wpcom-pages-homepage-connection-banner', function () use ( $localized_data ) { - ?> - - Date: Thu, 29 May 2025 13:51:14 +0200 Subject: [PATCH 08/11] Fix wrong param count --- .../src/features/pages/pages-homepage-connection-banner.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 b59719c311467..13ca9f2ce5482 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 @@ -59,16 +59,14 @@ function () use ( $localized_data ) { 'wpcom-tracks-module', plugin_dir_url( __FILE__ ) . '../../common/tracks.js', array(), - '20250527', - true + '20250527' ); wp_enqueue_script_module( 'wpcom-pages-homepage-connection-banner', plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js', array( 'wpcom-tracks-module', 'jquery' ), - '20250527', - true + '20250527' ); } From c0baf6481b7c03a55aabaacc2eafd6946037f7f0 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Fri, 30 May 2025 18:00:44 +0200 Subject: [PATCH 09/11] Rm site editor hack --- .../css/pages-homepage-connection-banner.css | 10 -- .../js/pages-homepage-connection-banner.js | 100 +----------------- .../pages-homepage-connection-banner.php | 6 +- 3 files changed, 7 insertions(+), 109 deletions(-) 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 index 6e6bc4f993453..6e9574373effa 100644 --- 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 @@ -14,16 +14,6 @@ box-shadow: none; box-sizing: border-box; display: block; - - &.is-site-editor { - display: none; - margin: 16px 16px 0 12px; - width: calc(100% - 28px); - - &.show { - display: block; - } - } } .wpcom-homepage-notice-content { 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 4cff2751895d8..13fa4d52d12ae 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 @@ -24,11 +24,6 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; // Create card container const container = document.createElement( 'div' ); container.className = 'wpcom-homepage-notice card'; - if ( data.screenId === 'edit-page' ) { - container.classList.add( 'is-edit-page' ); - } else if ( data.screenId === 'site-editor' ) { - container.classList.add( 'is-site-editor' ); - } // Crete left column element const leftColumn = document.createElement( 'div' ); @@ -66,11 +61,7 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; btn.href = data.editLink; btn.textContent = data.editText; btn.onclick = function () { - if ( data.screenId === 'edit-page' ) { - wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); - } else if ( data.screenId === 'site-editor' ) { - wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_clicked' ); - } + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); }; rightColumn.appendChild( btn ); @@ -99,93 +90,12 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; const banner = createBannerElement( data ); - if ( data.screenId === 'edit-page' ) { - const $tablenav = $( '.tablenav.top' ); + const $tablenav = $( '.tablenav.top' ); - if ( $tablenav.length ) { - wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); + if ( $tablenav.length ) { + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); - $tablenav.before( banner ); - } - } - - if ( data.screenId === 'site-editor' ) { - hijackHistory(); - - waitForElement( $, '.edit-site-layout__content', function () { - $( '.edit-site' ).prepend( banner ); - - if ( isPagesListPage() ) { - wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); - - banner.classList.add( 'show' ); - } - - window.addEventListener( 'locationchange', function () { - if ( isPagesListPage() ) { - wpcomTrackEvent( 'wpcom_site_editor_pages_edit_homepage_banner_shown' ); - - banner.classList.add( 'show' ); - } else { - banner.classList.remove( 'show' ); - } - } ); - } ); + $tablenav.before( banner ); } } ); } )( jQuery ); - -const hijackHistory = () => { - // Save a reference to the original methods - const originalPushState = history.pushState; - const originalReplaceState = history.replaceState; - - // Override pushState - history.pushState = function () { - const result = originalPushState.apply( history, arguments ); - - window.dispatchEvent( new Event( 'locationchange' ) ); - return result; - }; - - // Override replaceState - history.replaceState = function () { - const result = originalReplaceState.apply( history, arguments ); - - window.dispatchEvent( new Event( 'locationchange' ) ); - return result; - }; - - // Listen for popstate (for browser back/forward buttons) - window.addEventListener( 'popstate', function () { - window.dispatchEvent( new Event( 'locationchange' ) ); - } ); -}; - -const waitForElement = ( $, selector, callback ) => { - // Check if the element already exists on initial load - if ( $( selector ).length ) { - callback(); - return; - } - - const observer = new MutationObserver( function ( mutationsList, obs ) { - for ( const mutation of mutationsList ) { - // Check if the added nodes contain our selector - if ( mutation.type === 'childList' && $( selector ).length ) { - obs.disconnect(); - callback(); - return; - } - } - } ); - - observer.observe( document.body, { childList: true, subtree: true } ); -}; - -const isPagesListPage = () => { - const url = new URL( window.location.href ); - const params = new URLSearchParams( url.search ); - - return params.get( 'p' ) === '/page'; -}; 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 13ca9f2ce5482..af5fd17dec95a 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 @@ -17,10 +17,9 @@ function wpcom_add_pages_homepage_connection_banner() { return; } - $is_edit_page_screen = 'edit-page' === $screen->id; - $is_site_editor_screen = 'site-editor' === $screen->id; + $is_edit_page_screen = 'edit-page' === $screen->id; - if ( ! $is_edit_page_screen && ! $is_site_editor_screen ) { + if ( ! $is_edit_page_screen ) { return; } @@ -45,7 +44,6 @@ function wpcom_add_pages_homepage_connection_banner() { 'editLink' => $can_edit ? esc_url( admin_url( 'site-editor.php' ) ) : '', 'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ), 'canEdit' => $can_edit, - 'screenId' => esc_html( $screen->id ), ); add_filter( From 83e1f6ae2c7291728ef348ac45fc63cee88a081d Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 4 Jun 2025 15:50:28 +0200 Subject: [PATCH 10/11] Use `wp_admin_notice` instead of custom component --- .../css/pages-homepage-connection-banner.css | 54 ---------- .../js/pages-homepage-connection-banner.js | 98 +++---------------- .../pages-homepage-connection-banner.php | 52 +++++----- 3 files changed, 42 insertions(+), 162 deletions(-) delete mode 100644 projects/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css 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 6e9574373effa..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Styles for the Pages-Homepage connection banner. - */ - - .wpcom-homepage-notice.card { - clear: both; - max-width: none; - width: 100%; - margin: 8px 0; - padding: 8px; - background: #ECEEFB; - border: none; - border-radius: var(--radius-s, 2px); - box-shadow: none; - box-sizing: border-box; - display: block; -} - -.wpcom-homepage-notice-content { - display: flex; -} - -.wpcom-homepage-notice-left-column { - margin-right: 4px; - padding: 4px 4px 0 4px; - - .dashicons-info-outline { - color: var(--Scales-Grays-gray-900, #1E1E1E); - } -} - -.wpcom-homepage-notice-right-column { - padding-top: 4px; -} - -.wpcom-homepage-notice-text { - color: var(--Scales-Grays-gray-900, #1E1E1E); - line-height: var(--s, 20px); - margin: 0 0 8px 0; -} - -.wpcom-homepage-notice-edit-btn { - margin-bottom: 4px !important; - padding: 0 8px !important; -} - -@media screen and (max-width: 782px) { - - .wpcom-homepage-notice-content { - flex-direction: column; - align-items: flex-start; - } - -} 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 13fa4d52d12ae..f3e3b03a565c1 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,9 +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 */ @@ -11,91 +9,25 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; /* global jQuery */ ( function ( $ ) { /** - * Create the connection banner element programmatically. - * - * @param {object} data - The data for configuring the banner. - * @param {string} data.text - The text to display in the banner. - * @param {string} data.editLink - The URL to the edit page. - * @param {string} data.editText - The text for the edit button. - * @param {boolean} data.canEdit - Whether the user can edit the homepage. - * @return {HTMLElement} The created banner element. - */ - function createBannerElement( data ) { - // Create card container - const container = document.createElement( 'div' ); - container.className = 'wpcom-homepage-notice card'; - - // Crete left column element - const leftColumn = document.createElement( 'div' ); - leftColumn.className = 'wpcom-homepage-notice-left-column'; - - // Create info icon - const icon = document.createElement( 'span' ); - icon.className = 'dashicons dashicons-info-outline'; - - leftColumn.appendChild( icon ); - - // Crete right column element - const rightColumn = document.createElement( 'div' ); - rightColumn.className = 'wpcom-homepage-notice-right-column'; - - // Create text paragraph - const text = document.createElement( 'p' ); - text.className = 'wpcom-homepage-notice-text'; - text.textContent = data.text; - - rightColumn.appendChild( text ); - - // Create content wrapper - const content = document.createElement( 'div' ); - content.className = 'wpcom-homepage-notice-content'; - - content.appendChild( leftColumn ); - content.appendChild( rightColumn ); - - // Add edit link if user has permission - if ( data.canEdit ) { - const btn = document.createElement( 'a' ); - - btn.className = 'wpcom-homepage-notice-edit-btn button button-primary'; - btn.href = data.editLink; - btn.textContent = data.editText; - btn.onclick = function () { - wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); - }; - - rightColumn.appendChild( btn ); - } - - container.appendChild( content ); - - return container; - } - - /** - * Insert the banner at the correct position in the page. + * Track whether the "Edit Homepage" button in the banner is shown/clicked/dismissed. */ $( document ).ready( function () { - const dataContainer = document.getElementById( - 'wp-script-module-data-wpcom-pages-homepage-connection-banner' - ); - let data = {}; - if ( dataContainer ) { - try { - data = JSON.parse( dataContainer.textContent ); - } catch { - data = {}; - } - } + const banner = document.getElementById( 'edit-homepage-banner' ); - const banner = createBannerElement( data ); + if ( ! banner ) { + return; + } - const $tablenav = $( '.tablenav.top' ); + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); - if ( $tablenav.length ) { - wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_shown' ); + const bannerBtn = banner.querySelector( 'a.button-primary' ); + bannerBtn?.addEventListener( 'click', function () { + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); + } ); - $tablenav.before( banner ); - } + const dismissBtn = banner.querySelector( 'button.notice-dismiss' ); + dismissBtn?.addEventListener( 'click', function () { + wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_dismissed' ); + } ); } ); } )( 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 af5fd17dec95a..24b2a97ab3769 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,6 +8,27 @@ * @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', + 'dismissible' => true, + 'id' => 'edit-homepage-banner', + ) + ); +} + /** * Adds a connection banner to the Pages screen linking to homepage editing. */ @@ -26,45 +47,26 @@ function wpcom_add_pages_homepage_connection_banner() { $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; } - wp_register_style( - 'wpcom-pages-homepage-connection-banner', - plugin_dir_url( __FILE__ ) . 'css/pages-homepage-connection-banner.css', - array(), - '20250527' - ); - wp_enqueue_style( 'wpcom-pages-homepage-connection-banner' ); - - $can_edit = current_user_can( 'edit_theme_options' ); - $localized_data = array( - 'text' => esc_html( __( 'Looking to customize your homepage?', 'jetpack-mu-wpcom' ) ), - 'editLink' => $can_edit ? esc_url( admin_url( 'site-editor.php' ) ) : '', - 'editText' => esc_html__( 'Edit homepage', 'jetpack-mu-wpcom' ), - 'canEdit' => $can_edit, - ); - - add_filter( - 'script_module_data_wpcom-pages-homepage-connection-banner', - function () use ( $localized_data ) { - return $localized_data; - } - ); + add_action( 'admin_notices', 'homepage_connection_banner' ); wp_register_script_module( 'wpcom-tracks-module', plugin_dir_url( __FILE__ ) . '../../common/tracks.js', array(), - '20250527' + '20250604' ); wp_enqueue_script_module( 'wpcom-pages-homepage-connection-banner', plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js', array( 'wpcom-tracks-module', 'jquery' ), - '20250527' + '20250604' ); } From 6e1104f79d5d547af708604bcecc9a7217edfb1e Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 4 Jun 2025 16:08:55 +0200 Subject: [PATCH 11/11] Not dismissible --- .../features/pages/js/pages-homepage-connection-banner.js | 7 +------ .../features/pages/pages-homepage-connection-banner.php | 5 ++--- 2 files changed, 3 insertions(+), 9 deletions(-) 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 f3e3b03a565c1..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 @@ -9,7 +9,7 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; /* global jQuery */ ( function ( $ ) { /** - * Track whether the "Edit Homepage" button in the banner is shown/clicked/dismissed. + * Track whether the "Edit Homepage" button in the banner is shown/clicked. */ $( document ).ready( function () { const banner = document.getElementById( 'edit-homepage-banner' ); @@ -24,10 +24,5 @@ import { wpcomTrackEvent } from 'wpcom-tracks-module'; bannerBtn?.addEventListener( 'click', function () { wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_clicked' ); } ); - - const dismissBtn = banner.querySelector( 'button.notice-dismiss' ); - dismissBtn?.addEventListener( 'click', function () { - wpcomTrackEvent( 'wpcom_pages_edit_homepage_banner_dismissed' ); - } ); } ); } )( 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 24b2a97ab3769..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 @@ -22,9 +22,8 @@ function homepage_connection_banner() { wp_admin_notice( $message, array( - 'type' => 'info', - 'dismissible' => true, - 'id' => 'edit-homepage-banner', + 'type' => 'info', + 'id' => 'edit-homepage-banner', ) ); }