diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index cccf307309..7ee5d1e31e 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -270,7 +270,8 @@ width: 100%; } -.media-sidebar h3 { +.media-sidebar h3, +.image-details h3 { position: relative; font-weight: bold; text-transform: uppercase; @@ -1603,23 +1604,34 @@ .image-details .embed-media-settings { top: 0; overflow: visible; + padding: 0; } .image-details .column-settings { - width: 44%; - float: left; - margin-right: 20px; + background: #f3f3f3; + border-right: 1px solid #ddd; + min-height: 100%; + width: 52%; + position: absolute; + top: 0; + left: 0; +} + +.image-details .column-settings h3 { + margin: 20px; + padding-top: 20px; + border-top: 1px solid #ddd; } .image-details .column-image { - width: 53%; - float: left; + width: 48%; + position: absolute; + left: 52%; + top: 0; } -.image-details .column-image:after { - content: ''; - display: table; - clear: both; +.image-details .image { + margin: 20px; } .image-details .image img { @@ -1627,6 +1639,29 @@ max-height: 500px; } +.image-details .advanced-toggle { + font-style: italic; + color: #666; + text-decoration: none; + margin: 20px; + display: block; +} + +.image-details .advanced-toggle::after { + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: '\f140'; + display: inline-block; + margin-top: -2px; +} + +.image-details .advanced-visible .advanced-toggle::after { + content: '\f142'; + margin-top: 0; +} .media-embed .thumbnail { max-width: 100%; @@ -1661,14 +1696,19 @@ clear: both; } -.image-details .setting { +.image-details .embed-media-settings .setting { float: none; + width: auto; } .image-details .actions { margin: 10px 0; } +.image-details .hidden { + display: none; +} + .media-embed .setting input[type="text"], .media-embed .setting textarea { display: block; @@ -1677,9 +1717,20 @@ margin: 1px 0; } -.image-details .setting input[type="text"], -.image-details .setting textarea { +.image-details .embed-media-settings .setting input[type="text"], +.image-details .embed-media-settings .setting textarea { max-width: inherit; + width: 70%; +} + +.image-details .embed-media-settings .setting input.link-to-custom, +.image-details .embed-media-settings .link-target { + margin-left: 27%; + width: 70%; +} + +.image-details .embed-media-settings .link-target { + margin-top: 24px; } .media-embed .setting input.hidden { @@ -1694,6 +1745,14 @@ color: #666; } +.image-details .embed-media-settings .setting span { + float: left; + width: 25%; + text-align: right; + margin: 8px 1% 0 1%; + line-height: 1.1; +} + .media-embed .setting .button-group { margin: 2px 0; } @@ -1709,10 +1768,6 @@ margin-top: 10px; } -.advanced .hidden { - display: none; -} - /* Drag & drop on the editor upload */ #wp-fullscreen-body .uploader-editor, .wp-editor-wrap .uploader-editor { @@ -1930,6 +1985,28 @@ right: 30px; } + .image-details .embed-media-settings .setting { + margin: 20px; + } + + .image-details .embed-media-settings .setting span { + float: none; + text-align: left; + width: 100%; + margin-bottom: 4px; + } + + .image-details .embed-media-settings .setting input.link-to-custom, + .image-details .embed-media-settings .setting input[type="text"], + .image-details .embed-media-settings .setting textarea { + width: 100%; + margin-left: 0; + } + + .image-details .link-target { + width: 100%; + } + .media-selection { min-width: 120px; } @@ -2137,10 +2214,14 @@ .image-details .column-settings, .image-details .column-image { - float: none; + position: relative; + padding: 10px 0 20px 0; + left: 0; width: 100%; + min-height: inherit; } + /* Gallery */ .media-frame.hide-router .media-frame-content { top: 73px; diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 80db8d2684..fef88de2ce 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -6059,15 +6059,13 @@ events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, { 'click .edit-attachment': 'editAttachment', 'click .replace-attachment': 'replaceAttachment', - 'click .show-advanced': 'showAdvanced' + 'click .advanced-toggle': 'toggleAdvanced' } ), initialize: function() { // used in AttachmentDisplay.prototype.updateLinkTo this.options.attachment = this.model.attachment; - if ( this.model.attachment ) { - this.listenTo( this.model, 'change:url', this.updateUrl ); - this.listenTo( this.model, 'change:link', this.toggleLinkSettings ); - } + this.listenTo( this.model, 'change:url', this.updateUrl ); + this.listenTo( this.model, 'change:link', this.toggleLinkSettings ); media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments ); }, @@ -6113,8 +6111,8 @@ }, updateUrl: function() { - this.$( '.image img' ).attr( 'src', this.model.get('url' ) ); - this.$( '.url' ).val( this.model.get('url' ) ); + this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) ); + this.$( '.url' ).val( this.model.get( 'url' ) ); }, toggleLinkSettings: function() { @@ -6125,11 +6123,16 @@ } }, - showAdvanced: function( event ) { + toggleAdvanced: function( event ) { + var $advanced = $( event.target ).closest( '.advanced' ); event.preventDefault(); - $( event.target ).closest('.advanced') - .find( '.hidden' ).removeClass( 'hidden' ); - $( event.target ).remove(); + if ( $advanced.hasClass('advanced-visible') ) { + $advanced.removeClass('advanced-visible'); + $advanced.find('div').addClass('hidden'); + } else { + $advanced.addClass('advanced-visible'); + $advanced.find('div').removeClass('hidden'); + } }, editAttachment: function( event ) { diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index 9f76d4c34c..a5af171c15 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -114,7 +114,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } function extractImageData( imageNode ) { - var classes, metadata, captionBlock, caption, link, + var classes, extraClasses, metadata, captionBlock, caption, link, width, height, dom = editor.dom; // default attributes @@ -127,38 +127,44 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { caption: '', alt: '', align: 'none', + extraClasses: '', link: false, linkUrl: '', linkClassName: '', linkTargetBlank: false, linkRel: '', - title: '', - className: '' + title: '' }; metadata.url = dom.getAttrib( imageNode, 'src' ); metadata.alt = dom.getAttrib( imageNode, 'alt' ); metadata.title = dom.getAttrib( imageNode, 'title' ); - metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 ); - metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 ); - metadata.className = imageNode.className; - classes = metadata.className.split( ' ' ); + width = dom.getAttrib( imageNode, 'width' ) || imageNode.width; + height = dom.getAttrib( imageNode, 'height' ) || imageNode.height; + + metadata.width = parseInt( width, 10 ); + metadata.height = parseInt( height, 10 ); + + classes = tinymce.explode( imageNode.className, ' ' ); + extraClasses = []; + tinymce.each( classes, function( name ) { if ( /^wp-image/.test( name ) ) { metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 ); - } - - if ( /^align/.test( name ) ) { + } else if ( /^align/.test( name ) ) { metadata.align = name.replace( 'align', '' ); + } else if ( /^size/.test( name ) ) { + metadata.size = name.replace( 'size-', '' ); + } else { + extraClasses.push( name ); } - if ( /^size/.test( name ) ) { - metadata.size = name.replace( 'size-', '' ); - } } ); + metadata.extraClasses = extraClasses.join( ' ' ); + // Extract caption captionBlock = dom.getParents( imageNode, '.wp-caption' ); @@ -194,68 +200,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } function updateImage( imageNode, imageData ) { - var className, width, node, html, captionNode, nodeToReplace, uid, editedImg, id; + var classes, className, width, node, html, parent, wrap, + captionNode, dd, dl, id, attrs, linkAttrs, + dom = editor.dom; - if ( imageData.caption ) { + classes = tinymce.explode( imageData.extraClasses, ' ' ); - html = createImageAndLink( imageData, 'html' ); - - width = parseInt( imageData.width, 10 ); - - if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { - width += 10; - } - - className = 'align' + imageData.align; - id = imageData.attachment_id ? 'id="attachment_'+ imageData.attachment_id +'" ' : ''; - - // should create a new function for generating the caption markup - html = '