Skip to content

wpcomsh: Keep gifting banner buttons readable under theme styles and long labels #54668

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

Merged
taipeicoder merged 9 commits into from
Nov 9, 2026
+53 −29
Merged

wpcomsh: Keep gifting banner buttons readable under theme styles and long labels #54668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fb0fea1
wpcomsh: Keep gifting banner buttons readable under theme styles and …
taipeicoder Nov 9, 2026
e84fca7
wpcomsh: Shorten the gifting banner "?" label to "Learn more"
taipeicoder Nov 9, 2026
c406a92
wpcomsh: Skip the gifting banner "?" label when cached data lacks it
taipeicoder Nov 9, 2026
8948ac8
wpcomsh: Set the gifting banner "?" label unconditionally
taipeicoder Nov 9, 2026
f140ebb
wpcomsh: Skip the gifting banner "?" label when cached data lacks it
taipeicoder Nov 9, 2026
4f5ef2e
wpcomsh: Drop the comment on the gifting banner label check
taipeicoder Nov 9, 2026
5eb0edd
wpcomsh: Keep the gifting banner "?" on its text line on phones
taipeicoder Nov 9, 2026
2e9a6bb
wpcomsh: Drop a no-op box-sizing from the gifting banner buttons
taipeicoder Nov 9, 2026
a15d5c8
wpcomsh: Hide the gifting banner gift image on phones
taipeicoder Nov 9, 2026
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/plugins/wpcomsh/changelog/fix-wpcomsh-gifting-banner-buttons
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Gifting banner: Keep the "?" and Gift buttons readable under theme button styles, stop long Gift labels being clipped on mobile, and give the "?" button an accessible name.
67 changes: 41 additions & 26 deletions projects/plugins/wpcomsh/frontend-notices/gifting-banner/css/gifting-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,42 +66,48 @@
text-align: left;
}

.wpcom-gifting-banner__button {
/* Scoped to the ID so theme and page-builder button rules
* (e.g. `.elementor-kit-N button`) can't restyle the banner. */
#wpcom-gifting-banner .wpcom-gifting-banner__button,
#wpcom-gifting-banner .wpcom-gifting-banner__more-info-button {
all: unset;
cursor: pointer;
}

#wpcom-gifting-banner .wpcom-gifting-banner__button {
flex-shrink: 0;
white-space: nowrap;
background: #fff;
color: #000;
border: none;
border-radius: 2px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
height: 32px;
margin-left: 12px;
padding: 6px 24px 6px 24px;
margin-inline-start: 12px;
padding: 6px 24px;
}

.wpcom-gifting-banner .wpcom-gifting-banner__button:hover {
background: #fff;
color: #000;
}

.wpcom-gifting-banner__more-info-button,
.wpcom-gifting-banner__more-info-button:hover {
cursor: pointer;
position: relative;
background: none;
border: 0;
padding: 6px 12px;
#wpcom-gifting-banner .wpcom-gifting-banner__more-info-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 22px;
margin-inline-start: 4px;
vertical-align: top;
}

.wpcom-gifting-banner__more-info-button::before {
background: url(../images/gridicons-help-outline.svg) no-repeat center;
#wpcom-gifting-banner .wpcom-gifting-banner__more-info-button::before {
content: "";
height: 16px;
width: 16px;
position: absolute;
bottom: 4px;
left: 5px;
height: 16px;
background: url(../images/gridicons-help-outline.svg) no-repeat center / 16px 16px;
}

#wpcom-gifting-banner .wpcom-gifting-banner__button:focus-visible,
#wpcom-gifting-banner .wpcom-gifting-banner__more-info-button:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}

@media (max-width: 480px) {
Expand All @@ -116,9 +122,13 @@
height: 26px;
}

/* Hidden so it can't wrap onto its own line; the gap replaces its margins. */
.wpcom-gifting-banner__img {
height: 16px;
width: 16px;
display: none;
}

.wpcom-gifting-banner__wrapper {
column-gap: 4px;
}

.wpcom-gifting-banner__title,
Expand All @@ -131,7 +141,12 @@
font-weight: 600;
}

.wpcom-gifting-banner__button {
#wpcom-gifting-banner .wpcom-gifting-banner__button {
font-size: 12px;
padding: 6px 16px;
}

#wpcom-gifting-banner .wpcom-gifting-banner__more-info-button {
height: 15px;
}
}
8 changes: 5 additions & 3 deletions projects/plugins/wpcomsh/frontend-notices/gifting-banner/gifting-banner.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,11 @@ public function inject_gifting_banner_wpcom() {
'title' => $this->get_title_texts( $days_to_expire ),
'subtitle' => $this->get_subtitle_texts( $this->current_plan, $days_to_expire ),
'button_text' => _x( 'Gift', 'verb', 'wpcomsh' ),
'more_info' => __( 'Learn more', 'wpcomsh' ),
);
// Change the version if associated files are updated, current: 20230103.
wp_enqueue_style( 'gifting-banner', plugins_url( 'gifting-banner/css/gifting-banner.css', __FILE__ ), array(), '20230103' );
wp_enqueue_script( 'gifting-banner', plugins_url( 'gifting-banner/js/gifting-banner.js', __FILE__ ), array(), '20230103', true );
// Change the version if associated files are updated, current: 20261109.
wp_enqueue_style( 'gifting-banner', plugins_url( 'gifting-banner/css/gifting-banner.css', __FILE__ ), array(), '20261109' );
wp_enqueue_script( 'gifting-banner', plugins_url( 'gifting-banner/js/gifting-banner.js', __FILE__ ), array(), '20261109', true );
wp_localize_script( 'gifting-banner', 'gifting_banner', $data );
wp_set_script_translations( 'gifting-banner', 'wpcomsh' );
}
Expand All @@ -165,6 +166,7 @@ public function inject_gifting_banner_wpcomsh() {
'verb',
'wpcomsh'
),
'more_info' => __( 'Learn more', 'wpcomsh' ),
);

wp_enqueue_style( 'gifting-banner', plugins_url( 'css/gifting-banner.css', __FILE__ ), array(), WPCOMSH_VERSION );
Expand Down
3 changes: 3 additions & 0 deletions projects/plugins/wpcomsh/frontend-notices/gifting-banner/js/gifting-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@
const more_info_button = document.createElement( 'BUTTON' );
more_info_button.setAttribute( 'id', 'wpcom-gifting-banner-more-info-button' );
more_info_button.setAttribute( 'class', 'wpcom-gifting-banner__more-info-button' );
if ( gifting_banner.i18n.more_info ) {
more_info_button.setAttribute( 'aria-label', gifting_banner.i18n.more_info );
}
const button_text = document.createTextNode( gifting_banner.i18n.button_text );

notice.getElementsByClassName( 'wpcom-gifting-banner__title' )[ 0 ].appendChild( title );
Expand Down
Loading