Merge remote-tracking branch 'origin/trunk' into update/seo-assistant…

…-requests

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;

projects/packages/external-media/src/shared/sources/google-photos/google-photos-media.js

@@ -11,6 +11,7 @@ import {
 	DATE_RANGE_ANY,
 } from '../../constants';
 import MediaBrowser from '../../media-browser';
+import { MediaSource } from '../../media-service/types';
 import { getExternalMediaApiUrl } from '../api';
 import Breadcrumbs from './breadcrumbs';
 import GoogleFilterOption from './filter-option';
@@ -183,6 +184,7 @@ function GooglePhotosMedia( props ) {
 				className="jetpack-external-media-browser__google"
 				key={ listUrl }
 				media={ media }
+				mediaSource={ MediaSource.GooglePhotos }
 				imageOnly={ imageOnly }
 				isCopying={ isCopying }
 				isLoading={ isLoading }

projects/packages/external-media/src/shared/sources/jetpack-app-media/index.js

@@ -136,6 +136,7 @@ function JetpackAppMedia( props ) {
 					key={ 'jetpack-app-media' }
 					className="jetpack-external-media-browser__jetpack_app_media_browser"
 					media={ media }
+					mediaSource={ MediaSource.JetpackAppMedia }
 					isCopying={ isCopying }
 					isLoading={ false }
 					nextPage={ getNextPage }

projects/packages/external-media/src/shared/sources/openverse/index.js

@@ -67,6 +67,7 @@ function OpenverseMedia( props ) {
 			<MediaBrowser
 				className="jetpack-external-media-browser__openverse"
 				media={ media }
+				mediaSource={ MediaSource.Openverse }
 				isCopying={ isCopying }
 				isLoading={ isLoading }
 				nextPage={ () => getNextPage( searchQuery ) }

projects/packages/external-media/src/shared/sources/pexels/index.js

@@ -68,6 +68,7 @@ function PexelsMedia( props ) {
 			<MediaBrowser
 				className="jetpack-external-media-browser__pexels"
 				media={ media }
+				mediaSource={ MediaSource.Pexels }
 				isCopying={ isCopying }
 				isLoading={ isLoading }
 				nextPage={ () => getNextPage( searchQuery ) }

projects/packages/external-media/webpack.config.js

@@ -5,6 +5,10 @@ module.exports = [
 	{
 		entry: {
 			'jetpack-external-media-editor': './src/features/editor/index.js',
+			'jetpack-external-media-import-button': [
+				'./src/features/admin/external-media-import-button.js',
+				'./src/features/admin/external-media-import-button.scss',
+			],
 			'jetpack-external-media-import-page': './src/features/admin/external-media-import.js',
 		},
 		mode: jetpackWebpackConfig.mode,

projects/packages/forms/changelog/fix-25025-form-seperator

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Improves the styling options of the separator block when placed inside the form block

projects/packages/forms/changelog/fix-date-validation-bug

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: fixes the date format input if multiple date pickers are used with different date formats.

projects/packages/forms/changelog/fix-form-submit-miulti-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: Add support for having multiple forms accross paginated pages

projects/packages/forms/changelog/fix-invalid-field-ids

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: Fix invalid html IDs.