diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index 0c48ee54f8..8ef748fa37 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -348,9 +348,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { dom.setAttrib( node, 'data-wp-imgselect', 1 ); position = dom.getPos( node, editor.getBody() ); - toolbarHtml = '
' + - '
' + - '
'; + toolbarHtml = '
' + + '
'; toolbar = dom.create( 'div', { 'id': 'wp-image-toolbar', @@ -362,8 +361,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { dom.setStyles( toolbar, { top: position.y, - left: position.x, - width: node.width + left: position.x }); } diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index f8e83dad47..cf7df4e462 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -160,34 +160,14 @@ img::selection { #wp-image-toolbar { position: absolute; -} - -#wp-image-toolbar .wrapper { - position: relative; - height: 33px; - background-color: #333; /* old IE */ - background-color: rgba(0,0,0,0.3); + background-color: #333; } #wp-image-toolbar .dashicons { - position: absolute; color: white; - width: 36px; - height: 32px; - line-height: 32px; cursor: pointer; } -#wp-image-toolbar div.dashicons-no-alt { - top: 0; - right: 0; -} - -#wp-image-toolbar div.dashicons-format-image { - top: 0; - left: 0; -} - /* Image resize handles */ .mce-content-body div.mce-resizehandle { border-color: #777; @@ -239,6 +219,7 @@ embed { clip: rect(1px, 1px, 1px, 1px); overflow: hidden; outline: 0; + width: 100%; } /** @@ -246,21 +227,19 @@ embed { */ .wpview-type-gallery { position: relative; - padding: 0 0 12px; margin-bottom: 16px; cursor: pointer; } .wpview-type-gallery:after { content: ''; - display: block; - height: 0; + display: table; clear: both; - visibility: hidden; } .wpview-type-gallery.selected { - background-color: #efefef; + background-color: #f2f8ff; + outline: 1px solid #777; } .wpview-type-gallery .toolbar { @@ -269,10 +248,14 @@ embed { left: 0; background-color: #333; color: white; - padding: 4px; display: none; } +.wpview-type-gallery .toolbar div, +#wp-image-toolbar div { + margin: 5px; +} + .wpview-type-gallery.selected .toolbar { display: block; } @@ -291,13 +274,21 @@ embed { .gallery { margin: auto; - line-height: 1; + padding: 0.5em 0; + line-height: 1; + margin-left: -0.5em; + margin-right: -0.5em; + overflow-x: hidden; } .gallery .gallery-item { float: left; - margin: 10px 0 0 0; + margin: 0; text-align: center; + padding: 0.5em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .gallery .gallery-caption, @@ -305,44 +296,51 @@ embed { margin: 0; } +.gallery .gallery-caption { + font-size: 13px; + margin: 4px 0; +} + .gallery-columns-1 .gallery-item { - width: 99%; + width: 100%; } .gallery-columns-2 .gallery-item { - width: 49.5%; + width: 50%; } .gallery-columns-3 .gallery-item { - width: 33%; + width: 33.333%; } .gallery-columns-4 .gallery-item { - width: 24.75%; + width: 25%; } .gallery-columns-5 .gallery-item { - width: 19.825%; + width: 20%; } .gallery-columns-6 .gallery-item { - width: 16%; + width: 16.667%; } .gallery-columns-7 .gallery-item { - width: 14%; + width: 14.285%; } .gallery-columns-8 .gallery-item { - width: 12%; + width: 12.5%; } .gallery-columns-9 .gallery-item { - width: 11%; + width: 11.111%; } .gallery img { border: 1px solid #cfcfcf; + max-width: 100%; + height: auto; } img.wp-oembed { diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index d8d6423725..345935a91e 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -905,7 +905,7 @@ function wp_print_media_templates() {