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/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/editor.scss b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss
index deaa53f64996f..0c77e39a56568 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,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
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 && (
-
+
) }
{ ExternalLibrary && }
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..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,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 (