Skip to content

Update Edit homepage banner design and copy #43643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Update Edit homepage banner design and copy #43643

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d8418c7
Update `Edit homepage` banner design and copy
May 27, 2025
62c9897
changelog
May 27, 2025
7e82f56
Add tracking; keep button as anchor
May 28, 2025
ac73dd4
Fix tabs
May 28, 2025
c99f84b
Show the banner in the Site editor pages list too
May 28, 2025
f6b39d7
Import `wpcomTrackEvent` module
May 28, 2025
e55660a
Use `script_module_data` to provide the data to the front
May 29, 2025
d967740
Fix wrong param count
May 29, 2025
c0baf64
Rm site editor hack
May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/jetpack-mu-wpcom/changelog/update-edit-homepage-banner
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Update `Edit homepage` banner design and copy
49 changes: 26 additions & 23 deletions ...cts/packages/jetpack-mu-wpcom/src/features/pages/css/pages-homepage-connection-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
/**
* 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-edit-link {
font-size: 13px;
padding: 4px 0;
.wpcom-homepage-notice-right-column {
padding-top: 4px;
}

.wpcom-homepage-notice-edit-link:hover {
text-decoration: underline;
.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) {
Expand All @@ -44,8 +50,5 @@
flex-direction: column;
align-items: flex-start;
}

.wpcom-homepage-notice-actions {
margin-top: 12px;
}
}

}
65 changes: 46 additions & 19 deletions projects/packages/jetpack-mu-wpcom/src/features/pages/js/pages-homepage-connection-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,21 @@

/* global jQuery */
( function ( $ ) {
const trackEvent = ( eventName, eventProperties = {} ) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a function for this here: https://github.com/Automattic/jetpack/blob/45f8c2f30d6464e5bee9a2930ee97481fcc40616/projects/packages/jetpack-mu-wpcom/src/common/tracks.js

Do you think it's possible to re-use it in this context?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I managed to get it working with modules, see f6b39d7

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.
*
Expand All @@ -17,42 +32,52 @@
// 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';

// Create content wrapper
const content = document.createElement( 'div' );
content.className = 'wpcom-homepage-notice-content';
// 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 );

// Create info section
const info = document.createElement( 'div' );
info.className = 'wpcom-homepage-notice-info';
// 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;
info.appendChild( text );

// Add the info section to content
content.appendChild( info );
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 actions = document.createElement( 'div' );
actions.className = 'wpcom-homepage-notice-actions';
const btn = document.createElement( 'a' );

const link = document.createElement( 'a' );
link.className = 'wpcom-homepage-notice-edit-link';
link.href = data.editLink;
link.textContent = data.editText;
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' );
};

actions.appendChild( link );
content.appendChild( actions );
rightColumn.appendChild( btn );
}

// Add the content to the container
container.appendChild( content );

return container;
Expand All @@ -66,6 +91,8 @@
const $tablenav = $( '.tablenav.top' );

if ( $tablenav.length ) {
trackEvent( 'wpcom_pages_edit_homepage_banner_shown' );

$tablenav.before( banner );
}
} );
Expand Down
6 changes: 3 additions & 3 deletions projects/packages/jetpack-mu-wpcom/src/features/pages/pages-homepage-connection-banner.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,21 @@ 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' );

wp_register_script(
'wpcom-pages-homepage-connection-banner',
plugin_dir_url( __FILE__ ) . 'js/pages-homepage-connection-banner.js',
array( 'jquery' ),
'20250312',
'20250527',
true
);

Expand Down