Changeset 53777

Timestamp:

07/25/2022 06:09:26 PM (2 years ago)

Author:

audrasjb

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-admin/includes/media.php (modified) (1 diff)
• wp-includes/media-template.php (modified) (2 diffs)

trunk/src/wp-admin/css/common.css

@@ -950 +950 @@
 }
 
+.word-wrap-break-word,
 .misc-pub-filename {
     word-wrap: break-word;

trunk/src/wp-admin/includes/media.php

@@ -3470 +3470 @@
     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 ) ); ?>">

trunk/src/wp-includes/media-template.php

@@ -439 +439 @@
 
                     <# 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>
                     <# } #>
                 <# } #>
@@ -662 +664 @@
 
                     <# 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>
                     <# } #>