Media: Replace media icon images with SVG.

Replace the `.png` files in use for media library type icons with `.svg` versions. Improves sharpness, especially on high resolution screens and devices.

Props iseulde, melchoyce, joemcgill, sabernhardt, huzaifaalmesbah, wonderboymusic, ocean90, karmatosed, boemedia, bosskhj, joedolson.
Fixes #31352.
Built from https://develop.svn.wordpress.org/trunk@57638


git-svn-id: http://core.svn.wordpress.org/trunk@57139 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/images/media/archive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M120 40v120H0V0h80l40 40zm-40 0h30l-30-30v30zM40 15v20l18-10-18-10zm0 30v20l18-10-18-10zm0 30v20l18-10-18-10zm30 35v-20l-18 10 18 10zm0-30v-20l-18 10 18 10zm0-30V30l-18 10 18 10zm-25 57s-4 20-5 27 7 16 15 16 16-7 15-16c-1-4-5-16-5-16l-20-11z"/><circle cx="55" cy="134" r="8"/></svg>

wp-includes/images/media/audio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zm10 72v40c0 4-1 7-4 10s-6 4-10 4-7-1-10-4-4-6-4-10 1-7 4-10 6-4 10-4c2 0 4 0 6 1V76l-35 8v34c0 5-2 8-5 10-2 2-5 3-8 3-4 0-7-1-10-4-2-3-4-6-4-10s1-7 4-10 6-4 10-4c2 0 4 0 6 1V72c0-1 0-2 1-2 1-1 2-1 3-1l43-8c1 0 2 0 3 1v10zm-10-32V10l30 30h-30z"/></svg>

wp-includes/images/media/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zm-30 110-10 10-30-30 30-30 10 10-20 20 20 20zm30 10-10-10 20-20-20-20 10-10 30 30-30 30zm0-80V10l30 30h-30z"/></svg>

wp-includes/images/media/default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zm0 40V10l30 30h-30z"/></svg>

wp-includes/images/media/document.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zM10 10h60v10H10V10zm0 20h60v10H10V30zm0 40h40v10H10v-10zm0 20h40v10H10v-10zm70 50H10v-10h70v10zm30-20H10v-10h100v10zm0-20H60v-30h50v30zm0-40H10v-10h100v10zm-30-20V10l30 30h-30z"/></svg>

wp-includes/images/media/interactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zm20 120h-30l10 20h-10l-10-20-10 20h-10l10-20H20V60h80v60zm-20-80V10l30 30h-30z"/><path d="M60 70h30v20h-30zM30 100h60v10H30z"/><circle cx="40" cy="80" r="10"/></svg>

wp-includes/images/media/spreadsheet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zM40 140H10v-10h30v10zm0-20H10v-10h30v10zm0-20H10v-10h30v10zm0-20H10v-10h30v10zm0-20H10v-10h30v10zm30 80h-20v-10h20v10zm0-20h-20v-10h20v10zm0-20h-20v-10h20v10zm0-20h-20v-10h20v10zm0-20h-20v-10h20v10zm0-20H10V10h60v30zm40 80h-30v-10h30v10zm0-20h-30v-10h30v10zm0-20h-30v-10h30v10zm0-20h-30v-10h30v10zm-30-20V10l30 30h-30z"/></svg>

wp-includes/images/media/text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zM10 10h60v10H10V10zm0 20h60v10H10V30zm60 90H10v-10h60v10zm40-20H10v-10h100v10zm0-20H10v-10h100v10zm0-20H10v-10h100v10zm-30-20V10l30 30h-30z"/></svg>

wp-includes/images/media/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 120 160" fill="#888888"><path d="M80 0H0v160h120V40L80 0zm-10 120c0 3-1 5-3 7s-4 3-7 3H30c-3 0-5-1-7-3S20 123 20 120v-30c0-3 1-5 3-7s4-3 7-3h30c3 0 5 1 7 3s3 4 3 7v30zm30 0v10l-20-20v-10l20-20v40zm-20-80V10l30 30h-30z"/></svg>

wp-includes/js/mediaelement/wp-playlist.js

@@ -80,7 +80,7 @@
 		},
 
 		renderCurrent : function () {
-			var dimensions, defaultImage = 'wp-includes/images/media/video.png';
+			var dimensions, defaultImage = 'wp-includes/images/media/video.svg';
 			if ( 'video' === this.data.type ) {
 				if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
 					this.playerNode.attr( 'poster', this.current.get( 'image' ).src );

wp-includes/js/mediaelement/wp-playlist.min.js

@@ -1 +1 @@
-!function(r,e,i){"use strict";window.wp=window.wp||{};var t=i.View.extend({initialize:function(t){this.index=0,this.settings={},this.data=t.metadata||r.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new i.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),e.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),e.isUndefined(window._wpmejsSettings)||(this.settings=e.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(t){this.mejs=t,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(t){this.bindPlayer(t),this.playCurrentSrc()},setPlayer:function(t){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),t&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var t;"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf("wp-includes/images/media/video.png")&&this.playerNode.attr("poster",this.current.get("image").src),(t=this.current.get("dimensions"))&&t.resized&&this.playerNode.attr(t.resized)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var e=this,i=1,s=r('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(t){e.data.images||t.set("image",!1),t.set("artists",e.data.artists),t.set("index",!!e.data.tracknumbers&&i),s.append(e.itemTemplate(t.toJSON())),i+=1}),this.$el.append(s),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(t){t.preventDefault(),this.index=this.$(".wp-playlist-item").index(t.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var t=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),e=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),t!==e?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});function s(){r(".wp-playlist:not(:has(.mejs-container))").each(function(){new t({el:this})})}window.wp.playlist={initialize:s},r(document).ready(s),window.WPPlaylistView=t}(jQuery,_,Backbone);
+!function(r,e,i){"use strict";window.wp=window.wp||{};var t=i.View.extend({initialize:function(t){this.index=0,this.settings={},this.data=t.metadata||r.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new i.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),e.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),e.isUndefined(window._wpmejsSettings)||(this.settings=e.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(t){this.mejs=t,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(t){this.bindPlayer(t),this.playCurrentSrc()},setPlayer:function(t){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),t&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var t;"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf("wp-includes/images/media/video.svg")&&this.playerNode.attr("poster",this.current.get("image").src),(t=this.current.get("dimensions"))&&t.resized&&this.playerNode.attr(t.resized)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var e=this,i=1,s=r('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(t){e.data.images||t.set("image",!1),t.set("artists",e.data.artists),t.set("index",!!e.data.tracknumbers&&i),s.append(e.itemTemplate(t.toJSON())),i+=1}),this.$el.append(s),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(t){t.preventDefault(),this.index=this.$(".wp-playlist-item").index(t.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var t=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),e=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),t!==e?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});function s(){r(".wp-playlist:not(:has(.mejs-container))").each(function(){new t({el:this})})}window.wp.playlist={initialize:s},r(document).ready(s),window.WPPlaylistView=t}(jQuery,_,Backbone);

wp-includes/post.php

@@ -6879,7 +6879,7 @@ function wp_mime_type_icon( $mime = 0 ) {
 						}
 
 						$ext = strtolower( substr( $file, -4 ) );
-						if ( ! in_array( $ext, array( '.png', '.gif', '.jpg' ), true ) ) {
+						if ( ! in_array( $ext, array( '.svg', '.png', '.gif', '.jpg' ), true ) ) {
 							if ( is_dir( "$dir/$file" ) ) {
 								$dirs[ "$dir/$file" ] = "$uri/$file";
 							}

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.5-beta1-57637';
+$wp_version = '6.5-beta1-57638';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.