From bf8131a27cb26550e26b712da412fe5f9644564e Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 20 Jul 2026 11:54:16 -0300 Subject: [PATCH 1/6] CRM: Replace admin footer credits with unified Jetpack footer markup Swap the WP admin footer content on CRM pages from the "Thank you for using Jetpack CRM" / version-string credits to the unified Jetpack admin footer: a Jetpack logo + "Jetpack" wordmark on the left (via admin_footer_text) and the Automattic "by line" on the right (via update_footer). Existing gating is preserved unchanged -- only rendered on CRM admin pages, only when the "Show admin credits" setting is on, and wrapped in ##WLREMOVE so it is stripped from white-label builds. Co-Authored-By: Claude Opus 4.8 (1M context) --- includes/ZeroBSCRM.AdminStyling.php | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/includes/ZeroBSCRM.AdminStyling.php b/includes/ZeroBSCRM.AdminStyling.php index 145ac0d6..3c2b1b4c 100644 --- a/includes/ZeroBSCRM.AdminStyling.php +++ b/includes/ZeroBSCRM.AdminStyling.php @@ -182,7 +182,7 @@ function zeroBSCRM_improvedPostMsgsTransactions( $messages ) { WordPress Footer Msg ====================================================== */ -// } Footer Text +// } Footer Text (left) - Jetpack logo + wordmark, matching the unified Jetpack admin footer function jpcrm_footer_credit_thanks( $content ) { // return original text if not on a CRM page @@ -194,7 +194,8 @@ function jpcrm_footer_credit_thanks( $content ) { global $zbs; $showpoweredby_admin = $zbs->settings->get( 'showpoweredby_admin' ) === 1 ? true : false; if ( $showpoweredby_admin ) { - return '' . sprintf( __( 'Thank you for using Jetpack CRM.', 'zero-bs-crm' ), $zbs->urls['home'] ) . ''; + $jetpack_logo = ''; + return ''; } ##/WLREMOVE @@ -203,6 +204,7 @@ function jpcrm_footer_credit_thanks( $content ) { } add_filter( 'admin_footer_text', 'jpcrm_footer_credit_thanks' ); +// } Footer Text (right) - Automattic "by line" logo, matching the unified Jetpack admin footer function jpcrm_footer_credit_version( $content ) { // return original text if not on a CRM page @@ -214,7 +216,9 @@ function jpcrm_footer_credit_version( $content ) { global $zbs; $showpoweredby_admin = $zbs->settings->get( 'showpoweredby_admin' ) === 1 ? true : false; if ( $showpoweredby_admin ) { - return sprintf( 'Jetpack CRM v%s', $zbs::VERSION ); + $byline_title = esc_attr__( 'An Automattic Airline', 'zero-bs-crm' ); + $byline_svg = ''; + return '' . $byline_svg . ''; } ##/WLREMOVE From 4833738d1182e98aae4704b7e8b44f30fcf96f44 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 20 Jul 2026 11:54:16 -0300 Subject: [PATCH 2/6] CRM: Style admin footer to match the unified Jetpack footer Add an emerald SCSS partial that restyles #wpfooter on CRM admin pages to match the unified Jetpack admin-page footer: top border, #fcfcfc surface, flex layout with the logo on the left and the Automattic by line pushed to the right. Scoped to body.jpcrm-admin and guarded with :has(.jetpack-footer__logo) so the styling only applies when the branded footer content is present (e.g. not when credits are disabled or under white label). WPDS design tokens are referenced with hardcoded fallbacks, mirroring the top menu partial. Co-Authored-By: Claude Opus 4.8 (1M context) --- sass/emerald/_jpcrm_footer.scss | 76 +++++++++++++++++++++++++++++++++ sass/jpcrm-emerald.scss | 3 ++ 2 files changed, 79 insertions(+) create mode 100644 sass/emerald/_jpcrm_footer.scss diff --git a/sass/emerald/_jpcrm_footer.scss b/sass/emerald/_jpcrm_footer.scss new file mode 100644 index 00000000..1acd8202 --- /dev/null +++ b/sass/emerald/_jpcrm_footer.scss @@ -0,0 +1,76 @@ +/* + * Jetpack CRM admin footer + * + * Restyles WordPress' #wpfooter on CRM admin pages to match the unified Jetpack + * admin-page footer: Jetpack logo + wordmark on the left, Automattic "by line" + * on the right. The footer contents are injected via the `admin_footer_text` + * (left) and `update_footer` (right) filters in ZeroBSCRM.AdminStyling.php. + * + * Note: WPDS custom properties (--wpds-*) are referenced with hardcoded + * fallbacks so this renders correctly whether or not the design tokens are + * present, mirroring the approach used by the top menu (_jpcrm_top_menu.scss). + */ + +body.jpcrm-admin { + + // Only restyle the footer when our branded footer content is present. When the + // "powered by" setting is off (or under white label) #wpfooter is left empty and + // keeps its default WordPress appearance. + #wpfooter:has( .jetpack-footer__logo ) { + align-items: center; + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc); + border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0); + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + font-size: var(--wpds-typography-font-size-md, 13px); + gap: 8px 24px; + padding: var(--wpds-dimension-padding-xl, 16px) var(--wpds-dimension-padding-2xl, 24px); + + // Undo WordPress' default float-based left/right layout; flex handles it. + p { + float: none; + line-height: 1; + margin: 0; + padding: 0; + } + + // Push the Automattic by line to the far right. + #footer-upgrade { + margin-inline-start: auto; + } + + .clear { + display: none; + } + } + + // Left: Jetpack logo + wordmark. + .jetpack-footer__logo { + align-items: center; + display: inline-flex; + gap: 8px; + + svg { + display: block; + flex-shrink: 0; + } + } + + .jetpack-footer__logo-text { + color: var(--wpds-color-foreground-neutral-strong, #1e1e1e); + font-size: var(--wpds-typography-font-size-md, 13px); + line-height: 1; + } + + // Right: Automattic "by line". + a.jetpack-footer__a8c { + align-items: center; + display: inline-flex; + + svg { + display: block; + fill: var(--wpds-color-foreground-interactive-neutral-weak, #646970); + } + } +} diff --git a/sass/jpcrm-emerald.scss b/sass/jpcrm-emerald.scss index 76201988..e4fc3b0b 100644 --- a/sass/jpcrm-emerald.scss +++ b/sass/jpcrm-emerald.scss @@ -8,6 +8,9 @@ /* top menu */ @use "emerald/jpcrm_top_menu"; +/* footer */ +@use "emerald/jpcrm_footer"; + /* components */ @use "emerald/buttons"; @use "emerald/dashcard"; From 98fdf0daa4253f78cce4ffc2f1eb1562d2409cad Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 20 Jul 2026 12:05:50 -0300 Subject: [PATCH 3/6] CRM: Fix admin footer layout on mobile Two mobile issues on CRM admin pages: - WordPress moves the admin menu off-canvas on small screens, but on CRM's non-fluid pages it can leave the desktop left margin on #wpfooter, so the footer was indented from the screen edge. Reset the margin to 0 at <=782px (where the menu is off-canvas, so it is safe) to sit flush left. - The unified Jetpack footer stacks its rows left-aligned on mobile, but it wraps naturally because of its middle nav links. The CRM footer only has the logo and the Automattic by line, so it never wrapped -- the by line stayed on the same row, pushed to the far edge. Stack the two explicitly at <=480px onto their own left-aligned rows. Desktop keeps the single-row layout with the by line pushed right, and the footer still clears the admin menu. Co-Authored-By: Claude Opus 4.8 (1M context) --- sass/emerald/_jpcrm_footer.scss | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/sass/emerald/_jpcrm_footer.scss b/sass/emerald/_jpcrm_footer.scss index 1acd8202..ce9bde57 100644 --- a/sass/emerald/_jpcrm_footer.scss +++ b/sass/emerald/_jpcrm_footer.scss @@ -24,7 +24,7 @@ body.jpcrm-admin { display: flex; flex-wrap: wrap; font-size: var(--wpds-typography-font-size-md, 13px); - gap: 8px 24px; + gap: var(--wpds-dimension-gap-xl, 24px); padding: var(--wpds-dimension-padding-xl, 16px) var(--wpds-dimension-padding-2xl, 24px); // Undo WordPress' default float-based left/right layout; flex handles it. @@ -35,7 +35,7 @@ body.jpcrm-admin { padding: 0; } - // Push the Automattic by line to the far right. + // Wide footer: single row, Automattic by line pushed to the far right. #footer-upgrade { margin-inline-start: auto; } @@ -45,6 +45,34 @@ body.jpcrm-admin { } } + // On mobile WordPress moves the admin menu off-canvas, but on CRM's non-fluid + // pages it can leave the desktop left margin on #wpfooter, indenting it. Drop + // it so the footer sits flush with the screen edge. + @media ( max-width: 782px ) { + + #wpfooter:has( .jetpack-footer__logo ) { + margin: 0; + } + } + + // Phones: stack the logo and the Automattic by line onto their own left-aligned + // rows, matching the unified Jetpack footer. Unlike that footer we have no + // middle nav links to force the wrap, so we stack explicitly. + @media ( max-width: 480px ) { + + #wpfooter:has( .jetpack-footer__logo ) { + + #footer-left, + #footer-upgrade { + flex-basis: 100%; + } + + #footer-upgrade { + margin-inline-start: 0; + } + } + } + // Left: Jetpack logo + wordmark. .jetpack-footer__logo { align-items: center; From ad452806182b8ef9ff9692723b658ea95c06c0b1 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 20 Jul 2026 13:29:45 -0300 Subject: [PATCH 4/6] CRM: Tidy footer styles per review - Drop the file header comment block. - Remove the #wpfooter p reset: WordPress already sets margin/padding to 0 on #wpfooter p, and flexbox neutralizes float on flex items, so the only live declaration was a minor line-height tweak that we don't need. - Keep the .clear rule but document why: WordPress core outputs an empty
inside #wpfooter, which as a flex item would add a trailing gap and push the Automattic by line off the right edge. Co-Authored-By: Claude Opus 4.8 (1M context) --- sass/emerald/_jpcrm_footer.scss | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/sass/emerald/_jpcrm_footer.scss b/sass/emerald/_jpcrm_footer.scss index ce9bde57..2338ff34 100644 --- a/sass/emerald/_jpcrm_footer.scss +++ b/sass/emerald/_jpcrm_footer.scss @@ -1,16 +1,3 @@ -/* - * Jetpack CRM admin footer - * - * Restyles WordPress' #wpfooter on CRM admin pages to match the unified Jetpack - * admin-page footer: Jetpack logo + wordmark on the left, Automattic "by line" - * on the right. The footer contents are injected via the `admin_footer_text` - * (left) and `update_footer` (right) filters in ZeroBSCRM.AdminStyling.php. - * - * Note: WPDS custom properties (--wpds-*) are referenced with hardcoded - * fallbacks so this renders correctly whether or not the design tokens are - * present, mirroring the approach used by the top menu (_jpcrm_top_menu.scss). - */ - body.jpcrm-admin { // Only restyle the footer when our branded footer content is present. When the @@ -27,19 +14,14 @@ body.jpcrm-admin { gap: var(--wpds-dimension-gap-xl, 24px); padding: var(--wpds-dimension-padding-xl, 16px) var(--wpds-dimension-padding-2xl, 24px); - // Undo WordPress' default float-based left/right layout; flex handles it. - p { - float: none; - line-height: 1; - margin: 0; - padding: 0; - } - // Wide footer: single row, Automattic by line pushed to the far right. #footer-upgrade { margin-inline-start: auto; } + // WordPress core outputs an empty
inside #wpfooter; + // as a flex item it would add a trailing gap that pushes the by line off + // the right edge, so drop it out of the layout. .clear { display: none; } From df8dcb9ecf34f087e7b117ec4bcd3e5088c78479 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 27 Jul 2026 13:00:30 -0300 Subject: [PATCH 5/6] CRM: Fix footer WPDS token names and fallbacks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The footer partial was authored against the renamed (long-form) WPDS token names — background-*/foreground-* — which only exist in @wordpress/theme 1.x. This repo ships 0.13.0, whose tokens use the old short names (bg-*/fg-*), so every footer token silently fell back to its hardcoded value. One of those fallbacks was wrong (#646970 vs #707070), leaving the Automattic byline the wrong grey. - Point the three renamed color tokens at the short name that resolves today, with the long name as a second var() fallback so they keep tracking WPDS after the eventual bump to @wordpress/theme 1.x, then the hardcoded value as a last resort. - foreground-neutral-strong was an invented name (exists in neither naming); use fg-content-neutral, the real #1e1e1e token. - Correct the dead fallbacks on the two non-renamed tokens (stroke-surface-neutral-weak #e4e4e4, padding-xl 20px) to match the shipped values so they no longer mislead. - Rewrite the mobile comment: the indent core leaves is the 36px .auto-fold icon-menu margin, not the desktop margin, and note why the mobile rules are reachable despite core hiding #wpfooter below 782px. Co-Authored-By: Claude Opus 4.8 (1M context) --- sass/emerald/_jpcrm_footer.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/sass/emerald/_jpcrm_footer.scss b/sass/emerald/_jpcrm_footer.scss index 2338ff34..ab1ebe8c 100644 --- a/sass/emerald/_jpcrm_footer.scss +++ b/sass/emerald/_jpcrm_footer.scss @@ -5,14 +5,14 @@ body.jpcrm-admin { // keeps its default WordPress appearance. #wpfooter:has( .jetpack-footer__logo ) { align-items: center; - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc); - border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0); + background-color: var(--wpds-color-bg-surface-neutral, var(--wpds-color-background-surface-neutral, #fcfcfc)); + border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4); box-sizing: border-box; display: flex; flex-wrap: wrap; font-size: var(--wpds-typography-font-size-md, 13px); gap: var(--wpds-dimension-gap-xl, 24px); - padding: var(--wpds-dimension-padding-xl, 16px) var(--wpds-dimension-padding-2xl, 24px); + padding: var(--wpds-dimension-padding-xl, 20px) var(--wpds-dimension-padding-2xl, 24px); // Wide footer: single row, Automattic by line pushed to the far right. #footer-upgrade { @@ -27,9 +27,11 @@ body.jpcrm-admin { } } - // On mobile WordPress moves the admin menu off-canvas, but on CRM's non-fluid - // pages it can leave the desktop left margin on #wpfooter, indenting it. Drop - // it so the footer sits flush with the screen edge. + // Below 782px WordPress core hides #wpfooter (common.css), but the base rule + // above keeps it shown — specificity (1,2,1) vs core's (1,0,0), and no media + // query — which is why these mobile rules are reachable at all. Core's + // `.auto-fold #wpfooter` also leaves a 36px icon-menu margin here (admin-menu.css, + // @media max-width: 960px); drop it so the footer sits flush with the screen edge. @media ( max-width: 782px ) { #wpfooter:has( .jetpack-footer__logo ) { @@ -68,7 +70,7 @@ body.jpcrm-admin { } .jetpack-footer__logo-text { - color: var(--wpds-color-foreground-neutral-strong, #1e1e1e); + color: var(--wpds-color-fg-content-neutral, var(--wpds-color-foreground-content-neutral, #1e1e1e)); font-size: var(--wpds-typography-font-size-md, 13px); line-height: 1; } @@ -80,7 +82,7 @@ body.jpcrm-admin { svg { display: block; - fill: var(--wpds-color-foreground-interactive-neutral-weak, #646970); + fill: var(--wpds-color-fg-interactive-neutral-weak, var(--wpds-color-foreground-interactive-neutral-weak, #707070)); } } } From 3c94ad9dca27c6b7b9858e450352c219d985199b Mon Sep 17 00:00:00 2001 From: Donncha O Caoimh <5656673+donnchawp@users.noreply.github.com> Date: Tue, 28 Jul 2026 13:20:43 +0100 Subject: [PATCH 6/6] CRM: Update admin credits setting description The admin footer no longer prints "Powered by Jetpack CRM" - it shows the Jetpack logo and the Automattic byline. Describe what the setting actually does now. --- admin/settings/general.page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin/settings/general.page.php b/admin/settings/general.page.php index 4feb3c86..b0ac93aa 100644 --- a/admin/settings/general.page.php +++ b/admin/settings/general.page.php @@ -632,7 +632,7 @@
- + />