Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | 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.getElementById( 'wpcom-fiverr-cta' )?.closest( 'tr' ); if ( fiverrCtaRow ) { fragment.appendChild( fiverrCtaRow ); } }; /** * Set up the Fiverr CTA. */ function wpcomInitializeFiverrCta() { // A button when a logo is set, an inline link in the empty state; only one // of the two is ever rendered. const fiverCta = document.querySelector( '.wpcom-fiverr-cta-button, .wpcom-fiverr-cta-link' ); if ( fiverCta ) { fiverCta.addEventListener( 'click', e => { e.preventDefault(); wpcomTrackEvent( 'wpcom_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 and append the "Make {domain} your site address" button, shown instead of * "Add custom address" when the site owns a domain that isn't its address yet. * @param previousSibling - The Site Address (URL) input. * @param candidates - Custom domains that could become the site address. */ function _wpcomBuildMakePrimaryAddressButton( previousSibling: HTMLElement, candidates: string[] ) { const makePrimaryButton = document.createElement( 'button' ); makePrimaryButton.type = 'button'; makePrimaryButton.className = 'button wpcom-add-custom-address-button'; makePrimaryButton.textContent = candidates.length === 1 ? sprintf( // translators: %s is a domain name, e.g. example.com. __( 'Make %s your site address', 'jetpack-mu-wpcom' ), candidates[ 0 ] ) : __( 'Choose your site address', 'jetpack-mu-wpcom' ); makePrimaryButton.addEventListener( 'click', e => { e.preventDefault(); wpcomTrackEvent( 'wpcom_admin_upgrade_nudge_cta_click', { cta_name: 'settings_site_address_make_primary', } ); window.open( `https://my.wordpress.com/sites/${ window.wpcomSiteUrl.siteSlug }/domains` ); } ); previousSibling.parentElement?.appendChild( makePrimaryButton ); } /** * Build and append the "Add custom address" button. * @param fragment - The document fragment for options general. */ function _wpcomBuildAddCustomAddressButton( fragment: DocumentFragment ) { // Fragment == simple, document == Atomic const previousSibling = ( fragment.getElementById( 'home' ) as HTMLInputElement ) || document.getElementById( 'home' ); if ( ! previousSibling ) { return; } // A domain the site already owns (e.g. bought during setup) beats buying another one. const candidates = window.wpcomSiteUrl?.primaryDomainCandidates ?? []; if ( candidates.length > 0 ) { _wpcomBuildMakePrimaryAddressButton( previousSibling, candidates ); return; } const addButton = document.createElement( 'button' ); addButton.type = 'button'; addButton.className = 'button wpcom-add-custom-address-button'; addButton.innerHTML = `+ ${ __( 'Add custom address', 'jetpack-mu-wpcom' ) }`; addButton.addEventListener( 'click', e => { e.preventDefault(); if ( typeof window.wpcomSiteUrl === 'undefined' ) { return; } wpcomTrackEvent( 'wpcom_admin_upgrade_nudge_cta_click', { cta_name: 'settings_site_address', } ); window.open( `https://wordpress.com/setup/domain/domains?siteSlug=${ window.wpcomSiteUrl.siteSlug }&back_to=${ window.wpcomSiteUrl.optionsGeneralUrl }` ); } ); previousSibling.parentElement?.appendChild( addButton ); } /** * 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 = ` <th scope="row"><label for="siteurl">${ siteUrlLabel }</label></th> <td><input type="url" id="siteurl" value="${ window.wpcomSiteUrl.siteUrl }" class="regular-text code disabled" disabled="disabled" /></td> `; 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 = ` <th scope="row"><label for="home">${ homeUrlLabel }</label></th> <td><input type="url" id="home" value="${ window.wpcomSiteUrl.homeUrl }" class="regular-text code disabled" disabled="disabled" /></td> `; 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 <a href="https://wordpress.com/setup/domain/domains?siteSlug=%1$s&back_to=%2$s">custom domain</a>, ' + '<a href="https://wordpress.com/setup/domain/use-my-domain?siteSlug=%1$s&back_to=%2$s">map</a> a domain you already own, ' + 'or <a href="https://my.wordpress.com/sites/%1$s/settings/site-redirect">redirect</a> this site.' + ' <a href="https://my.wordpress.com/sites/%1$s/domains?action=change-site-address">You can change your site address in Domain Settings</a>.', '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 ); _wpcomBuildAddCustomAddressButton( 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(); } ); |