Skip to content

Add platform config #45874

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 6 commits into
base: trunk
Choose a base branch
from
+190 −95
Open

Add platform config #45874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c859ab5
Add Plaform config for accentColour, hasBranding and hasSubtleBranding
enejb Oct 29, 2025
5df002b
update get icon color to use the new accent colour
enejb Oct 29, 2025
05cf8e0
update the block-category.js
enejb Oct 29, 2025
cbb7d1b
Use the projects/js-packages/shared-extension-utils for getIconColor
enejb Oct 30, 2025
79c39e2
Remove the Jetpack logo from forms
enejb Oct 30, 2025
4736d66
changelog
enejb Nov 11, 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/js-packages/script-data/changelog/add-platform-config
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Brand: Add brand filter so that you can change icon colour and determine the amount of branding you want to show
7 changes: 7 additions & 0 deletions projects/js-packages/script-data/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,16 @@ export interface UserData {
current_user: CurrentUserData;
}

export interface PlatformData {
accent_colour?: string;
has_branding?: boolean;
has_subtle_branding?: boolean;
}

export interface JetpackScriptData {
site: SiteData;
user: UserData;
platform?: PlatformData;
}

declare global {
Expand Down
48 changes: 48 additions & 0 deletions projects/js-packages/script-data/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,51 @@ export function isJetpackSelfHostedSite() {
export function currentUserCan( capability: keyof CurrentUserData[ 'capabilities' ] ): boolean {
return getScriptData()?.user.current_user.capabilities[ capability ];
}

/**
* Get the platform data from the script data.
*
* @return {import('./types').PlatformData} The platform data.
*/
export function getPlatformData() {
return getScriptData()?.platform;
}

/**
* Get the accent colour for the site.
*
* @return {string|null} The accent colour in hex format.
*/
export function accentColour(): string | null {
if ( isWpcomPlatformSite() ) {
// Return null to match core block styling
return null;
}
return getPlatformData()?.accent_colour || '#069e08'; // Jetpack green as default.
Comment on lines +139 to +143
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

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

The logic for returning accentColour has a potential issue. When isWpcomPlatformSite() returns true, the function returns null to match core block styling. However, this bypasses the filter jetpack_accent_colour entirely for WordPress.com sites. If the intent is to allow WordPress.com sites to still use the filter to set a custom accent color, this early return prevents that. Consider checking the platform data first before deciding to return null.

Suggested change
if ( isWpcomPlatformSite() ) {
// Return null to match core block styling
return null;
}
return getPlatformData()?.accent_colour || '#069e08'; // Jetpack green as default.
const accentColour = getPlatformData()?.accent_colour;
if ( accentColour ) {
return accentColour;
}
if ( isWpcomPlatformSite() ) {
// Return null to match core block styling if no custom accent color is set
return null;
}
return '#069e08'; // Jetpack green as default.

Copilot uses AI. Check for mistakes.
}

/**
* Check if the platform has Jetpack branding enabled.
*
* This determines if Jetpack logos, colors, and other branding elements
* should be displayed in the UI.
*
* @return {boolean} Whether the platform has branding enabled.
*/
export function hasBranding(): boolean {
// Default to true if the platform data is not available
return getPlatformData()?.has_branding ?? true;
}

/**
* Check if the platform has Jetpack subtle branding enabled.
*
* This determines if Jetpack logos, colors, and other branding elements
* should be displayed in a less prominent way in the UI.
*
* @return {boolean} Whether the platform has subtle branding enabled.
*/
export function hasSubtleBranding(): boolean {
// Default to true if the platform data is not available
return getPlatformData()?.has_subtle_branding ?? true;
}
4 changes: 4 additions & 0 deletions projects/js-packages/shared-extension-utils/changelog/add-platform-config
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Brand: Add brand filter so that you can change icon colour and determine the amount of branding you want to show
17 changes: 2 additions & 15 deletions projects/js-packages/shared-extension-utils/src/block-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import colorStudio from '@automattic/color-studio';
import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';

/**
* Constants
*/
const PALETTE = colorStudio.colors;
const COLOR_JETPACK = PALETTE[ 'Jetpack Green 40' ];
import { accentColour } from '@automattic/jetpack-script-data';

/**
* Returns the icon color for Jetpack blocks.
Expand All @@ -15,11 +8,5 @@ const COLOR_JETPACK = PALETTE[ 'Jetpack Green 40' ];
* @return {string} HEX color for block editor icons
*/
export function getIconColor() {
if ( isWpcomPlatformSite() ) {
// Return null to match core block styling
return null;
}

// Jetpack Green
return COLOR_JETPACK;
return accentColour();
}
15 changes: 2 additions & 13 deletions projects/js-packages/shared-extension-utils/src/get-icon-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';

/**
* Constants
*/
const JETPACK_GREEN_40 = '#069e08';
import { accentColour } from '@automattic/jetpack-script-data';

/**
* Returns the icon color for Jetpack blocks.
Expand All @@ -13,11 +8,5 @@ const JETPACK_GREEN_40 = '#069e08';
* @return {string} HEX color for block editor icons
*/
export default function getIconColor() {
if ( isWpcomPlatformSite() ) {
// Return null to match core block styling
return null;
}

// Jetpack Green
return JETPACK_GREEN_40;
return accentColour();
}
4 changes: 4 additions & 0 deletions projects/packages/assets/changelog/add-platform-config
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Brand: Add brand filter so that you can change icon colour and determine the amount of branding you want to show
72 changes: 70 additions & 2 deletions projects/packages/assets/src/class-script-data.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ protected static function get_admin_script_data() {
global $wp_version;

$data = array(
'site' => array(
'site' => array(
'admin_url' => esc_url_raw( admin_url() ),
'date_format' => get_option( 'date_format' ),
'icon' => self::get_site_icon(),
Expand All @@ -145,7 +145,12 @@ protected static function get_admin_script_data() {
'blog_id' => 0,
),
),
'user' => array(
'platform' => array(
'accent_colour' => self::get_accent_colour(),
'has_branding' => self::get_has_branding(),
'has_subtle_branding' => self::get_has_subtle_branding(),
),
'user' => array(
'current_user' => self::get_current_user_data(),
),
);
Expand Down Expand Up @@ -186,6 +191,69 @@ protected static function get_public_script_data() {
return apply_filters( 'jetpack_public_js_script_data', $data );
}

/**
* Get the accent colour.
*
* @return string
*/
private static function get_accent_colour() {
/**
* Filters the accent colour used in the Jetpack interface.
*
* @since $$NEXT_VERSION$$
*
* @param string $colour The accent colour in HEX format.
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

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

The filter documentation specifies the parameter as @param string $colour The accent colour in HEX format. which suggests only HEX values are expected. However, the PR description states "To remove the colour set this to inherit", suggesting a CSS keyword could be used. This inconsistency should be clarified - either update the documentation to indicate that CSS keywords like 'inherit' are also acceptable, or update the PR description if only HEX values are supported.

Suggested change
* @param string $colour The accent colour in HEX format.
* @param string $colour The accent colour in HEX format (e.g. "#069e08") or the CSS keyword 'inherit' to remove the colour.

Copilot uses AI. Check for mistakes.
* @return string The filtered accent colour.
*/
return apply_filters( 'jetpack_accent_colour', '#069e08' ); // Jetpack green as default.
}

/**
* Get whether the platform has branding enabled.
*
* @return bool
*/
private static function get_has_branding() {
// Default: Jetpack sites have branding, WordPress.com platform sites don't
$default = ! ( new Host() )->is_wpcom_platform();

/**
* Filters whether the platform has Jetpack branding enabled.
*
* This determines if Jetpack logos, colors, and other branding elements
* should be displayed in the UI.
*
* @since $$NEXT_VERSION$$
*
* @param bool $has_branding Whether branding is enabled.
* @return bool The filtered branding state.
*/
return apply_filters( 'jetpack_has_branding', $default );
}

/**
* Get whether the platform has subtle branding enabled.
*
* Subtle branding means less prominent Jetpack logos and colors in the UI.
*
* @return bool
*/
private static function get_has_subtle_branding() {

/**
* Filters whether the platform has Jetpack subtle branding enabled.
*
* This determines if Jetpack logos, colors, and other branding elements
* should be displayed in the UI.
*
* @since $$NEXT_VERSION$$
*
* @param bool $has_branding Whether branding is enabled.
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

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

The doc comment has incorrect parameter description. Line 251 says @param bool $has_branding Whether branding is enabled. but this is for the jetpack_has_subtle_branding filter, not the jetpack_has_branding filter. The parameter should be named $has_subtle_branding and the description should reference subtle branding.

Suggested change
* @param bool $has_branding Whether branding is enabled.
* @param bool $has_subtle_branding Whether subtle branding is enabled.

Copilot uses AI. Check for mistakes.
* @return bool The filtered branding state.
Comment on lines +247 to +252
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

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

Incomplete documentation comment. The comment on line 246 states "This determines if Jetpack logos, colors, and other branding elements should be displayed in the UI." but this is for subtle branding specifically. The comment should clarify that this is for subtle or less prominent display of branding elements, distinguishing it from the regular has_branding setting.

Suggested change
* should be displayed in the UI.
*
* @since $$NEXT_VERSION$$
*
* @param bool $has_branding Whether branding is enabled.
* @return bool The filtered branding state.
* should be displayed in a *subtle* or *less prominent* way in the UI,
* as opposed to the regular branding setting which may display them more prominently.
*
* @since $$NEXT_VERSION$$
*
* @param bool $has_branding Whether subtle branding is enabled.
* @return bool The filtered subtle branding state.

Copilot uses AI. Check for mistakes.
*/
return apply_filters( 'jetpack_has_subtle_branding', true );
}

/**
* Get the site title.
*
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/add-platform-config
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Brand: Add brand filter so that you can change icon colour and determine the amount of branding you want to show
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/contact-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { Path } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import './editor.scss';
import renderMaterialIcon from '../shared/components/render-material-icon';
import { getIconColor } from '../shared/util/block-icons';
import defaultAttributes from './attributes';
import deprecated from './deprecated';
import edit from './edit';
Expand Down
3 changes: 1 addition & 2 deletions projects/packages/forms/src/blocks/contact-form/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
import { hasFeatureFlag } from '@automattic/jetpack-shared-extension-utils';
import { hasFeatureFlag, getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import { people } from '@wordpress/icons';
import renderMaterialIcon from '../shared/components/render-material-icon';
import { getIconColor } from '../shared/util/block-icons';

const variations = [
{
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/dropzone/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import { getIconColor } from '../shared/util/block-icons';
import edit from './edit';
import save from './save';

Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-checkbox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-consent/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-date/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-email/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { envelope } from '@wordpress/icons';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { upload } from '@wordpress/icons';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import edit from './edit';
import save from './save';

Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-hidden/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { __ } from '@wordpress/i18n';
import { unseen } from '@wordpress/icons';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import edit from './edit';
import save from './save';

Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-image-select/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/**
* External dependencies
*/
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
/**
* Internal dependencies
*/
import renderMaterialIcon from '../shared/components/render-material-icon';
import { getIconColor } from '../shared/util/block-icons';

// "image" icon from @wordpress/icons
const ImageSelectFieldIcon = renderMaterialIcon(
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-multiple-choice/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-name/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import transformsSource from '../shared/settings/transforms';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-number/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-rating/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { SVG, Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import edit from './edit';
import save from './save';
import variations from './variations';
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-rating/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import { getIconColor } from '../shared/util/block-icons';

const variations = [
{
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/field-select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { getIconColor } from '@automattic/jetpack-shared-extension-utils';
import { Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import renderMaterialIcon from '../shared/components/render-material-icon';
import defaultSettings from '../shared/settings';
import { getIconColor } from '../shared/util/block-icons';
import deprecated from './deprecated';
import edit from './edit';
import save from './save';
Expand Down
Loading
Loading