diff --git a/projects/js-packages/script-data/changelog/add-platform-config b/projects/js-packages/script-data/changelog/add-platform-config new file mode 100644 index 0000000000000..c576855bdd7d1 --- /dev/null +++ b/projects/js-packages/script-data/changelog/add-platform-config @@ -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 diff --git a/projects/js-packages/script-data/src/types.ts b/projects/js-packages/script-data/src/types.ts index 500d55f4a355c..f9ca06dba04c8 100644 --- a/projects/js-packages/script-data/src/types.ts +++ b/projects/js-packages/script-data/src/types.ts @@ -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 { diff --git a/projects/js-packages/script-data/src/utils.ts b/projects/js-packages/script-data/src/utils.ts index a338262bed8ac..8c37e52857949 100644 --- a/projects/js-packages/script-data/src/utils.ts +++ b/projects/js-packages/script-data/src/utils.ts @@ -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. +} + +/** + * 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; +} diff --git a/projects/js-packages/shared-extension-utils/changelog/add-platform-config b/projects/js-packages/shared-extension-utils/changelog/add-platform-config new file mode 100644 index 0000000000000..c576855bdd7d1 --- /dev/null +++ b/projects/js-packages/shared-extension-utils/changelog/add-platform-config @@ -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 diff --git a/projects/js-packages/shared-extension-utils/src/block-icons.js b/projects/js-packages/shared-extension-utils/src/block-icons.js index 34460cdc5bf60..b3857b4fb76fa 100644 --- a/projects/js-packages/shared-extension-utils/src/block-icons.js +++ b/projects/js-packages/shared-extension-utils/src/block-icons.js @@ -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. @@ -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(); } diff --git a/projects/js-packages/shared-extension-utils/src/get-icon-color.js b/projects/js-packages/shared-extension-utils/src/get-icon-color.js index a6ed8f32d9d5f..e2307b76891fb 100644 --- a/projects/js-packages/shared-extension-utils/src/get-icon-color.js +++ b/projects/js-packages/shared-extension-utils/src/get-icon-color.js @@ -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. @@ -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(); } diff --git a/projects/packages/assets/changelog/add-platform-config b/projects/packages/assets/changelog/add-platform-config new file mode 100644 index 0000000000000..c576855bdd7d1 --- /dev/null +++ b/projects/packages/assets/changelog/add-platform-config @@ -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 diff --git a/projects/packages/assets/src/class-script-data.php b/projects/packages/assets/src/class-script-data.php index 0d02571745048..9bd479652e6dd 100644 --- a/projects/packages/assets/src/class-script-data.php +++ b/projects/packages/assets/src/class-script-data.php @@ -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(), @@ -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(), ), ); @@ -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. + * @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. + * @return bool The filtered branding state. + */ + return apply_filters( 'jetpack_has_subtle_branding', true ); + } + /** * Get the site title. * diff --git a/projects/packages/forms/changelog/add-platform-config b/projects/packages/forms/changelog/add-platform-config new file mode 100644 index 0000000000000..c576855bdd7d1 --- /dev/null +++ b/projects/packages/forms/changelog/add-platform-config @@ -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 diff --git a/projects/packages/forms/src/blocks/contact-form/index.js b/projects/packages/forms/src/blocks/contact-form/index.js index 42a515b67d377..f8c90bd901748 100644 --- a/projects/packages/forms/src/blocks/contact-form/index.js +++ b/projects/packages/forms/src/blocks/contact-form/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/contact-form/variations.js b/projects/packages/forms/src/blocks/contact-form/variations.js index e2b6d9e05341e..5622cd85f0827 100644 --- a/projects/packages/forms/src/blocks/contact-form/variations.js +++ b/projects/packages/forms/src/blocks/contact-form/variations.js @@ -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 = [ { diff --git a/projects/packages/forms/src/blocks/dropzone/index.js b/projects/packages/forms/src/blocks/dropzone/index.js index 278e6e10786e4..bb7ec5f8381b5 100644 --- a/projects/packages/forms/src/blocks/dropzone/index.js +++ b/projects/packages/forms/src/blocks/dropzone/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-checkbox/index.js b/projects/packages/forms/src/blocks/field-checkbox/index.js index a2b0fe3bf7005..ed83bc46f0bb7 100644 --- a/projects/packages/forms/src/blocks/field-checkbox/index.js +++ b/projects/packages/forms/src/blocks/field-checkbox/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-consent/index.js b/projects/packages/forms/src/blocks/field-consent/index.js index dfaac750ffced..92bbc2c7c1a22 100644 --- a/projects/packages/forms/src/blocks/field-consent/index.js +++ b/projects/packages/forms/src/blocks/field-consent/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-date/index.js b/projects/packages/forms/src/blocks/field-date/index.js index bb15866642650..fe247fdd4e44f 100644 --- a/projects/packages/forms/src/blocks/field-date/index.js +++ b/projects/packages/forms/src/blocks/field-date/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-email/index.js b/projects/packages/forms/src/blocks/field-email/index.js index f4d0a9165d5e7..e4135de8ff961 100644 --- a/projects/packages/forms/src/blocks/field-email/index.js +++ b/projects/packages/forms/src/blocks/field-email/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-file/index.js b/projects/packages/forms/src/blocks/field-file/index.js index 4e09b45fbdbc5..ebd0c9efee3e8 100644 --- a/projects/packages/forms/src/blocks/field-file/index.js +++ b/projects/packages/forms/src/blocks/field-file/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-hidden/index.js b/projects/packages/forms/src/blocks/field-hidden/index.js index dda8e74533a48..5a9eef86d5276 100644 --- a/projects/packages/forms/src/blocks/field-hidden/index.js +++ b/projects/packages/forms/src/blocks/field-hidden/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-image-select/icon.tsx b/projects/packages/forms/src/blocks/field-image-select/icon.tsx index 456472ad47302..bfe66e1e235d2 100644 --- a/projects/packages/forms/src/blocks/field-image-select/icon.tsx +++ b/projects/packages/forms/src/blocks/field-image-select/icon.tsx @@ -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( diff --git a/projects/packages/forms/src/blocks/field-multiple-choice/index.js b/projects/packages/forms/src/blocks/field-multiple-choice/index.js index 1dc7c1f6d3f71..34f4dfe73ebb1 100644 --- a/projects/packages/forms/src/blocks/field-multiple-choice/index.js +++ b/projects/packages/forms/src/blocks/field-multiple-choice/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-name/index.js b/projects/packages/forms/src/blocks/field-name/index.js index 025b559f43cff..8a08acdf05b84 100644 --- a/projects/packages/forms/src/blocks/field-name/index.js +++ b/projects/packages/forms/src/blocks/field-name/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-number/index.js b/projects/packages/forms/src/blocks/field-number/index.js index 4faa4bc93dce3..49b6fe17c5d45 100644 --- a/projects/packages/forms/src/blocks/field-number/index.js +++ b/projects/packages/forms/src/blocks/field-number/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-rating/index.js b/projects/packages/forms/src/blocks/field-rating/index.js index 24052abbe50ad..c0064e18ffb71 100644 --- a/projects/packages/forms/src/blocks/field-rating/index.js +++ b/projects/packages/forms/src/blocks/field-rating/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-rating/variations.js b/projects/packages/forms/src/blocks/field-rating/variations.js index 9f9e1997b76d7..33b8fdd4d9df3 100644 --- a/projects/packages/forms/src/blocks/field-rating/variations.js +++ b/projects/packages/forms/src/blocks/field-rating/variations.js @@ -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 = [ { diff --git a/projects/packages/forms/src/blocks/field-select/index.js b/projects/packages/forms/src/blocks/field-select/index.js index 6da85d6c8dbce..e4cf04a6766f5 100644 --- a/projects/packages/forms/src/blocks/field-select/index.js +++ b/projects/packages/forms/src/blocks/field-select/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-single-choice/index.js b/projects/packages/forms/src/blocks/field-single-choice/index.js index 2b3c8c65dded8..90db03b8e7c91 100644 --- a/projects/packages/forms/src/blocks/field-single-choice/index.js +++ b/projects/packages/forms/src/blocks/field-single-choice/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-slider/index.js b/projects/packages/forms/src/blocks/field-slider/index.js index f37f3df3efa99..6798afbb0ea46 100644 --- a/projects/packages/forms/src/blocks/field-slider/index.js +++ b/projects/packages/forms/src/blocks/field-slider/index.js @@ -1,7 +1,7 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { __ } from '@wordpress/i18n'; import SliderIcon from '../input-range/icon'; import defaultSettings from '../shared/settings'; -import { getIconColor } from '../shared/util/block-icons'; import edit from './edit'; import save from './save'; diff --git a/projects/packages/forms/src/blocks/field-telephone/index.js b/projects/packages/forms/src/blocks/field-telephone/index.js index 433cd8594d776..fced8e0bc28df 100644 --- a/projects/packages/forms/src/blocks/field-telephone/index.js +++ b/projects/packages/forms/src/blocks/field-telephone/index.js @@ -1,8 +1,8 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { Icon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { mobile } 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'; diff --git a/projects/packages/forms/src/blocks/field-text/index.js b/projects/packages/forms/src/blocks/field-text/index.js index 37489e6ebb497..e077a8ea02dfa 100644 --- a/projects/packages/forms/src/blocks/field-text/index.js +++ b/projects/packages/forms/src/blocks/field-text/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-textarea/index.js b/projects/packages/forms/src/blocks/field-textarea/index.js index bff871a020745..8319871d528e6 100644 --- a/projects/packages/forms/src/blocks/field-textarea/index.js +++ b/projects/packages/forms/src/blocks/field-textarea/index.js @@ -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'; diff --git a/projects/packages/forms/src/blocks/field-time/index.js b/projects/packages/forms/src/blocks/field-time/index.js index d9d5d52124c9f..2aa507fcaba80 100644 --- a/projects/packages/forms/src/blocks/field-time/index.js +++ b/projects/packages/forms/src/blocks/field-time/index.js @@ -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 edit from './edit'; import save from './save'; diff --git a/projects/packages/forms/src/blocks/field-url/index.js b/projects/packages/forms/src/blocks/field-url/index.js index 4f92286dee283..4f4e3be6457b0 100644 --- a/projects/packages/forms/src/blocks/field-url/index.js +++ b/projects/packages/forms/src/blocks/field-url/index.js @@ -1,8 +1,8 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { Icon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { globe } 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'; diff --git a/projects/packages/forms/src/blocks/fieldset-image-options/icon.tsx b/projects/packages/forms/src/blocks/fieldset-image-options/icon.tsx index b86ddbbd8445d..eb6a9d210b985 100644 --- a/projects/packages/forms/src/blocks/fieldset-image-options/icon.tsx +++ b/projects/packages/forms/src/blocks/fieldset-image-options/icon.tsx @@ -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'; // "gallery" icon from @wordpress/icons const ImageOptionsFieldsetIcon = renderMaterialIcon( diff --git a/projects/packages/forms/src/blocks/form-progress-indicator/index.js b/projects/packages/forms/src/blocks/form-progress-indicator/index.js index 23d88926ccd3e..2868847a86ba5 100644 --- a/projects/packages/forms/src/blocks/form-progress-indicator/index.js +++ b/projects/packages/forms/src/blocks/form-progress-indicator/index.js @@ -1,7 +1,7 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { Circle, Rect } 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'; export const name = 'form-progress-indicator'; diff --git a/projects/packages/forms/src/blocks/form-step-container/index.js b/projects/packages/forms/src/blocks/form-step-container/index.js index f21fe738e4401..0ecfe98bdb14c 100644 --- a/projects/packages/forms/src/blocks/form-step-container/index.js +++ b/projects/packages/forms/src/blocks/form-step-container/index.js @@ -1,5 +1,5 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { __ } from '@wordpress/i18n'; -import { getIconColor } from '../shared/util/block-icons'; import edit from './edit'; import StepContainerIcon from './icon'; import save from './save'; diff --git a/projects/packages/forms/src/blocks/form-step-divider/index.js b/projects/packages/forms/src/blocks/form-step-divider/index.js index 78cc68000ce38..4fc5e4498c582 100644 --- a/projects/packages/forms/src/blocks/form-step-divider/index.js +++ b/projects/packages/forms/src/blocks/form-step-divider/index.js @@ -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'; export const name = 'form-step-divider'; diff --git a/projects/packages/forms/src/blocks/form-step-navigation/index.js b/projects/packages/forms/src/blocks/form-step-navigation/index.js index 388451171628e..bdf0ecc34fbe5 100644 --- a/projects/packages/forms/src/blocks/form-step-navigation/index.js +++ b/projects/packages/forms/src/blocks/form-step-navigation/index.js @@ -1,6 +1,6 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { __ } from '@wordpress/i18n'; import { next } from '@wordpress/icons'; -import { getIconColor } from '../shared/util/block-icons'; import edit from './edit'; import save from './save'; diff --git a/projects/packages/forms/src/blocks/form-step/index.js b/projects/packages/forms/src/blocks/form-step/index.js index c6d012a364021..4c58450d2ba94 100644 --- a/projects/packages/forms/src/blocks/form-step/index.js +++ b/projects/packages/forms/src/blocks/form-step/index.js @@ -1,5 +1,5 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { __ } from '@wordpress/i18n'; -import { getIconColor } from '../shared/util/block-icons'; import edit from './edit'; import StepIcon from './icon'; import save from './save'; diff --git a/projects/packages/forms/src/blocks/input-image-option/icon.tsx b/projects/packages/forms/src/blocks/input-image-option/icon.tsx index 643fe4b07afa6..f07a0698b7d4c 100644 --- a/projects/packages/forms/src/blocks/input-image-option/icon.tsx +++ b/projects/packages/forms/src/blocks/input-image-option/icon.tsx @@ -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'; // "group" icon from @wordpress/icons const ImageOptionInputIcon = renderMaterialIcon( diff --git a/projects/packages/forms/src/blocks/input-rating/index.js b/projects/packages/forms/src/blocks/input-rating/index.js index 7e11ec49553af..f18bcfb8dd13a 100644 --- a/projects/packages/forms/src/blocks/input-rating/index.js +++ b/projects/packages/forms/src/blocks/input-rating/index.js @@ -1,8 +1,8 @@ +import { getIconColor } from '@automattic/jetpack-shared-extension-utils'; import { SVG, Path } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import './style.scss'; import renderMaterialIcon from '../shared/components/render-material-icon'; -import { getIconColor } from '../shared/util/block-icons'; import edit from './edit'; const name = 'input-rating'; diff --git a/projects/packages/forms/src/blocks/shared/util/block-icons.js b/projects/packages/forms/src/blocks/shared/util/block-icons.js deleted file mode 100644 index 34460cdc5bf60..0000000000000 --- a/projects/packages/forms/src/blocks/shared/util/block-icons.js +++ /dev/null @@ -1,25 +0,0 @@ -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' ]; - -/** - * Returns the icon color for Jetpack blocks. - * - * Green in the Jetpack context, otherwise black for Simple sites or Atomic sites. - * - * @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; -} diff --git a/projects/packages/forms/src/dashboard/components/layout/index.tsx b/projects/packages/forms/src/dashboard/components/layout/index.tsx index e700ca9ddbca3..f97de87a4f479 100644 --- a/projects/packages/forms/src/dashboard/components/layout/index.tsx +++ b/projects/packages/forms/src/dashboard/components/layout/index.tsx @@ -3,6 +3,7 @@ */ import jetpackAnalytics from '@automattic/jetpack-analytics'; import { useBreakpointMatch, JetpackLogo } from '@automattic/jetpack-components'; +import { hasSubtleBranding } from '@automattic/jetpack-script-data'; import { NavigableRegion, Page } from '@wordpress/admin-ui'; import { useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; @@ -74,7 +75,7 @@ const Layout = () => {
- Forms + { hasSubtleBranding() && } Forms } subTitle={ __( diff --git a/projects/plugins/jetpack/changelog/add-platform-config b/projects/plugins/jetpack/changelog/add-platform-config new file mode 100644 index 0000000000000..6e651efb1492a --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-platform-config @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +This is more internally relavent diff --git a/projects/plugins/jetpack/extensions/shared/block-category.js b/projects/plugins/jetpack/extensions/shared/block-category.js index 25915c3d882e2..a9532a3890372 100644 --- a/projects/plugins/jetpack/extensions/shared/block-category.js +++ b/projects/plugins/jetpack/extensions/shared/block-category.js @@ -1,12 +1,13 @@ -import { isWpcomPlatformSite } from '@automattic/jetpack-script-data'; +import { hasBranding, hasSubtleBranding } from '@automattic/jetpack-script-data'; import { JetpackLogo } from '@automattic/jetpack-shared-extension-utils/icons'; import { getCategories, setCategories, registerBlockCollection } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; -const isWpcom = isWpcomPlatformSite(); +const showBranding = hasBranding(); +const showSubtleBranding = hasSubtleBranding(); -// We do not want the Jetpack collection on WordPress.com (Simple or Atomic). -if ( ! isWpcom ) { +// We do not want the Jetpack collection on platforms without Jetpack branding. +if ( showBranding ) { registerBlockCollection( 'jetpack', { title: 'Jetpack', icon: , @@ -20,7 +21,7 @@ setCategories( [ { slug: 'contact-form', title: __( 'Forms', 'jetpack' ), - icon: , + icon: showSubtleBranding ? : null, }, ] ); @@ -30,7 +31,7 @@ setCategories( [ { slug: 'monetize', title: __( 'Monetize', 'jetpack' ), - icon: , + icon: showSubtleBranding ? : null, }, ] ); @@ -40,6 +41,6 @@ setCategories( [ { slug: 'grow', title: __( 'Grow', 'jetpack' ), - icon: , + icon: showSubtleBranding ? : null, }, ] );