diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-consolidate-options-general-scripts b/projects/packages/jetpack-mu-wpcom/changelog/update-consolidate-options-general-scripts
new file mode 100644
index 0000000000000..c446aed1699f7
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/update-consolidate-options-general-scripts
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Consolidate scripts for General Settings overrides
diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
index 603874b5fac36..131e524de9278 100644
--- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
+++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
@@ -153,13 +153,12 @@ public static function load_wpcom_user_features() {
require_once __DIR__ . '/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php';
require_once __DIR__ . '/features/wpcom-locale/sync-locale-from-calypso-to-atomic.php';
require_once __DIR__ . '/features/wpcom-media/wpcom-external-media-import.php';
+ require_once __DIR__ . '/features/wpcom-options-general/options-general.php';
require_once __DIR__ . '/features/wpcom-plugins/wpcom-plugins.php';
require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-link-to-wpcom.php';
require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-notices.php';
require_once __DIR__ . '/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php';
- require_once __DIR__ . '/features/wpcom-siteurl/siteurl.php';
require_once __DIR__ . '/features/wpcom-themes/wpcom-themes.php';
- require_once __DIR__ . '/features/wpcom-fiverr/wpcom-fiverr.php';
// Only load the Calypsoify and Masterbar features on WoA sites.
if ( class_exists( '\Automattic\Jetpack\Status\Host' ) && ( new \Automattic\Jetpack\Status\Host() )->is_woa_site() ) {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php
index 69c7c569fb869..19a09b0b73661 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php
@@ -10,7 +10,7 @@
/**
* Enqueue assets needed by the fiverr cta.
*/
-function wpcom_fiverr_enqueue_scripts() {
+function _wpcom_fiverr_enqueue_scripts() {
$asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-fiverr/wpcom-fiverr.asset.php';
wp_enqueue_style(
@@ -31,20 +31,20 @@ function wpcom_fiverr_enqueue_scripts() {
)
);
}
-add_action( 'admin_enqueue_scripts', 'wpcom_fiverr_enqueue_scripts' );
+add_action( 'admin_enqueue_scripts', '_wpcom_fiverr_enqueue_scripts' );
/**
* Add the fiverr cta to the general settings page.
*/
-function wpcom_fiverr() {
- add_settings_field( 'wpcom_fiverr_cta', '', 'wpcom_fiverr_cta', 'general', 'default' );
+function _wpcom_fiverr() {
+ add_settings_field( 'wpcom_fiverr_cta', '', '_wpcom_fiverr_cta', 'general', 'default' );
}
-add_action( 'admin_init', 'wpcom_fiverr' );
+add_action( 'admin_init', '_wpcom_fiverr' );
/**
* Display the fiverr cta on the general settings page.
*/
-function wpcom_fiverr_cta() {
+function _wpcom_fiverr_cta() {
?>
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.php
new file mode 100644
index 0000000000000..244a23336ef0e
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.php
@@ -0,0 +1,78 @@
+
+ |
+
+
+ |
+
+
+
+
+ |
+
+ get_option( 'siteurl' ),
+ 'homeUrl' => get_option( 'home' ),
+ 'siteSlug' => $site_slug,
+ 'optionsGeneralUrl' => $options_general_url,
+ )
+ ) . ';',
+ 'before'
+ );
+}
+add_action( 'admin_enqueue_scripts', 'wpcom_enqueue_options_general_assets' );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.scss
new file mode 100644
index 0000000000000..7f2211b96cc62
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.scss
@@ -0,0 +1,9 @@
+.wpcom-fiverr-cta {
+ .wpcom-fiverr-cta-button {
+ margin-top: 1em;
+
+ svg {
+ vertical-align: middle;
+ }
+ }
+}
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.ts b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.ts
new file mode 100644
index 0000000000000..7cf82273357c2
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.ts
@@ -0,0 +1,123 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { wpcomTrackEvent } from '../../common/tracks';
+
+/**
+ * Build the Fiverr CTA.
+ * @param fragment - The document fragment for options general.
+ */
+const _wpcomBuildFiverrCta = ( fragment: DocumentFragment ) => {
+ const fiverrCtaRow = document.querySelector( '.wpcom-fiverr-cta' );
+ if ( fiverrCtaRow ) {
+ fragment.appendChild( fiverrCtaRow );
+ }
+};
+
+/**
+ * Set up the Fiverr CTA.
+ */
+function wpcomInitializeFiverrCta() {
+ const fiverCta = document.querySelector( '.wpcom-fiverr-cta-button' );
+ if ( fiverCta ) {
+ fiverCta.addEventListener( 'click', e => {
+ e.preventDefault();
+
+ wpcomTrackEvent( 'wp_admin_site_icon_fiverr_logo_maker_cta_click', {
+ cta_name: 'wp_admin_site_icon_fiverr_logo_maker',
+ } );
+
+ window.open( 'https://wp.me/logo-maker/?utm_campaign=general_settings', '_blank' );
+ } );
+ }
+}
+
+/**
+ * Build the Site Address (URL) and WordPress Address (URL) input fields.
+ * @param fragment - The document fragment for options general.
+ */
+const _wpcomBuildSiteUrl = ( fragment: DocumentFragment ) => {
+ if ( typeof window.wpcomSiteUrl === 'undefined' ) {
+ return;
+ }
+
+ // Create the WordPress Address (URL) row
+ if ( ! document.getElementById( 'siteurl' ) ) {
+ const siteUrlLabel = __( 'WordPress Address (URL)', 'jetpack-mu-wpcom' );
+ const siteUrlRow = document.createElement( 'tr' );
+ siteUrlRow.innerHTML = `
+ |
+ |
+ `;
+ fragment.appendChild( siteUrlRow );
+ }
+
+ // Create the Site Address (URL) row
+ if ( ! document.getElementById( 'home' ) ) {
+ const homeUrlLabel = __( 'Site Address (URL)', 'jetpack-mu-wpcom' );
+ const homeUrlRow = document.createElement( 'tr' );
+ homeUrlRow.innerHTML = `
+ |
+ |
+ `;
+ fragment.appendChild( homeUrlRow );
+ }
+};
+
+/**
+ * Adds domain settings links under the site URL input fields both on Simple and Atomic sites.
+ * @param fragment - The document fragment for options general.
+ */
+function _wpcomBuildDomainSettingsLinks( fragment: DocumentFragment ) {
+ if ( typeof window.wpcomSiteUrl === 'undefined' ) {
+ return;
+ }
+
+ // Either WordPress Address (URL) or Site Address (URL), whichever comes last.
+ const previousSibling =
+ ( fragment.getElementById( 'home' ) as HTMLInputElement ) ||
+ ( fragment.getElementById( 'siteurl' ) as HTMLInputElement ) ||
+ document.getElementById( 'home' ) ||
+ document.getElementById( 'siteurl' );
+ if ( ! previousSibling ) {
+ return;
+ }
+
+ const domainSettingsLink = document.createElement( 'p' );
+ domainSettingsLink.className = 'description';
+ domainSettingsLink.innerHTML = sprintf(
+ // translators: %1$s is the site slug, %2$s is the URL to the General Settings page.
+ __(
+ 'Buy a custom domain, ' +
+ 'map a domain you already own, ' +
+ 'or redirect this site.' +
+ ' You can change your site address in Domain Settings.',
+ 'jetpack-mu-wpcom'
+ ),
+ window.wpcomSiteUrl.siteSlug,
+ window.wpcomSiteUrl.optionsGeneralUrl
+ );
+
+ previousSibling.parentElement?.appendChild( domainSettingsLink );
+}
+
+/**
+ * Add the options general fragment.
+ */
+const wpcomAddOptionsGeneralFragment = () => {
+ const fragment = document.createDocumentFragment();
+
+ _wpcomBuildFiverrCta( fragment );
+ _wpcomBuildSiteUrl( fragment );
+ _wpcomBuildDomainSettingsLinks( fragment );
+
+ // Insert the fragment after the site icon section.
+ const siteIconSectionRow = document.querySelector( '.site-icon-section' );
+ if ( siteIconSectionRow ) {
+ // Insert the UI elements in a single operation to minimize reflow.
+ siteIconSectionRow.parentNode?.insertBefore( fragment, siteIconSectionRow.nextSibling );
+ }
+};
+
+document.addEventListener( 'DOMContentLoaded', function () {
+ wpcomAddOptionsGeneralFragment();
+ wpcomInitializeFiverrCta();
+} );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/types.d.ts b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/types.d.ts
new file mode 100644
index 0000000000000..8648ba970760b
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/types.d.ts
@@ -0,0 +1,12 @@
+declare global {
+ interface Window {
+ wpcomSiteUrl: {
+ siteUrl: string;
+ homeUrl: string;
+ siteSlug: string;
+ optionsGeneralUrl: string;
+ };
+ }
+}
+
+export {};
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-siteurl/siteurl.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-siteurl/siteurl.php
index 66980a101d1d3..6e8f65f786051 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-siteurl/siteurl.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-siteurl/siteurl.php
@@ -10,7 +10,7 @@
/**
* Enqueues the site URL script and localizes script data for General Settings.
*/
-function wpcom_add_siteurl_to_general_settings() {
+function _wpcom_add_siteurl_to_general_settings() {
if ( ! class_exists( 'Automattic\Jetpack\Status\Host' ) ) {
return;
}
@@ -39,4 +39,4 @@ function wpcom_add_siteurl_to_general_settings() {
'before'
);
}
-add_action( 'load-options-general.php', 'wpcom_add_siteurl_to_general_settings' );
+add_action( 'load-options-general.php', '_wpcom_add_siteurl_to_general_settings' );
diff --git a/projects/packages/jetpack-mu-wpcom/webpack.config.js b/projects/packages/jetpack-mu-wpcom/webpack.config.js
index 7adc726e418c3..1cf55004d945f 100644
--- a/projects/packages/jetpack-mu-wpcom/webpack.config.js
+++ b/projects/packages/jetpack-mu-wpcom/webpack.config.js
@@ -47,19 +47,18 @@ module.exports = [
'./src/features/wpcom-documentation-links/wpcom-documentation-links.ts',
'wpcom-external-media-import-page':
'./src/features/wpcom-media/wpcom-external-media-import.js',
+ 'wpcom-options-general': [
+ './src/features/wpcom-options-general/options-general.js',
+ './src/features/wpcom-options-general/options-general.scss',
+ ],
'wpcom-plugins-banner': './src/features/wpcom-plugins/js/banner.js',
'wpcom-plugins-banner-style': './src/features/wpcom-plugins/css/banner.css',
'wpcom-profile-settings-link-to-wpcom':
'./src/features/wpcom-profile-settings/profile-settings-link-to-wpcom.ts',
'wpcom-sidebar-notice': './src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js',
- 'wpcom-siteurl': './src/features/wpcom-siteurl/siteurl.js',
'starter-page-templates': './src/features/starter-page-templates/index.tsx',
'removed-calypso-screen-notice':
'./src/features/wpcom-admin-interface/removed-calypso-screen-notice.tsx',
- 'wpcom-fiverr': [
- './src/features/wpcom-fiverr/wpcom-fiverr.ts',
- './src/features/wpcom-fiverr/wpcom-fiverr.scss',
- ],
},
mode: jetpackWebpackConfig.mode,
devtool: jetpackWebpackConfig.devtool,