From 33d72bde8cb87c5205617acca9c5cb9e26378935 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 31 Oct 2024 13:15:15 +0100
Subject: [PATCH 1/4] External Media / AI Image Generator: update button style

See #39934

Let's change the overall styles of the 2 buttons ("Select Image" and "Generate with AI"):

- the buttons should be 40px high, like in Core. See https://github.com/WordPress/gutenberg/issues/46741
- the buttons should use the secondary style variant by default, to match the "Insert from URL" button.
- the buttons should take the full width of the placeholder on mobile devices.
---
 .../jetpack/changelog/fix-external-media-button   |  4 ++++
 .../extensions/shared/external-media/editor.scss  | 15 +++++----------
 .../media-button/media-ai-button.js               |  3 ++-
 .../external-media/media-button/media-menu.js     |  5 ++---
 4 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/fix-external-media-button

diff --git a/projects/plugins/jetpack/changelog/fix-external-media-button b/projects/plugins/jetpack/changelog/fix-external-media-button
new file mode 100644
index 0000000000000..60f0ae8dd7805
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-external-media-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: compat
+
+External Media: ensure that the image block's external media picker button remains consistent with the other buttons in the image block.
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
index deaa53f64996f..0d6c1531a7786 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
+++ b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
@@ -144,7 +144,6 @@ $grid-size: 8px;
 	font-weight: 400;
 	line-height: 1.43;
 	color: var( --jp-gray-60 );
-	text-align: left;
 	margin: 0;
 }
 .jetpack-external-media-wrapper__jetpack_app_media-wrapper.has-no-image-uploaded {
@@ -543,33 +542,29 @@ $grid-size: 8px;
 }
 
 .jetpack-external-media-button-menu__dropdown {
-	width: 100%;
+	display: flex;
 
 	.jetpack-external-media-button-menu {
 		width: 100%;
 		flex-direction: row;
-		text-align: left;
 		padding-left: 12px;
 		padding-right: 12px;
-
-		.jetpack-external-media-button-menu__label {
-			flex-grow: 2;
-		}
 	}
 }
 
 // Set the wrapper as a flex container to allow displaying multiple buttons side by side.
 .jetpack-external-media-button-wrapper {
-	display: flex;
+	@media only screen and ( min-width: 783px ) {
+		display: flex;
+		gap: $grid-size * 2;
+	}
 }
 
 // Reset placeholder button margin.
 .components-placeholder__fieldset,
 .editor-post-featured-image {
 	.components-dropdown .jetpack-external-media-button-menu {
-		width: auto;
 		margin-bottom: 1em;
-
 		> svg {
 			display: none;
 		}
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
index b2421d0587c0b..765f2f77a63e5 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
@@ -6,7 +6,8 @@ function MediaAiButton( props ) {
 	const { setSelectedSource } = props;
 	return (
 		<Button
-			variant="tertiary"
+			__next40pxDefaultSize
+			variant="secondary"
 			className="jetpack-external-media-button-menu"
 			aria-haspopup="false"
 			onClick={ () => {
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
index c3793b4209f99..48c9e33ec1759 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
@@ -6,7 +6,6 @@ import MediaSources from './media-sources';
 function MediaButtonMenu( props ) {
 	const { mediaProps, open, setSelectedSource, isFeatured, isReplace, hasImage } = props;
 	const originalComponent = mediaProps.render;
-	let variant = 'tertiary';
 
 	if ( isReplace ) {
 		return (
@@ -30,7 +29,6 @@ function MediaButtonMenu( props ) {
 
 	if ( isFeatured ) {
 		label = __( 'Replace Image', 'jetpack' );
-		variant = 'secondary';
 	}
 
 	return (
@@ -50,7 +48,8 @@ function MediaButtonMenu( props ) {
 					}
 					return (
 						<Button
-							variant={ variant }
+							__next40pxDefaultSize
+							variant="secondary"
 							className="jetpack-external-media-button-menu"
 							aria-haspopup="true"
 							aria-expanded={ isOpen }

From 64dfc80409698edad197d346926bc5614aa6a861 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 31 Oct 2024 16:40:10 +0100
Subject: [PATCH 2/4] Ensure the buttons look good in narrow parent blocks

See https://github.com/Automattic/jetpack/pull/39985#issuecomment-2449807545
---
 .../jetpack/extensions/shared/external-media/editor.scss     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
index 0d6c1531a7786..cd00d80c46d81 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
+++ b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
@@ -557,6 +557,11 @@ $grid-size: 8px;
 	@media only screen and ( min-width: 783px ) {
 		display: flex;
 		gap: $grid-size * 2;
+
+		:where(.is-medium, .is-small) & {
+			display: block;
+			gap: 0;
+		}
 	}
 }
 

From 081a2f8dea6e36cbef7b7947379e643ff4e106d7 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Fri, 1 Nov 2024 11:36:27 +0100
Subject: [PATCH 3/4] Simplify styling of the main wrapper

The wrapper itself is still necessary unfortunately.

Co-authored-by: Filipe Varela <keoshi@keoshi.com>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../extensions/shared/external-media/editor.scss     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
index cd00d80c46d81..0c77e39a56568 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
+++ b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
@@ -552,24 +552,14 @@ $grid-size: 8px;
 	}
 }
 
-// Set the wrapper as a flex container to allow displaying multiple buttons side by side.
 .jetpack-external-media-button-wrapper {
-	@media only screen and ( min-width: 783px ) {
-		display: flex;
-		gap: $grid-size * 2;
-
-		:where(.is-medium, .is-small) & {
-			display: block;
-			gap: 0;
-		}
-	}
+	display: contents;
 }
 
 // Reset placeholder button margin.
 .components-placeholder__fieldset,
 .editor-post-featured-image {
 	.components-dropdown .jetpack-external-media-button-menu {
-		margin-bottom: 1em;
 		> svg {
 			display: none;
 		}

From 475b87b847cecc512195f0291778712f09dd4dd9 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Fri, 1 Nov 2024 13:37:03 +0100
Subject: [PATCH 4/4] Add logic to change button size based on wp & Gutenberg
 versions

The other buttons in the Image block were changed in this PR:
https://github.com/WordPress/gutenberg/pull/65361

This was released with Gutenberg 19.4, and will be included in WP version 6.7.

Let's consequently set our own buttons to match.
---
 .../jetpack/class.jetpack-gutenberg.php       | 65 +++++++++++++++----
 .../external-media/media-button/index.js      |  9 ++-
 .../media-button/media-ai-button.js           |  5 +-
 .../external-media/media-button/media-menu.js |  5 +-
 4 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/projects/plugins/jetpack/class.jetpack-gutenberg.php b/projects/plugins/jetpack/class.jetpack-gutenberg.php
index 59aff9e9f95a4..6d79a8c3e85ae 100644
--- a/projects/plugins/jetpack/class.jetpack-gutenberg.php
+++ b/projects/plugins/jetpack/class.jetpack-gutenberg.php
@@ -716,10 +716,10 @@ public static function enqueue_block_editor_assets() {
 		}
 
 		$initial_state = array(
-			'available_blocks' => self::get_availability(),
-			'blocks_variation' => $blocks_variation,
-			'modules'          => $modules,
-			'jetpack'          => array(
+			'available_blocks'    => self::get_availability(),
+			'blocks_variation'    => $blocks_variation,
+			'modules'             => $modules,
+			'jetpack'             => array(
 				'is_active'                     => Jetpack::is_connection_ready(),
 				'is_current_user_connected'     => $is_current_user_connected,
 				/** This filter is documented in class.jetpack-gutenberg.php */
@@ -743,15 +743,16 @@ public static function enqueue_block_editor_assets() {
 				 */
 				'republicize_enabled'           => apply_filters( 'jetpack_block_editor_republicize_feature', true ),
 			),
-			'siteFragment'     => $status->get_site_suffix(),
-			'adminUrl'         => esc_url( admin_url() ),
-			'tracksUserData'   => $user_data,
-			'wpcomBlogId'      => $blog_id,
-			'allowedMimeTypes' => wp_get_mime_types(),
-			'siteLocale'       => str_replace( '_', '-', get_locale() ),
-			'ai-assistant'     => $ai_assistant_state,
-			'screenBase'       => $screen_base,
-			'pluginBasePath'   => plugins_url( '', Constants::get_constant( 'JETPACK__PLUGIN_FILE' ) ),
+			'siteFragment'        => $status->get_site_suffix(),
+			'adminUrl'            => esc_url( admin_url() ),
+			'tracksUserData'      => $user_data,
+			'wpcomBlogId'         => $blog_id,
+			'allowedMimeTypes'    => wp_get_mime_types(),
+			'siteLocale'          => str_replace( '_', '-', get_locale() ),
+			'ai-assistant'        => $ai_assistant_state,
+			'screenBase'          => $screen_base,
+			'pluginBasePath'      => plugins_url( '', Constants::get_constant( 'JETPACK__PLUGIN_FILE' ) ),
+			'next40pxDefaultSize' => self::site_supports_next_default_size(),
 		);
 
 		if ( Jetpack::is_module_active( 'publicize' ) && function_exists( 'publicize_init' ) ) {
@@ -1292,6 +1293,44 @@ public static function display_deprecated_block_message( $block_content, $block
 
 		return $block_content;
 	}
+
+	/**
+	 * Check whether the environment supports the newer default size of elements, gradually introduced starting with WP 6.4.
+	 *
+	 * @since $$next-version$$
+	 *
+	 * @see https://make.wordpress.org/core/2023/10/16/editor-components-updates-in-wordpress-6-4/#improving-size-consistency-for-ui-components
+	 *
+	 * @to-do: Deprecate this method and the logic around it when Jetpack requires WordPress 6.7.
+	 *
+	 * @return bool
+	 */
+	public static function site_supports_next_default_size() {
+		/*
+		 * If running a local dev build of gutenberg,
+		 * let's assume it supports the newest changes included in Gutenberg.
+		 */
+		if ( defined( 'GUTENBERG_DEVELOPMENT_MODE' ) && GUTENBERG_DEVELOPMENT_MODE ) {
+			return true;
+		}
+
+		// Let's now check if the Gutenberg plugin is installed on the site.
+		if (
+			defined( 'GUTENBERG_VERSION' )
+			&& version_compare( GUTENBERG_VERSION, '19.4', '>=' )
+		) {
+			return true;
+		}
+
+		// Finally, let's check for the WordPress version.
+		global $wp_version;
+		if ( version_compare( $wp_version, '6.7', '>=' ) ) {
+			return true;
+		}
+
+		// Final fallback.
+		return false;
+	}
 }
 
 if ( ( new Host() )->is_woa_site() ) {
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/index.js b/projects/plugins/jetpack/extensions/shared/external-media/media-button/index.js
index be15c29bb2a44..f796c3b4bbe84 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-button/index.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-button/index.js
@@ -21,6 +21,9 @@ const isGeneralPurposeImageGeneratorBetaEnabled =
 		GENERAL_PURPOSE_IMAGE_GENERATOR_BETA_FLAG
 	]?.available === true;
 
+// to-do: remove when Jetpack requires WordPress 6.7.
+const hasLargeButtons = window?.Jetpack_Editor_Initial_State?.next40pxDefaultSize;
+
 function MediaButton( props ) {
 	const { name } = useBlockEditContext();
 	const { mediaProps } = props;
@@ -56,9 +59,13 @@ function MediaButton( props ) {
 				isReplace={ isReplaceMenu( mediaProps ) }
 				isFeatured={ isFeatured }
 				hasImage={ mediaProps.value > 0 }
+				hasLargeButtons={ hasLargeButtons }
 			/>
 			{ isGeneralPurposeImageGeneratorBetaEnabled && ! isFeatured && hasAiButtonSupport && (
-				<MediaAiButton setSelectedSource={ setSelectedSource } />
+				<MediaAiButton
+					setSelectedSource={ setSelectedSource }
+					hasLargeButtons={ hasLargeButtons }
+				/>
 			) }
 
 			{ ExternalLibrary && <ExternalLibrary { ...mediaProps } onClose={ closeLibrary } /> }
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
index 765f2f77a63e5..529b8c2a91275 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-ai-button.js
@@ -3,10 +3,11 @@ import { __ } from '@wordpress/i18n';
 import { SOURCE_JETPACK_AI_GENERAL_PURPOSE_IMAGE_FOR_BLOCK } from '../constants';
 
 function MediaAiButton( props ) {
-	const { setSelectedSource } = props;
+	const { setSelectedSource, hasLargeButtons } = props;
+
 	return (
 		<Button
-			__next40pxDefaultSize
+			__next40pxDefaultSize={ hasLargeButtons }
 			variant="secondary"
 			className="jetpack-external-media-button-menu"
 			aria-haspopup="false"
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
index 48c9e33ec1759..d70335c85dd8b 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js
@@ -4,7 +4,8 @@ import { Icon, media } from '@wordpress/icons';
 import MediaSources from './media-sources';
 
 function MediaButtonMenu( props ) {
-	const { mediaProps, open, setSelectedSource, isFeatured, isReplace, hasImage } = props;
+	const { mediaProps, open, setSelectedSource, isFeatured, isReplace, hasImage, hasLargeButtons } =
+		props;
 	const originalComponent = mediaProps.render;
 
 	if ( isReplace ) {
@@ -48,7 +49,7 @@ function MediaButtonMenu( props ) {
 					}
 					return (
 						<Button
-							__next40pxDefaultSize
+							__next40pxDefaultSize={ hasLargeButtons }
 							variant="secondary"
 							className="jetpack-external-media-button-menu"
 							aria-haspopup="true"