-
Notifications
You must be signed in to change notification settings - Fork 804
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Consolidate scripts for General Settings overrides (#41295)
* Consolidate scripts for General Settings overrides * changelog * Remove wpcom-fiverr/* * Revert "Remove wpcom-fiverr/*" This reverts commit 4c65d3b. * Revert "Consolidate scripts for General Settings overrides" This reverts commit a4dac17. * Don't remove the original files * Fix no DomainSettingsLinks on Atomic * Fix no DomainSettingsLinks on Atomic: use getElementById
- Loading branch information
Showing
9 changed files
with
239 additions
and
15 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/packages/jetpack-mu-wpcom/changelog/update-consolidate-options-general-scripts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: fixed | ||
|
|
||
| Consolidate scripts for General Settings overrides |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <?php | ||
| /** | ||
| * Override /wp-admin/options-general.php | ||
| * | ||
| * @package automattic/jetpack-mu-wpcom | ||
| */ | ||
|
|
||
| use Automattic\Jetpack\Jetpack_Mu_Wpcom; | ||
|
|
||
| /** | ||
| * The fiverr cta's DOM. | ||
| */ | ||
| function wpcom_fiverr_cta() { | ||
| ?> | ||
| <tr class="wpcom-fiverr-cta"> | ||
| <th> | ||
| <?php esc_html_e( 'Site Logo', 'jetpack-mu-wpcom' ); ?> | ||
| </th> | ||
| <td> | ||
| <p><b><?php esc_html_e( 'Make an incredible logo in minutes', 'jetpack-mu-wpcom' ); ?></b></p> | ||
| <p><?php esc_html_e( 'Pre-designed by top talent. Just add your touch.', 'jetpack-mu-wpcom' ); ?></p> | ||
| <button class="wpcom-fiverr-cta-button button"> | ||
| <svg width="20" height="20" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <circle cx="250" cy="250" r="177" fill="white"/> | ||
| <path d="M500 250C500 111.93 388.07 0 250 0C111.93 0 0 111.93 0 250C0 388.07 111.93 500 250 500C388.07 500 500 388.07 500 250ZM360.42 382.5H294.77V237.2H231.94V382.5H165.9V237.2H128.45V183.45H165.9V167.13C165.9 124.54 198.12 95.48 246.05 95.48H294.78V149.22H256.93C241.62 149.22 231.95 157.58 231.95 171.12V183.45H360.43V382.5H360.42Z" fill="#1DBF73"/> | ||
| </svg> | ||
| <?php esc_html_e( 'Try Fiverr Logo Maker', 'jetpack-mu-wpcom' ); ?> | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| <?php | ||
| } | ||
|
|
||
| /** | ||
| * Add the fiverr cta to the general settings page. | ||
| */ | ||
| function wpcom_fiverr() { | ||
| add_settings_field( 'wpcom_fiverr_cta', '', 'wpcom_fiverr_cta', 'general', 'default' ); | ||
| } | ||
| add_action( 'load-options-general.php', 'wpcom_fiverr' ); | ||
|
|
||
| /** | ||
| * Display the site URL in General Settings on Simple Classic sites. | ||
| */ | ||
| function wpcom_enqueue_options_general_assets() { | ||
| $asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-options-general/wpcom-options-general.asset.php'; | ||
|
|
||
| wp_enqueue_style( | ||
| 'wpcom-options-general', | ||
| plugins_url( 'build/wpcom-options-general/wpcom-options-general.css', Jetpack_Mu_Wpcom::BASE_FILE ), | ||
| array(), | ||
| $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-options-general/wpcom-options-general.css' ) | ||
| ); | ||
|
|
||
| wp_enqueue_script( | ||
| 'wpcom-options-general', | ||
| plugins_url( 'build/wpcom-options-general/wpcom-options-general.js', Jetpack_Mu_Wpcom::BASE_FILE ), | ||
| $asset_file['dependencies'] ?? array(), | ||
| $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-options-general/wpcom-options-general.js' ), | ||
| true | ||
| ); | ||
|
|
||
| $site_slug = wpcom_get_site_slug(); | ||
| $options_general_url = admin_url( 'options-general.php' ); | ||
| wp_add_inline_script( | ||
| 'wpcom-options-general', | ||
| 'window.wpcomSiteUrl = ' . wp_json_encode( | ||
| array( | ||
| 'siteUrl' => 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' ); |
9 changes: 9 additions & 0 deletions
9
projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .wpcom-fiverr-cta { | ||
| .wpcom-fiverr-cta-button { | ||
| margin-top: 1em; | ||
|
|
||
| svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| } |
123 changes: 123 additions & 0 deletions
123
projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/options-general.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = ` | ||
| <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/domains/add/%1$s?redirect_to=%2$s">custom domain</a>, ' + | ||
| '<a href="https://wordpress.com/domains/add/mapping/%1$s?redirect_to=%2$s">map</a> a domain you already own, ' + | ||
| 'or <a href="https://wordpress.com/domains/add/site-redirect/%1$s?redirect_to=%2$s">redirect</a> this site.' + | ||
| ' <a href="https://wordpress.com/domains/manage/%1$s/edit/%1$s">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 ); | ||
| _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(); | ||
| } ); |
12 changes: 12 additions & 0 deletions
12
projects/packages/jetpack-mu-wpcom/src/features/wpcom-options-general/types.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| declare global { | ||
| interface Window { | ||
| wpcomSiteUrl: { | ||
| siteUrl: string; | ||
| homeUrl: string; | ||
| siteSlug: string; | ||
| optionsGeneralUrl: string; | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| export {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters