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,