External Media / AI Image Generator: update button style (#39985)

* 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 WordPress/gutenberg#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. * Ensure the buttons look good in narrow parent blocks See #39985 (comment) * 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> * Add logic to change button size based on wp & Gutenberg versions The other buttons in the Image block were changed in this PR: WordPress/gutenberg#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. --------- Co-authored-by: Filipe Varela <keoshi@keoshi.com> Co-authored-by: jasmussen <joen@git.wordpress.org>
Automattic · Nov 4, 2024 · 746d1fc · 746d1fc
1 parent 0e8842a
commit 746d1fc
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 32 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-external-media-button 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/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/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,24 @@ $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;
+	display: contents;
 }
 
 // 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/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
@@ -3,10 +3,12 @@ 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
-			variant="tertiary"
+			__next40pxDefaultSize={ hasLargeButtons }
+			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
@@ -4,9 +4,9 @@ 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;
-	let variant = 'tertiary';
 
 	if ( isReplace ) {
 		return (
@@ -30,7 +30,6 @@ function MediaButtonMenu( props ) {
 
 	if ( isFeatured ) {
 		label = __( 'Replace Image', 'jetpack' );
-		variant = 'secondary';
 	}
 
 	return (
@@ -50,7 +49,8 @@ function MediaButtonMenu( props ) {
 					}
 					return (
 						<Button
-							variant={ variant }
+							__next40pxDefaultSize={ hasLargeButtons }
+							variant="secondary"
 							className="jetpack-external-media-button-menu"
 							aria-haspopup="true"
 							aria-expanded={ isOpen }