From 8ad85f99f19525e5848565e409f0446fc7275f6a Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:47:16 +1100
Subject: [PATCH] Fix uploading background images in stylebook view. (#68159)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 package-lock.json                              |  1 +
 packages/edit-site/package.json                |  1 +
 .../src/components/style-book/index.js         | 18 ++++++++++++++++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index edfa7bfa80024f..bd901baca24a96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51237,6 +51237,7 @@
 				"@wordpress/icons": "*",
 				"@wordpress/keyboard-shortcuts": "*",
 				"@wordpress/keycodes": "*",
+				"@wordpress/media-utils": "5.14.0",
 				"@wordpress/notices": "*",
 				"@wordpress/patterns": "*",
 				"@wordpress/plugins": "*",
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 51045be503de31..299f0a67da9b7a 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -56,6 +56,7 @@
 		"@wordpress/icons": "*",
 		"@wordpress/keyboard-shortcuts": "*",
 		"@wordpress/keycodes": "*",
+		"@wordpress/media-utils": "5.14.0",
 		"@wordpress/notices": "*",
 		"@wordpress/patterns": "*",
 		"@wordpress/plugins": "*",
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 4c93d2ed8db895..28a693e76958d7 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -35,6 +35,8 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { uploadMedia } from '@wordpress/media-utils';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -361,10 +363,22 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		[]
 	);
 
+	const canUserUploadMedia = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', {
+				kind: 'root',
+				name: 'media',
+			} ),
+		[]
+	);
+
 	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
 	useEffect( () => {
-		dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
-	}, [ siteEditorSettings ] );
+		dispatch( blockEditorStore ).updateSettings( {
+			...siteEditorSettings,
+			mediaUpload: canUserUploadMedia ? uploadMedia : undefined,
+		} );
+	}, [ siteEditorSettings, canUserUploadMedia ] );
 
 	const [ section, onChangeSection ] = useSection();