From e5bd74cad8343b95ccf735451f0e6c6919ee697c Mon Sep 17 00:00:00 2001
From: Jb Audras <audrasjb@git.wordpress.org>
Date: Mon, 25 Jul 2022 18:09:26 +0000
Subject: [PATCH] Media: Prevent URLs from overflowing their container in the
 media editor.

This changeset also introduces the `.word-wrap-break-word` class which can be used to apply `word-wrap: break-word` to admin elements when needed.

Props mitogh, costdev, kapilpaul, alamgircsebd, sabernhardt, anantajitjg, afercia, circlecube, SergeyBiryukov, rafiahmedd, audrasjb.
Fixes #55393.


git-svn-id: https://develop.svn.wordpress.org/trunk@53777 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css        |  1 +
 src/wp-admin/includes/media.php    |  2 +-
 src/wp-includes/media-template.php | 12 ++++++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 64c7519900..5f9022ebf5 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -949,6 +949,7 @@ a#remove-post-thumbnail:hover,
 	padding: 6px 10px 8px;
 }
 
+.word-wrap-break-word,
 .misc-pub-filename {
 	word-wrap: break-word;
 }
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
index 8f699220c7..dd58fb0089 100644
--- a/src/wp-admin/includes/media.php
+++ b/src/wp-admin/includes/media.php
@@ -3469,7 +3469,7 @@ function attachment_submitbox_metadata() {
 
 	if ( ! empty( $meta['original_image'] ) ) {
 		?>
-		<div class="misc-pub-section misc-pub-original-image">
+		<div class="misc-pub-section misc-pub-original-image word-wrap-break-word">
 			<?php _e( 'Original image:' ); ?>
 			<a href="<?php echo esc_url( wp_get_original_image_url( $attachment_id ) ); ?>">
 				<?php echo esc_html( wp_basename( wp_get_original_image_path( $attachment_id ) ) ); ?>
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 6aac196df9..f664ec7253 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -438,8 +438,10 @@ function wp_print_media_templates() {
 					<# } #>
 
 					<# if ( data.originalImageURL && data.originalImageName ) { #>
-						<?php _e( 'Original image:' ); ?>
-						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						<div class="word-wrap-break-word">
+							<?php _e( 'Original image:' ); ?>
+							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						</div>
 					<# } #>
 				<# } #>
 
@@ -661,8 +663,10 @@ function wp_print_media_templates() {
 					<# } #>
 
 					<# if ( data.originalImageURL && data.originalImageName ) { #>
-						<?php _e( 'Original image:' ); ?>
-						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						<div class="word-wrap-break-word">
+							<?php _e( 'Original image:' ); ?>
+							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						</div>
 					<# } #>
 
 					<# if ( data.can.save && data.sizes ) { #>