diff --git a/projects/packages/jetpack-mu-wpcom/changelog/dotcom-10634-reimplement-hostingtools-marketing-tools-tab-as-tools b/projects/packages/jetpack-mu-wpcom/changelog/dotcom-10634-reimplement-hostingtools-marketing-tools-tab-as-tools new file mode 100644 index 0000000000000..1391805af5b06 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/dotcom-10634-reimplement-hostingtools-marketing-tools-tab-as-tools @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Untangling: Add Marketing Tools page to wp-admin 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 b8ed46039d033..3339b81a03a81 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 @@ -318,6 +318,7 @@ public static function load_wpcom_user_features() { if ( ! class_exists( 'A8C\FSE\Help_Center' ) ) { require_once __DIR__ . '/features/help-center/class-help-center.php'; } + require_once __DIR__ . '/features/marketing/marketing.php'; require_once __DIR__ . '/features/pages/pages.php'; require_once __DIR__ . '/features/replace-site-visibility/replace-site-visibility.php'; require_once __DIR__ . '/features/stats/stats.php'; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/activitypub-logo.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/activitypub-logo.svg new file mode 100644 index 0000000000000..c4770de8f6830 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/activitypub-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/dot-grid.png b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/dot-grid.png new file mode 100644 index 0000000000000..9389e4b57610e Binary files /dev/null and b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/dot-grid.png differ diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/earn.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/earn.svg new file mode 100644 index 0000000000000..2e998d91f8d9d --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/earn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/facebook-logo.png b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/facebook-logo.png new file mode 100644 index 0000000000000..c29eabd156e5b Binary files /dev/null and b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/facebook-logo.png differ diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/fiverr-logo.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/fiverr-logo.svg new file mode 100644 index 0000000000000..d8d94027888b5 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/fiverr-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/premium-plugins.png b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/premium-plugins.png new file mode 100644 index 0000000000000..9e7f92c10bf8d Binary files /dev/null and b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/premium-plugins.png differ diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/rocket.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/rocket.svg new file mode 100644 index 0000000000000..7aaae57369d39 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/rocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/social-media-logos.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/social-media-logos.svg new file mode 100644 index 0000000000000..f413f040c35ce --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/social-media-logos.svg @@ -0,0 +1 @@ + diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/wordpress-logo.svg b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/wordpress-logo.svg new file mode 100644 index 0000000000000..165824d4b02e9 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/images/wordpress-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.js b/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.js new file mode 100644 index 0000000000000..2f9149d3877cf --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.js @@ -0,0 +1,42 @@ +/* global wpcomMarketing */ + +import domReady from '@wordpress/dom-ready'; +import { __ } from '@wordpress/i18n'; +import wpcomRequest from 'wpcom-proxy-request'; +import { wpcomTrackEvent } from '../../common/tracks'; + +const callbacks = { + enableActivityPub: async e => { + e.preventDefault(); + const defaultText = e.target.innerText; + e.target.innerText = __( 'Joining…', 'jetpack-mu-wpcom' ); + e.target.classList.add( 'disabled' ); + + const response = await wpcomRequest( { + path: `/sites/${ wpcomMarketing.siteId }/activitypub/status`, + apiNamespace: 'wpcom/v2', + apiVersion: '2', + body: { + enabled: true, + }, + method: 'POST', + } ); + if ( response.enabled ) { + window.location.href = e.target.href; + } else { + e.target.innerText = defaultText; + e.target.classList.remove( 'disabled' ); + } + }, +}; + +domReady( () => { + document.querySelectorAll( '.wpcom-marketing-tools-feature a' ).forEach( feature => { + feature.addEventListener( 'click', e => { + wpcomTrackEvent( e.target.dataset.event ); + if ( e.target.dataset.callback && e.target.dataset.callback in callbacks ) { + callbacks[ e.target.dataset.callback ]( e ); + } + } ); + } ); +} ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.php b/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.php new file mode 100644 index 0000000000000..d1cd8588f2244 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/marketing/marketing.php @@ -0,0 +1,218 @@ + Marketing menu. + */ +function wpcom_add_marketing_submenu() { + $hook_suffix = add_submenu_page( + 'tools.php', + __( 'Marketing', 'jetpack-mu-wpcom' ), + __( 'Marketing', 'jetpack-mu-wpcom' ), + 'manage_options', + 'wpcom-marketing-tools', + 'wpcom_display_marketing_tools_page', + 1 + ); + add_action( 'load-' . $hook_suffix, 'load_marketing_tools_page' ); +} +add_action( 'admin_menu', 'wpcom_add_marketing_submenu', 999999 ); + +/** + * Initializes the Marketing Tools page. + */ +function load_marketing_tools_page() { + add_action( 'admin_enqueue_scripts', 'enqueue_marketing_tools_assets' ); +} + +/** + * Enqueues the Marketing Tools assets. + */ +function enqueue_marketing_tools_assets() { + jetpack_mu_wpcom_enqueue_assets( 'marketing', array( 'js', 'css' ) ); + wp_add_inline_script( + 'jetpack-mu-wpcom-marketing', + 'const wpcomMarketing = ' . wp_json_encode( array( 'siteId' => get_wpcom_blog_id() ) ) . ';', + 'before' + ); +} + +/** + * Displays the WordPress Marketing Tools page. + */ +function wpcom_display_marketing_tools_page() { + $domain = wp_parse_url( home_url(), PHP_URL_HOST ); + $is_private = ( new Status() )->is_private_site(); + + $features = array( + array( + 'title' => __( 'Let our WordPress.com experts build your site!', 'jetpack-mu-wpcom' ), + 'description' => __( + "Hire our dedicated experts to build a handcrafted, personalized website. Share some details about what you're looking for, and we'll make it happen.", + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Get started', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/wordpress-logo.svg', __FILE__ ), + 'url' => 'https://wordpress.com/start/do-it-for-me/new-or-existing-site', + 'event' => 'calypso_marketing_tools_built_by_wp_button_click', + ), + array( + 'title' => __( 'Monetize your site', 'jetpack-mu-wpcom' ), + 'description' => __( + 'Accept payments or donations with our native payment blocks, limit content to paid subscribers only, opt into our ad network to earn revenue, and refer friends to WordPress.com for credits.', + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Start earning', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/earn.svg', __FILE__ ), + 'url' => 'https://wordpress.com/earn/' . $domain, + 'event' => 'calypso_marketing_tools_earn_button_click', + ), + array( + 'title' => __( 'Fiverr logo maker', 'jetpack-mu-wpcom' ), + 'description' => __( + 'Create a standout brand with a custom logo. Our partner makes it easy and quick to design a professional logo that leaves a lasting impression.', + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Make your brand', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/fiverr-logo.svg', __FILE__ ), + 'url' => 'https://wp.me/logo-maker/?utm_campaign=marketing_tab', + 'event' => 'calypso_marketing_tools_create_a_logo_button_click', + 'target' => '_blank', + ), + ); + + // Show the Facebook feature only between July-October 2025 (see pfUMqg-5a-p2). + $current_date = new DateTime(); + $current_year = (int) $current_date->format( 'Y' ); + $current_month = (int) $current_date->format( 'n' ); + if ( $current_year === 2025 && $current_month >= 7 && $current_month <= 10 ) { + $features[] = array( + 'title' => __( 'Want to connect with your audience on Facebook and Instagram?', 'jetpack-mu-wpcom' ), + 'description' => sprintf( + /* translators: %1$s - Name of the Business plan, %2$s - Name of Commerce plan. */ + __( + 'Discover an easy way to advertise your brand across Facebook and Instagram. Capture website actions to help you target audiences and measure results. Available on %1$s and %2$s plans.', + 'jetpack-mu-wpcom' + ), + Plans::get_plan_short_name( 'business-bundle' ), + Plans::get_plan_short_name( 'ecommerce-bundle' ) + ), + 'action' => __( 'Add Facebook for WordPress.com', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/facebook-logo.png', __FILE__ ), + 'url' => 'https://wordpress.com/plugins/official-facebook-pixel/' . $domain, + 'event' => 'calypso_marketing_tools_facebook_button_click', + ); + } + + if ( ( new Host() )->is_wpcom_simple() && ! $is_private && ! wpcom_activitypub_is_active() ) { + $features[] = array( + 'title' => __( 'Share your blog with a new audience', 'jetpack-mu-wpcom' ), + 'description' => __( + 'Connect your WordPress.com site to the social web. Let people follow your posts from platforms like Mastodon, Threads, and more—no extra work needed.', + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Join the open social web', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/activitypub-logo.svg', __FILE__ ), + 'url' => admin_url( 'options-general.php?page=activitypub' ), + 'event' => 'calypso_marketing_tools_activitypub_button_click', + 'callback' => 'enableActivityPub', + ); + } + + $features[] = array( + 'title' => __( 'Hire an SEO expert', 'jetpack-mu-wpcom' ), + 'description' => __( + 'In today‘s digital age, visibility is key. Hire an SEO expert to boost your online presence and capture valuable opportunities.', + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Talk to an SEO expert today', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/fiverr-logo.svg', __FILE__ ), + 'url' => 'https://wp.me/hire-seo-expert/?utm_source=marketing_tab', + 'event' => 'calypso_marketing_tools_hire_an_seo_expert_button_click', + 'target' => '_blank', + ); + + if ( ! $is_private ) { + $features[] = array( + 'title' => __( 'Share your blog posts with everyone', 'jetpack-mu-wpcom' ), + 'description' => __( + "Use your site's Jetpack Social tools to connect your site and your social media accounts, and share your new posts automatically. Connect to Facebook, LinkedIn, and more.", + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Start sharing', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/social-media-logos.svg', __FILE__ ), + 'url' => admin_url( 'admin.php?page=jetpack-social' ), + 'event' => 'calypso_marketing_tools_start_sharing_button_click', + ); + } + + $locale = Common\determine_iso_639_locale(); + if ( $locale === 'en' ) { + $features[] = array( + 'title' => __( 'Increase traffic to your WordPress.com site', 'jetpack-mu-wpcom' ), + 'description' => __( + 'Take our free introductory course about search engine optimization (SEO) and learn how to improve your site or blog for both search engines and humans.', + 'jetpack-mu-wpcom' + ), + 'action' => __( 'Register now', 'jetpack-mu-wpcom' ), + 'icon' => plugins_url( 'images/rocket.svg', __FILE__ ), + 'url' => 'https://wordpress.com/support/courses/seo/', + 'event' => 'calypso_marketing_tools_seo_course_button_click', + 'target' => '_blank', + ); + } + + ?> + +
+

+

+ +
+
+

+

+ + + + +
+
+ +
+
+ +
+ +
+ +

+

+ + + + +
+ +
+
+ { 'jetpack-global-styles-customizer-fonts': './src/features/jetpack-global-styles/customizer-fonts/index.js', 'mailerlite-subscriber-popup': './src/features/mailerlite/subscriber-popup.js', + marketing: [ + './src/features/marketing/marketing.js', + './src/features/marketing/marketing.scss', + ], 'newspack-blocks-blog-posts-editor': './src/features/newspack-blocks/blog-posts/editor.js', 'newspack-blocks-blog-posts-view': './src/features/newspack-blocks/blog-posts/view.js', 'newspack-blocks-carousel-editor': './src/features/newspack-blocks/carousel/editor.js',