Improve error message and styles.

Props @michelleweber @melchoyce
See
#27 (comment)
544

wp-admin/css/widgets/media-widgets.css

@@ -1,4 +1,3 @@
-
 .media-widget-control.selected .not-selected,
 .media-widget-control:not(.selected) .selected {
 	display: none;
@@ -30,6 +29,9 @@
 .media-widget-control .media-widget-preview {
 	text-align: center;
 }
+.media-widget-control .media-widget-preview .notice {
+	text-align: initial;
+}
 .media-widget-control .media-widget-preview img {
 	max-width: 100%;
 }

wp-includes/widgets/class-wp-widget-image.php

@@ -33,7 +33,10 @@ public function __construct() {
 			'edit_media' => __( 'Edit Image' ),
 			'change_media' => __( 'Change Image' ),
 			'select_media' => __( 'Select Image' ),
-			'error' => __( 'Image could not be loaded. Please verify it was not deleted.' ),
+			'error' => sprintf(
+				__( 'We can&#8217;t find that image. Check your <a href="%s">media library</a> and make sure it wasn&#8217;t deleted.' ),
+				esc_url( admin_url( 'upload.php' ) )
+			),
 		) );
 	}
 
@@ -269,7 +272,7 @@ public function render_control_template_scripts() {
 				<img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
 			<# } else if ( data.attachment.error ) { #>
 				<div class="notice notice-error notice-alt">
-					<p><?php echo esc_html( $this->l10n['error'] ); ?></p>
+					<p><?php echo $this->l10n['error']; ?></p>
 				</div>
 			<# } #>
 		</script>

wp-includes/widgets/class-wp-widget-media.php

@@ -58,6 +58,10 @@ public function __construct( $id_base, $name, $widget_options = array(), $contro
 			'change_media' => __( 'Change Media' ),
 			'select_media' => __( 'Select Media' ),
 			'add_to_widget' => __( 'Add to Widget' ),
+			'error' => sprintf(
+				__( 'We can&#8217;t find that file. Check your <a href="%s">media library</a> and make sure it wasn&#8217;t deleted.' ),
+				esc_url( admin_url( 'upload.php' ) )
+			),
 		);
 		$this->l10n = array_merge( $l10n_defaults, array_filter( $this->l10n ) );