WordPress.org

Make WordPress Core

Ticket #46085: 46085.diff

File 46085.diff, 3.3 KB (added by azaozz, 3 years ago)
  • src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js

     
    347347                return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
    348348        }
    349349
    350         function updateImage( imageNode, imageData ) {
    351                 var classes, className, node, html, parent, wrap, linkNode,
     350        function updateImage( $imageNode, imageData ) {
     351                var classes, className, node, html, parent, wrap, linkNode, imageNode,
    352352                        captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
    353353                        $imageNode, srcset, src,
    354354                        dom = editor.dom;
    355355
     356                if ( ! $imageNode.length ) {
     357                        return;
     358                }
     359
     360                imageNode = $imageNode[0];
    356361                classes = tinymce.explode( imageData.extraClasses, ' ' );
    357362
    358363                if ( ! classes ) {
     
    373378                width = imageData.width;
    374379                height = imageData.height;
    375380
     381                if ( editor.settings.classic_block_editor ) {
     382                        // The width coming from the media modal is wrong.
     383                        // It is the "old" `$content_width` from the theme.
     384                        var editorBody = editor.getBody();
     385                        var maxWidth = editorBody.clientWidth;
     386
     387                        if ( width && maxWidth && width > maxWidth ) {
     388                                if ( height ) {
     389                                        var ratio = maxWidth / width;
     390                                        height = parseInt( height * ratio, 10 );
     391                                }
     392
     393                                width = maxWidth;
     394                        }
     395                }
     396
    376397                if ( imageData.size === 'custom' ) {
    377398                        width = imageData.customWidth;
    378399                        height = imageData.customHeight;
     
    389410                dom.setAttribs( imageNode, attrs );
    390411
    391412                // Preserve empty alt attributes.
    392                 editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
     413                $imageNode.attr( 'alt', imageData.alt || '' );
    393414
    394415                linkAttrs = {
    395416                        href: imageData.linkUrl,
     
    513534        }
    514535
    515536        function editImage( img ) {
    516                 var frame, callback, metadata;
     537                var frame, callback, metadata, imageNode;
    517538
    518539                if ( typeof wp === 'undefined' || ! wp.media ) {
    519540                        editor.execCommand( 'mceImage' );
     
    522543
    523544                metadata = extractImageData( img );
    524545
     546                // Mark the image node so we can select it later.
     547                editor.$( img ).attr( 'data-wp-editing', 1 );
     548
    525549                // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
    526550                wp.media.events.trigger( 'editor:image-edit', {
    527551                        editor: editor,
     
    538562                wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
    539563
    540564                callback = function( imageData ) {
    541                         editor.focus();
    542565                        editor.undoManager.transact( function() {
    543                                 updateImage( img, imageData );
     566                                updateImage( imageNode, imageData );
    544567                        } );
    545568                        frame.detach();
    546569                };
     
    550573                frame.on( 'close', function() {
    551574                        editor.focus();
    552575                        frame.detach();
     576
     577                        // `close` fires first...
     578                        // To be able to update the image node, we need to select it here first,
     579                        // and pass it to the callback.
     580                        imageNode = editor.$( 'img[data-wp-editing]' )
     581                        imageNode.removeAttr( 'data-wp-editing' );
    553582                });
    554583
    555584                frame.open();
     
    810839
    811840        editor.on( 'beforeGetContent', function( event ) {
    812841                if ( event.format !== 'raw' ) {
    813                         editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null );
     842                        editor.$( 'img[id="__wp-temp-img-id"]' ).removeAttr( 'id' );
    814843                }
    815844        });
    816845