Background image: support setting the image from a URL

packages/block-editor/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   `BackgroundImageControl`: Support setting the background image from a URL, through the URL field in the media replace popover ([#82230](https://github.com/WordPress/gutenberg/pull/82230)).
+
 ### Internal
 
 -   Remove unused dependencies `@wordpress/escape-html`, `@wordpress/wordcount` and `deepmerge` ([#82103](https://github.com/WordPress/gutenberg/pull/82103)).

packages/block-editor/src/components/background-image-control/index.jsx

@@ -360,6 +360,25 @@ function BackgroundImageControls( {
 		focusToggleButton( containerRef );
 	};
 
+	/*
+	 * Sets an image entered as a direct URL. There is no attachment `id`:
+	 * `source: 'url'` records that the image is externally hosted.
+	 */
+	const onSelectURL = ( newURL ) => {
+		if ( ! newURL || newURL === url ) {
+			return;
+		}
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				...style?.background,
+				backgroundImage: {
+					url: newURL,
+					source: 'url',
+				},
+			} )
+		);
+	};
+
 	// Drag and drop callback, restricting image to one.
 	const onFilesDrop = ( filesList ) => {
 		getSettings().mediaUpload( {
@@ -382,17 +401,24 @@ function BackgroundImageControls( {
 			} )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
+	// theme.json accepts a plain string for `backgroundImage`; the editor
+	// stores an object with a `url`. Resolve either for the URL field.
+	const currentURL =
+		typeof style?.background?.backgroundImage === 'string'
+			? style.background.backgroundImage
+			: url;
 	const imgLabel = title || getFilename( url ) || __( 'Image' );
 
 	return (
 		<div className="block-editor-global-styles-background-panel__image-tools-panel-item">
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
-				mediaURL={ url }
+				mediaURL={ currentURL }
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 				accept="image/*"
 				onSelect={ onSelectMedia }
+				onSelectURL={ onSelectURL }
 				popoverProps={ {
 					className: clsx( {
 						'block-editor-global-styles-background-panel__media-replace-popover':

packages/block-editor/src/components/background-image-control/style.scss

@@ -170,11 +170,13 @@
 
 .block-editor-global-styles-background-panel__media-replace-popover {
 	.components-popover__content {
-		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
-		width: 226px;
+		// Sized by the widest child: the URL field (LinkControl min-width),
+		// with the menu items stretching to match.
+		width: auto;
 	}
 
-	.components-button {
+	// Scoped to menu items so the URL field's buttons keep their own padding.
+	.components-menu-item__button.components-button {
 		padding: 0 $grid-unit-10;
 	}