Merge branch 'trunk' into update/load-relevant-theme-compat-classic-t…

…heme-helper

.github/workflows/update-phan-stubs.yml

@@ -63,7 +63,7 @@ jobs:
           git checkout -b update/phan-custom-stubs
           git commit -am 'phan: Update custom stubs'
           git push origin HEAD
-          gh pr create --title 'phan: Update custom stubs' --body 'This is an automatic update generated by a GitHub Action. If closed it will be recreated the next time the action runs.' --label '[Pri] Normal' --label '[Type] Janitorial' --label '[Status] Needs Review'
+          gh pr create --title 'phan: Update custom stubs' --body 'This is an automatic update generated by a GitHub Action. If closed it will be recreated the next time the action runs.' --label '[Pri] Normal' --label '[Type] Janitorial' --label '[Status] Needs Review' --reviewer Automattic/jetpack-garage
 
       - name: Update existing branch
         if: steps.changes.outputs.needed == 'true' && steps.changes.outputs.has-branch == 'true'

.phan/stubs/akismet-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from Akismet 5.3.5
+ * Stubs automatically generated from Akismet 5.3.6
  * using the definition file `tools/stubs/akismet-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

.phan/stubs/gutenberg-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from Gutenberg 20.1.0
+ * Stubs automatically generated from Gutenberg 20.2.0
  * using the definition file `tools/stubs/gutenberg-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

.phan/stubs/woocommerce-internal-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from WooCommerce 9.7.0-dev
+ * Stubs automatically generated from WooCommerce 9.6.1
  * using the definition file `tools/stubs/woocommerce-internal-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

.phan/stubs/woocommerce-payments-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from WooPayments 8.7.0
+ * Stubs automatically generated from WooPayments 8.9.0
  * using the definition file `tools/stubs/woocommerce-payments-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

projects/packages/classic-theme-helper/changelog/update-broken-phpdoc

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Updated a comment, not changing any logic.
+
+

projects/packages/classic-theme-helper/src/social-menu.php

@@ -23,17 +23,17 @@ function jetpack_social_menu_init() {
 			return;
 		}
 
-		/*
-		* Social Menu description.
-		*
-		* Rename the social menu description.
-		*
-		* @module theme-tools
-		*
-		* @since 3.9.0
-		*
-		* @param string $social_menu_description Social Menu description
-		*/
+		/**
+		 * Social Menu description.
+		 *
+		 * Rename the social menu description.
+		 *
+		 * @module theme-tools
+		 *
+		 * @since 3.9.0
+		 *
+		 * @param string $social_menu_description Social Menu description
+		 */
 		$social_menu_description = apply_filters( 'jetpack_social_menu_description', __( 'Social Menu', 'jetpack-classic-theme-helper' ) );
 
 		// Register a new menu location

projects/packages/external-media/changelog/feat-external-media-import-button

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+External Media: Add Import button in Media Library

projects/packages/external-media/changelog/feat-external-media-track-events

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+External Media: Add track events to the Import page and modal

projects/packages/external-media/changelog/media-library-tracks-2

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Media Library: add track event to the Import Media button

projects/packages/external-media/changelog/media-tracks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Media Library: add track events for upload from URL feature

projects/packages/external-media/src/features/admin/external-media-import-button.js

@@ -0,0 +1,29 @@
+import jetpackAnalytics from '@automattic/jetpack-analytics';
+import { __ } from '@wordpress/i18n';
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	const addNewButton = document.querySelector( 'a.page-title-action' );
+	if ( addNewButton ) {
+		const buttonContainer = document.createElement( 'div' );
+		buttonContainer.className = 'wpcom-media-library-action-buttons';
+
+		const importButton = document.createElement( 'a' );
+		importButton.className = 'button';
+		importButton.role = 'button';
+		importButton.innerHTML = __( 'Import Media', 'jetpack-external-media' );
+		importButton.href = window.JETPACK_EXTERNAL_MEDIA_IMPORT_BUTTON?.href;
+		importButton.onclick = function () {
+			jetpackAnalytics.tracks.recordEvent( 'jetpack_external_media_import_media_button_click', {
+				page: 'media-library',
+			} );
+		};
+
+		const parentNode = addNewButton.parentNode;
+		const nextSibling = addNewButton.nextSibling;
+
+		buttonContainer.appendChild( addNewButton );
+		buttonContainer.appendChild( importButton );
+
+		parentNode.insertBefore( buttonContainer, nextSibling );
+	}
+} );

projects/packages/external-media/src/features/admin/external-media-import-button.scss

@@ -0,0 +1,12 @@
+.wpcom-media-library-action-buttons {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 4px;
+
+	> a {
+		position: relative;
+		top: -3px;
+		margin-left: 0;
+		vertical-align: baseline;
+	}
+}

projects/packages/external-media/src/features/admin/external-media-import.js

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
@@ -22,6 +23,7 @@ const Notice = ( { message, onDismiss } ) => (
 const JetpackExternalMediaImport = () => {
 	const [ selectedSource, setSelectedSource ] = useState( null );
 	const [ noticeMessage, setNoticeMessage ] = useState( '' );
+	const { tracks } = useAnalytics();
 	const ExternalLibrary = getExternalLibrary( selectedSource );
 
 	const selectButtonText = ( selectedImages, isCopying ) => {
@@ -77,6 +79,9 @@ const JetpackExternalMediaImport = () => {
 			const slug = event.target.dataset.slug;
 			if ( slug ) {
 				setSelectedSource( slug );
+				tracks.recordEvent( 'jetpack_external_media_import_media_page_import_click', {
+					media_source: slug,
+				} );
 			}
 		};
 
@@ -89,7 +94,7 @@ const JetpackExternalMediaImport = () => {
 				element.removeEventListener( 'click', handleClick );
 			}
 		};
-	}, [] );
+	}, [ tracks ] );
 
 	return (
 		<>

projects/packages/external-media/src/features/admin/external-media-import.php

@@ -47,10 +47,39 @@ function add_jetpack_external_media_import_page() {
 		__NAMESPACE__ . '\render_jetpack_external_media_import_page'
 	);
 
+	add_action( 'load-upload.php', __NAMESPACE__ . '\enqueue_jetpack_external_media_import_button' );
 	add_action( "load-$external_media_import_page_hook", __NAMESPACE__ . '\enqueue_jetpack_external_media_import_page' );
 }
 add_action( 'admin_menu', __NAMESPACE__ . '\add_jetpack_external_media_import_page' );
 
+/**
+ * Enqueue the assets of the Jetpack external media import button.
+ */
+function enqueue_jetpack_external_media_import_button() {
+	$assets_base_path = 'build/';
+	$asset_name       = 'jetpack-external-media-import-button';
+
+	Assets::register_script(
+		$asset_name,
+		$assets_base_path . "$asset_name/$asset_name.js",
+		External_Media::BASE_FILE,
+		array(
+			'in_footer'  => true,
+			'textdomain' => 'jetpack-external-media',
+			'css_path'   => $assets_base_path . "$asset_name/$asset_name.css",
+		)
+	);
+
+	Assets::enqueue_script( $asset_name );
+	wp_localize_script(
+		$asset_name,
+		'JETPACK_EXTERNAL_MEDIA_IMPORT_BUTTON',
+		array(
+			'href' => admin_url( 'upload.php?page=jetpack_external_media_import_page&untangling-media=true' ),
+		)
+	);
+}
+
 /**
  * Enqueue the assets of the Jetpack external media page.
  */

projects/packages/external-media/src/shared/media-browser/index.js

@@ -1,9 +1,12 @@
-import { Button, Spinner, Composite } from '@wordpress/components';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Spinner, Composite } from '@wordpress/components';
 import { useCallback, useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
+import MediaBrowserSelectButton from './media-browser-select-button';
 import MediaItem from './media-item';
+import usePageSource from './use-page-source';
 import './style.scss';
 
 const MAX_SELECTED = 10;
@@ -13,6 +16,7 @@ const MAX_SELECTED = 10;
  *
  * @param {object}   props                  - The component props
  * @param {object[]} props.media            - The list of media
+ * @param {string}   props.mediaSource      - The source of media
  * @param {boolean}  props.isCopying        - Whether the media browser is copying the media
  * @param {boolean}  props.isLoading        - Whether the media browser is loading
  * @param {boolean}  props.imageOnly        - Whether to skip non-media items
@@ -22,12 +26,13 @@ const MAX_SELECTED = 10;
  * @param {Function} props.setPath          - To set the path for the folder item
  * @param {Function} props.nextPage         - To get the next path
  * @param {Function} props.onCopy           - To handle the copy
- * @param {string}   props.selectButtonText - The text of the selection button
+ * @param {Function} props.selectButtonText - To get the select button text
  * @param {boolean}  props.shouldProxyImg   - Whether to use the proxy for the media URL
  * @return {React.ReactElement} - JSX element
  */
 function MediaBrowser( {
 	media,
+	mediaSource,
 	isCopying,
 	isLoading,
 	imageOnly,
@@ -42,6 +47,8 @@ function MediaBrowser( {
 } ) {
 	const [ selected, setSelected ] = useState( [] );
 	const gridEl = useRef( null );
+	const { tracks } = useAnalytics();
+	const pageSource = usePageSource();
 
 	const select = useCallback(
 		newlySelected => {
@@ -65,45 +72,29 @@ function MediaBrowser( {
 	);
 
 	const onCopyAndInsert = useCallback( () => {
+		tracks.recordEvent( 'jetpack_external_media_modal_submit', {
+			page: pageSource,
+			media_source: mediaSource,
+			media_count: selected.length,
+			multiple: !! multiple,
+		} );
+
 		onCopy( selected );
-	}, [ selected, onCopy ] );
+	}, [ tracks, pageSource, mediaSource, selected, multiple, onCopy ] );
 
 	const hasMediaItems = media.filter( item => item.type !== 'folder' ).length > 0;
-	const classes = clsx( {
-		'jetpack-external-media-browser__media': true,
-		'jetpack-external-media-browser__media__loading': isLoading,
-	} );
-	const wrapper = clsx( {
-		'jetpack-external-media-browser': true,
-		[ className ]: true,
-	} );
-
-	// Using _event to avoid eslint errors. Can change to event if it's in use again.
-	const handleMediaItemClick = ( _event, { item } ) => {
-		select( item );
-	};
 
-	const SelectButton = selectProps => {
-		const disabled = selected.length === 0 || isCopying;
+	const getSelectButtonLabel = () => {
 		const defaultLabel = isCopying
 			? __( 'Inserting…', 'jetpack-external-media' )
 			: __( 'Select', 'jetpack-external-media', /* dummy arg to avoid bad minification */ 0 );
-		const label = selectProps?.labelText
-			? selectProps?.labelText( selected.length, isCopying )
-			: defaultLabel;
-
-		return (
-			<div className="jetpack-external-media-browser__media__toolbar">
-				<Button
-					variant="primary"
-					isBusy={ isCopying }
-					disabled={ disabled }
-					onClick={ onCopyAndInsert }
-				>
-					{ label }
-				</Button>
-			</div>
-		);
+
+		return selectButtonText ? selectButtonText( selected.length, isCopying ) : defaultLabel;
+	};
+
+	// Using _event to avoid eslint errors. Can change to event if it's in use again.
+	const handleMediaItemClick = ( _event, { item } ) => {
+		select( item );
 	};
 
 	// Infinite scroll
@@ -126,11 +117,19 @@ function MediaBrowser( {
 	}, [ pageHandle, isLoading, gridEl ] ); // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
-		<div className={ wrapper }>
+		<div
+			className={ clsx( {
+				'jetpack-external-media-browser': true,
+				[ className ]: true,
+			} ) }
+		>
 			<Composite
 				role="listbox"
 				ref={ gridEl }
-				className={ classes }
+				className={ clsx( {
+					'jetpack-external-media-browser__media': true,
+					'jetpack-external-media-browser__media__loading': isLoading,
+				} ) }
 				aria-label={ __( 'Media list', 'jetpack-external-media' ) }
 				render={ <ul /> }
 			>
@@ -161,7 +160,14 @@ function MediaBrowser( {
 				</div>
 			) }
 
-			{ hasMediaItems && <SelectButton labelText={ selectButtonText } /> }
+			{ hasMediaItems && (
+				<MediaBrowserSelectButton
+					label={ getSelectButtonLabel() }
+					isLoading={ isCopying }
+					disabled={ selected.length === 0 || isCopying }
+					onClick={ onCopyAndInsert }
+				/>
+			) }
 		</div>
 	);
 }

projects/packages/external-media/src/shared/media-browser/media-browser-select-button.js

@@ -0,0 +1,24 @@
+import { Button } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * MediaBrowserSelectButton component
+ *
+ * @param {object}   props           - The component props
+ * @param {string}   props.label     - The label of the button
+ * @param {boolean}  props.isLoading - Whether the button is loading
+ * @param {boolean}  props.disabled  - Whether the button is disabled
+ * @param {Function} props.onClick   - To handle the click
+ * @return {React.ReactElement} - JSX element
+ */
+const MediaBrowserSelectButton = ( { label, isLoading, disabled, onClick } ) => {
+	return (
+		<div className="jetpack-external-media-browser__media__toolbar">
+			<Button variant="primary" isBusy={ isLoading } disabled={ disabled } onClick={ onClick }>
+				{ label }
+			</Button>
+		</div>
+	);
+};
+
+export default MediaBrowserSelectButton;

projects/packages/external-media/src/shared/media-browser/use-page-source.js

@@ -0,0 +1,12 @@
+import { useSelect } from '@wordpress/data';
+
+const usePageSource = () => {
+	const isEditor = useSelect( select => !! select( 'core/editor' ), [] );
+
+	if ( isEditor ) {
+		return 'editor';
+	}
+	return 'media-library';
+};
+
+export default usePageSource;