From 3a9893b7cc41fa8a195e5d22979ffec9f64b9dfa Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Wed, 14 Jun 2023 20:40:42 +0000 Subject: [PATCH] Media: Update admin image editor design. Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values. A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework. Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson. Fixes #50523. git-svn-id: https://develop.svn.wordpress.org/trunk@55919 602fd350-edb4-49c9-b593-d223f7449a82 --- .env | 2 +- src/js/_enqueues/lib/image-edit.js | 230 ++++++++- .../imgareaselect/jquery.imgareaselect.js | 2 +- src/wp-admin/css/common.css | 2 - src/wp-admin/css/media.css | 145 +++--- src/wp-admin/includes/image-edit.php | 478 +++++++++--------- src/wp-includes/css/media-views.css | 44 +- 7 files changed, 554 insertions(+), 349 deletions(-) diff --git a/.env b/.env index 63a8169f64..a1e741cd4e 100644 --- a/.env +++ b/.env @@ -12,7 +12,7 @@ LOCAL_PORT=8889 # Where to run WordPress from. Valid options are 'src' and 'build'. -LOCAL_DIR=src +LOCAL_DIR=build # The PHP version to use. Valid options are 'latest', and '{version}-fpm'. LOCAL_PHP=latest diff --git a/src/js/_enqueues/lib/image-edit.js b/src/js/_enqueues/lib/image-edit.js index 3695a35303..167ee0f17b 100644 --- a/src/js/_enqueues/lib/image-edit.js +++ b/src/js/_enqueues/lib/image-edit.js @@ -22,25 +22,61 @@ _view : false, /** - * Handle crop tool clicks. + * Enable crop tool. */ - handleCropToolClick: function( postid, nonce, cropButton ) { + toggleCropTool: function( postid, nonce, cropButton ) { var img = $( '#image-preview-' + postid ), selection = this.iasapi.getSelection(); - // Ensure selection is available, otherwise reset to full image. - if ( isNaN( selection.x1 ) ) { - this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } ); - selection = this.iasapi.getSelection(); - } - - // If we don't already have a selection, select the entire image. - if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) { - this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true ); - this.iasapi.setOptions( { show: true } ); - this.iasapi.update(); + imageEdit.toggleControls( cropButton ); + var $el = $( cropButton ); + var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false'; + // Crop tools have been closed. + if ( 'false' === state ) { + // Cancel selection, but do not unset inputs. + this.iasapi.cancelSelection(); + imageEdit.setDisabled($('.imgedit-crop-clear'), 0); } else { + imageEdit.setDisabled($('.imgedit-crop-clear'), 1); + // Get values from inputs to restore previous selection. + var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0; + var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0; + var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth(); + var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight(); + // Ensure selection is available, otherwise reset to full image. + if ( isNaN( selection.x1 ) ) { + this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } ); + selection = this.iasapi.getSelection(); + } + // If we don't already have a selection, select the entire image. + if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) { + this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true ); + this.iasapi.setOptions( { show: true } ); + this.iasapi.update(); + } else { + this.iasapi.setSelection( startX, startY, width, height, true ); + this.iasapi.setOptions( { show: true } ); + this.iasapi.update(); + } + } + }, + + /** + * Handle crop tool clicks. + */ + handleCropToolClick: function( postid, nonce, cropButton ) { + + if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) { + this.iasapi.cancelSelection(); + imageEdit.setDisabled($('.imgedit-crop-apply'), 0); + + $('#imgedit-sel-width-' + postid).val(''); + $('#imgedit-sel-height-' + postid).val(''); + $('#imgedit-start-x-' + postid).val('0'); + $('#imgedit-start-y-' + postid).val('0'); + $('#imgedit-selection-' + postid).val(''); + } else { // Otherwise, perform the crop. imageEdit.crop( postid, nonce , cropButton ); } @@ -122,6 +158,17 @@ t.postid = postid; $('#imgedit-response-' + postid).empty(); + $('#imgedit-panel-' + postid).on( 'keypress', function(e) { + var nonce = $( '#imgedit-nonce-' + postid ).val(); + if ( e.which === 26 && e.ctrlKey ) { + imageEdit.undo( postid, nonce ); + } + + if ( e.which === 25 && e.ctrlKey ) { + imageEdit.redo( postid, nonce ); + } + }); + $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) { var k = e.keyCode; @@ -169,6 +216,93 @@ } }, + /** + * Shows or hides image menu popup. + * + * @since 6.3.0 + * + * @memberof imageEdit + * + * @param {HTMLElement} el The activated control element. + * + * @return {boolean} Always returns false. + */ + togglePopup : function(el) { + var $el = $( el ); + var $targetEl = $( el ).attr( 'aria-controls' ); + var $target = $( '#' + $targetEl ); + $el + .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ); + // Open menu and set z-index to appear above image crop area if it is enabled. + $target + .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } ); + // Move focus to first item in menu. + $target.find( 'button' ).first().trigger( 'focus' ); + + return false; + }, + + /** + * Navigate popup menu by arrow keys. + * + * @since 6.3.0 + * + * @memberof imageEdit + * + * @param {HTMLElement} el The current element. + * + * @return {boolean} Always returns false. + */ + browsePopup : function(el) { + var $el = $( el ); + var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' ); + var $index = $collection.index( $el ); + var $prev = $index - 1; + var $next = $index + 1; + var $last = $collection.length; + if ( $prev < 0 ) { + $prev = $last - 1; + } + if ( $next === $last ) { + $next = 0; + } + var $target = false; + if ( event.keyCode === 40 ) { + $target = $collection.get( $next ); + } else if ( event.keyCode === 38 ) { + $target = $collection.get( $prev ); + } + if ( $target ) { + $target.focus(); + event.preventDefault(); + } + + return false; + }, + + /** + * Close popup menu and reset focus on feature activation. + * + * @since 6.3.0 + * + * @memberof imageEdit + * + * @param {HTMLElement} el The current element. + * + * @return {boolean} Always returns false. + */ + closePopup : function(el) { + var $parent = $(el).parent( '.imgedit-popup-menu' ); + var $controlledID = $parent.attr( 'id' ); + var $target = $( 'button[aria-controls="' + $controlledID + '"]' ); + $target + .attr( 'aria-expanded', 'false' ).trigger( 'focus' ); + $parent + .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ); + + return false; + }, + /** * Shows or hides the image edit help box. * @@ -189,6 +323,28 @@ return false; }, + /** + * Shows or hides image edit input fields when enabled. + * + * @since 6.3.0 + * + * @memberof imageEdit + * + * @param {HTMLElement} el The element to trigger the edit panel. + * + * @return {boolean} Always returns false. + */ + toggleControls : function(el) { + var $el = $( el ); + var $target = $( '#' + $el.attr( 'aria-controls' ) ); + $el + .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ); + $target + .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' ); + + return false; + }, + /** * Gets the value from the image edit target. * @@ -405,12 +561,14 @@ } if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) { - $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false); + $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false); } else { - $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true); + $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true); } + var successMessage = __( 'Image updated.' ); t.toggleEditor(postid, 0); + wp.a11y.speak( successMessage, 'assertive' ); }) .on( 'error', function() { var errorMessage = __( 'Could not load the preview image. Please reload the page and try again.' ); @@ -713,6 +871,8 @@ var t = this, selW = $('#imgedit-sel-width-' + postid), selH = $('#imgedit-sel-height-' + postid), + selX = $('#imgedit-start-x-' + postid), + selY = $('#imgedit-start-y-' + postid), $image = $( image ), $img; @@ -771,6 +931,8 @@ */ onSelectStart: function() { imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1); + imageEdit.setDisabled($('.imgedit-crop-clear'), 1); + imageEdit.setDisabled($('.imgedit-crop-apply'), 1); }, /** * Event triggered when the selection is ended. @@ -784,6 +946,9 @@ */ onSelectEnd: function(img, c) { imageEdit.setCropSelection(postid, c); + if ( ! $('#imgedit-crop > *').is(':visible') ) { + imageEdit.toggleControls($('.imgedit-crop.button')); + } }, /** @@ -800,6 +965,8 @@ var sizer = imageEdit.hold.sizer; selW.val( imageEdit.round(c.width / sizer) ); selH.val( imageEdit.round(c.height / sizer) ); + selX.val( imageEdit.round(c.x1 / sizer) ); + selY.val( imageEdit.round(c.y1 / sizer) ); } }); }, @@ -826,6 +993,8 @@ this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 ); $('#imgedit-sel-width-' + postid).val(''); $('#imgedit-sel-height-' + postid).val(''); + $('#imgedit-start-x-' + postid).val('0'); + $('#imgedit-start-y-' + postid).val('0'); $('#imgedit-selection-' + postid).val(''); return false; } @@ -956,7 +1125,7 @@ if ( $(t).hasClass('disabled') ) { return false; } - + this.closePopup(t); this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce); }, @@ -978,7 +1147,7 @@ if ( $(t).hasClass('disabled') ) { return false; } - + this.closePopup(t); this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce); }, @@ -1014,6 +1183,8 @@ // Clear the selection fields after cropping. $('#imgedit-sel-width-' + postid).val(''); $('#imgedit-sel-height-' + postid).val(''); + $('#imgedit-start-x-' + postid).val('0'); + $('#imgedit-start-y-' + postid).val('0'); }, /** @@ -1097,6 +1268,8 @@ */ setNumSelection : function( postid, el ) { var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid), + elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid), + xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ), x = this.intval( elX.val() ), y = this.intval( elY.val() ), img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(), sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi; @@ -1115,11 +1288,11 @@ return false; } - if ( x && y && ( sel = ias.getSelection() ) ) { + if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) { x2 = sel.x1 + Math.round( x * sizer ); y2 = sel.y1 + Math.round( y * sizer ); - x1 = sel.x1; - y1 = sel.y1; + x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer ); + y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer ); if ( x2 > imgw ) { x1 = 0; @@ -1205,10 +1378,21 @@ if ( r > h ) { r = h; + var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' ); + + $( '#imgedit-crop-' + postid ) + .prepend( '' ); + + wp.a11y.speak( errorMessage, 'assertive' ); if ( n ) { - $('#imgedit-crop-height-' + postid).val(''); + $('#imgedit-crop-height-' + postid).val( '' ); } else { - $('#imgedit-crop-width-' + postid).val(''); + $('#imgedit-crop-width-' + postid).val( ''); + } + } else { + var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' ); + if ( 'undefined' !== typeof( error ) ) { + error.remove(); } } @@ -1231,7 +1415,7 @@ * void when it is. */ validateNumeric: function( el ) { - if ( ! this.intval( $( el ).val() ) ) { + if ( false === this.intval( $( el ).val() ) ) { $( el ).val( '' ); return false; } diff --git a/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js b/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js index 1fe8cd11de..c905b011d2 100644 --- a/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js +++ b/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js @@ -956,7 +956,7 @@ $.imgAreaSelect = function (img, options) { * default 5px */ if (!parseInt($handles.css('width')) >= 0) - $handles.width(5).height(5); + $handles.width(10).height(10); /* * If the borderWidth option is in use, add a solid border to diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 75048d3be5..e97fa1666e 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -191,7 +191,6 @@ p.popular-tags, .wp-editor-container, .popular-tags, .feature-filter, -.imgedit-group, .comment-ays { border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); @@ -204,7 +203,6 @@ p.popular-tags, .widgets-holder-wrap, .popular-tags, .feature-filter, -.imgedit-group, .comment-ays { background: #fff; } diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 18d156cdce..0ca42938d1 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -877,16 +877,16 @@ border color while dragging a file over the uploader drop area */ padding-top: 10px; } -.imgedit-settings p, -.imgedit-settings fieldset { +.image-editor p, +.image-editor fieldset { margin: 8px 0; } -.imgedit-settings legend { +.image-editor legend { margin-bottom: 5px; } -.describe .imgedit-wrap .imgedit-settings { +.describe .imgedit-wrap .image-editor { padding: 0 5px; } @@ -898,19 +898,36 @@ border color while dragging a file over the uploader drop area */ height: auto; } -.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { - float: left; - padding: 3px 16px 0 0; - min-width: 400px; - max-width: calc( 100% - 266px ); +.imgedit-panel-content { + display: grid; + grid-template-columns: 640px 1fr; + gap: 20px; } -.wp_attachment_holder .imgedit-wrap .imgedit-settings { +@media screen and (max-width: 1120px) { + .imgedit-panel-content { + grid-template-columns: 1fr; + } +} + +.imgedit-settings { + max-width: 400px; /* Prevent reflow when help info is expanded. */ +} + +.imgedit-group-controls > * { + display: none; +} + +.imgedit-panel-active .imgedit-group-controls > * { + display: block; +} + +.wp_attachment_holder .imgedit-wrap .image-editor { float: right; width: 250px; } -.imgedit-settings input { +.image-editor input { margin-top: 0; vertical-align: middle; } @@ -945,7 +962,7 @@ border color while dragging a file over the uploader drop area */ } .media-disabled, -.imgedit-settings .disabled { +.image-editor .disabled { /* WCAG 1.4.3 Text or images of text that are part of an inactive user interface component ... have no contrast requirement. */ color: #a7aaad; @@ -969,10 +986,6 @@ border color while dragging a file over the uploader drop area */ float: left; } -.imgedit-menu { - margin: 0 0 12px; -} - .imgedit-menu .note-no-rotate { clear: both; margin: 0; @@ -985,7 +998,6 @@ border color while dragging a file over the uploader drop area */ min-height: 28px; font-size: 13px; line-height: 2; - margin: 0 8px 8px 0; padding: 0 10px; } @@ -1014,22 +1026,14 @@ border color while dragging a file over the uploader drop area */ content: "\f165"; } -.imgedit-rleft:before { - content: "\f166"; +.imgedit-scale:before { + content: "\f211"; } -.imgedit-rright:before { +.imgedit-rotate:before { content: "\f167"; } -.imgedit-flipv:before { - content: "\f168"; -} - -.imgedit-fliph:before { - content: "\f169"; -} - .imgedit-undo:before { content: "\f171"; } @@ -1048,23 +1052,19 @@ border color while dragging a file over the uploader drop area */ background-size: 20px 20px; } +.imgedit-crop-wrap { + padding: 20px; + background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; +} + + .imgedit-crop { margin: 0 8px 0 0; } -.imgedit-rleft { - margin: 0 3px; -} - -.imgedit-rright { - margin: 0 8px 0 3px; -} - -.imgedit-flipv { - margin: 0 3px; -} - -.imgedit-fliph { +.imgedit-rotate { margin: 0 8px 0 3px; } @@ -1076,6 +1076,12 @@ border color while dragging a file over the uploader drop area */ margin: 0 8px 0 3px; } +.imgedit-thumbnail-preview-group { + display: flex; + flex-wrap: wrap; + column-gap: 10px; +} + .imgedit-thumbnail-preview { margin: 10px 8px 0 0; } @@ -1102,11 +1108,35 @@ border color while dragging a file over the uploader drop area */ padding: .5em 0 0; } +.imgedit-popup-menu, .imgedit-help { display: none; padding-bottom: 8px; } +.imgedit-panel-tools > .imgedit-menu { + display: flex; + column-gap: 4px; + align-items: start; +} + +.imgedit-popup-menu { + width: fit-content; + position: absolute; + left: calc( 100% + 4px ); + top: -3px; +} + +.image-editor .imgedit-menu .imgedit-popup-menu button { + display: block; + margin: 2px 0; + width: 100%; +} + +.imgedit-rotate-menu-container { + position: relative; +} + .imgedit-help.imgedit-restore { padding-bottom: 0; } @@ -1139,10 +1169,6 @@ border color while dragging a file over the uploader drop area */ padding: 0; } -.imgedit-submit { - margin: 8px 0 0; -} - .imgedit-submit-btn { margin-left: 20px; } @@ -1173,17 +1199,16 @@ span.imgedit-scale-warn { } .imgedit-group { - margin-bottom: 8px; - padding: 10px; + margin-bottom: 20px; } -.imgedit-settings .imgedit-original-dimensions { +.image-editor .imgedit-original-dimensions { display: inline-block; } -.imgedit-settings .imgedit-scale input[type="text"], -.imgedit-settings .imgedit-crop-ratio input[type="text"], -.imgedit-settings .imgedit-crop-sel input[type="text"] { +.image-editor .imgedit-scale-controls input[type="text"], +.image-editor .imgedit-crop-ratio input[type="text"], +.image-editor .imgedit-crop-sel input[type="text"] { width: 80px; font-size: 14px; padding: 0 8px; @@ -1197,12 +1222,12 @@ span.imgedit-scale-warn { color: #3c434a; } -.imgedit-settings .imgedit-scale-button-wrapper { +.image-editor .imgedit-scale-button-wrapper { margin-top: 0.3077em; display: block; } -.imgedit-settings .imgedit-scale .button { +.image-editor .imgedit-scale-controls .button { margin-bottom: 0; } @@ -1271,15 +1296,15 @@ audio, video { padding: 10px 0 10px 12px; } - .imgedit-settings .imgedit-scale input[type="text"], - .imgedit-settings .imgedit-crop-ratio input[type="text"], - .imgedit-settings .imgedit-crop-sel input[type="text"] { + .image-editor .imgedit-scale input[type="text"], + .image-editor .imgedit-crop-ratio input[type="text"], + .image-editor .imgedit-crop-sel input[type="text"] { font-size: 16px; padding: 6px 10px; } .wp_attachment_holder .imgedit-wrap .imgedit-panel-content, - .wp_attachment_holder .imgedit-wrap .imgedit-settings { + .wp_attachment_holder .imgedit-wrap .image-editor { float: none; width: auto; max-width: none; @@ -1296,16 +1321,16 @@ audio, video { } .media-modal .imgedit-wrap .imgedit-panel-content, - .media-modal .imgedit-wrap .imgedit-settings { + .media-modal .imgedit-wrap .image-editor { position: initial !important; } - .media-modal .imgedit-wrap .imgedit-settings { + .media-modal .imgedit-wrap .image-editor { box-sizing: border-box; width: 100% !important; } - .imgedit-settings .imgedit-scale-button-wrapper { + .image-editor .imgedit-scale-button-wrapper { display: inline-block; } } diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php index 0f7257b3b6..3ecb38ceb8 100644 --- a/src/wp-admin/includes/image-edit.php +++ b/src/wp-admin/includes/image-edit.php @@ -28,7 +28,7 @@ function wp_image_editor( $post_id, $msg = false ) { die( __( 'Image data does not exist. Please re-upload the image.' ) ); } - $sizer = $big > 400 ? 400 / $big : 1; + $sizer = $big > 600 ? 600 / $big : 1; $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true ); $can_restore = false; @@ -55,13 +55,15 @@ function wp_image_editor( $post_id, $msg = false ) { ?>
- -
- + +
- + + +
+ +
- - + + + ' . __( 'Image rotation is not supported by your web host.' ) . '

'; ?> - - - - - - - -
- - - -
- - - - - - - - -
- -
- -
- - )" disabled="disabled" class="button button-primary imgedit-submit-btn" value="" /> -
-
- -
-
-
-

- -
-

-
- -

- ' . $meta['width'] . ' × ' . $meta['height'] . '' - ); - ?> -

- -
- -
- -
- - - - - -
, 'scale')" class="button button-primary" value="" />
-
- - -
- -
-
-
- - - -
-
-

-
-

- + + -

-
- , 'restore')" class="button button-primary" value="" /> +
+ + + +
+
-
-
-
- - - -
-
-

- - -
-

- -


-

- -


-

+
+ + + +
-
- -
- - - - - -
-
+
+
+ + + + + + + -
- -
- - - - - +
+
+ +
-
+
+
+
+
+
+

+ +
+

+
+ +

+ ' . $meta['width'] . ' × ' . $meta['height'] . '' + ); + ?> +

+ +
+
+ +
+ + + + + + + +
+
+
+
+
+
+ +
+
+

+
+

+ +

+
+ , 'restore')" class="button button-primary" value="" /> +
+
+
+
+ +
+
+
+

+ +
+

+


+

+ +


+

+
+
+
+ +
+ + + + + +
+
+
+ +
+ + + + + +
+
+
+ +
+ + + + + +
+
+
+ +
+
+
-
-

- -
-

+ +
+

+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + $size ) { + if ( array_key_exists( $size, $meta['sizes'] ) ) { + if ( 'thumbnail' === $size ) { + continue; + } + ?> + + + + + +
+
+
+
+
-
- -
-
- -
-
- - - - - - - - - - - - - - - - - $size ) { - if ( array_key_exists( $size, $meta['sizes'] ) ) { - if ( 'thumbnail' === $size ) { - continue; - } - ?> - - - - - -
-
-
- - -
+
+
@@ -509,7 +533,7 @@ function wp_save_image_file( $filename, $image, $mime_type, $post_id ) { */ function _image_get_preview_ratio( $w, $h ) { $max = max( $w, $h ); - return $max > 400 ? ( 400 / $max ) : 1; + return $max > 600 ? ( 600 / $max ) : 1; } /** diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 5de184f2e3..5e70fdb992 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1957,32 +1957,7 @@ .media-modal .imgedit-wrap .imgedit-panel-content { padding: 16px 16px 0; - position: absolute; - top: 0; - right: 282px; - bottom: 0; - left: 0; - overflow: auto; -} - -/* - * Implementation of bottom padding in overflow content differs across browsers. - * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 - */ -.media-modal .imgedit-wrap .imgedit-submit { - margin-bottom: 16px; -} - -.media-modal .imgedit-wrap .imgedit-settings { - background: #f6f7f7; - border-left: 1px solid #dcdcde; - padding: 20px 16px 0; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 250px; - overflow: auto; + overflow: visible; } /* @@ -1996,19 +1971,15 @@ .media-modal .imgedit-group { background: none; border: none; - border-bottom: 1px solid #dcdcde; box-shadow: none; margin: 0; - margin-bottom: 16px; padding: 0; - padding-bottom: 16px; position: relative; /* RTL fix, #WP29352 */ } -.media-modal .imgedit-group:last-of-type { - border: none; - margin: 0; - padding: 0; +.media-modal .imgedit-group.imgedit-panel-active { + margin-bottom: 16px; + padding-bottom: 16px; } .media-modal .imgedit-group-top { @@ -2077,8 +2048,7 @@ .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */ .media-modal .imgedit-wrap .notice { - margin: 0; - margin-bottom: 16px; + margin: 0 16px; } /** @@ -2827,6 +2797,10 @@ } @media screen and (max-width: 782px) { + .imgedit-panel-content { + grid-template-columns: auto; + } + .media-frame-toolbar .media-toolbar { bottom: -54px; }