WordPress.org
Get WordPress

Make WordPress Core

Ticket #26628: 26628.2.diff

File 26628.2.diff, 9.1 KB (added by wonderboymusic, 9 years ago)

  • src/wp-includes/class-wp-editor.php

     
    222222                                         * the TinyMCE instance.
    223223                                         */
    224224                                        $plugins = array_unique( apply_filters( 'tiny_mce_plugins', array(
     225                                                'audiovideo',
    225226                                                'charmap',
    226227                                                'link',
    227228                                                'media',
    … …  
    332333                                        self::$first_init['spellchecker_language'] = self::$mce_locale;
    333334                                }
    334335
     336                                $suffix = SCRIPT_DEBUG ? '' : '.min';
     337                                $dashicons = "/wp-includes/css/dashicons$suffix.css";
     338
    335339                                // WordPress default stylesheet
    336                                 $mce_css = array( self::$baseurl . '/skins/wordpress/wp-content.css' );
     340                                $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
    337341
    338342                                // load editor_style.css if the current theme supports it
    339343                                if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

  • src/wp-includes/formatting.php

     
    242242                $pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
    243243                $pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
    244244        }
     245        if ( preg_match( '|[\[<]video|', $pee ) ) {
     246                $pee = preg_replace( '#\s*<(track|source)([^>]*)>\s*#', '<$1$2>', $pee ); // no pee inside video tag/shortcode
     247        }
    245248        $pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
    246249        // make paragraphs, including one at the end
    247250        $pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
    … …  
    258261        $pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
    259262        if ( $br ) {
    260263                $pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee);
     264                $pee = preg_replace_callback('/[\[<]video.*?[\[<]\/video[\]>]/s', '_autop_newline_preservation_helper', $pee);
    261265                $pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
    262266                $pee = str_replace('<WPPreserveNewline />', "\n", $pee);
    263267        }

  • src/wp-includes/js/media-editor.js

     
    480480                                } else if ( h.indexOf('[gallery') !== -1 ) {
    481481                                        if ( ed.plugins.wpgallery )
    482482                                                h = ed.plugins.wpgallery._do_gallery(h);
     483                                } else if ( h.indexOf('[video') !== -1 || h.indexOf('[audio') !== -1 ) {
     484                                        if ( ed.plugins.audiovideo )
     485                                                h = ed.plugins.audiovideo._do_media(h);
    483486                                } else if ( h.indexOf('[embed') === 0 ) {
    484487                                        if ( ed.plugins.wordpress )
    485488                                                h = ed.plugins.wordpress._setEmbed(h);

  • src/wp-includes/js/tinymce/plugins/audiovideo/plugin.js

     
     1/* global tinymce */
     2tinymce.PluginManager.add('audiovideo', function( editor ) {
     3
     4        function parseMedia( content ) {
     5                return content
     6                        .replace( /(\[audio[^\]]*\][\s\S]*?\[\/audio\])/g, function( match, attr ) {
     7                                var data = tinymce.DOM.encode( attr );
     8                                return '<div class="mceTemp media-shortcode-wrapper" draggable="true"><div class="dashicons dashicons-format-audio"></div><img src="' + tinymce.Env.transparentSrc + '" class="wp-media-shortcode wp-audio-shortcode mceItem" ' +
     9                                        'title="' + data + '" data-mce-resize="false" data-mce-placeholder="1" /></div>';
     10                        })
     11                        .replace( /(\[video[^\]]*\][\s\S]*?\[\/video\])/g, function( match, attr ) {
     12                                var data = tinymce.DOM.encode( attr );
     13                                console.log( data );
     14                                return '<div class="mceTemp media-shortcode-wrapper" draggable="true"><div class="dashicons dashicons-format-video"></div><img src="' + tinymce.Env.transparentSrc + '" class="wp-media-shortcode wp-video-shortcode mceItem" ' +
     15                                        'title="' + data + '" data-mce-resize="false" data-mce-placeholder="1" /></div>';
     16                        });
     17        }
     18
     19        function getMedia( content ) {
     20                function getAttr( str, name ) {
     21                        name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
     22                        return name ? tinymce.DOM.decode( name[1] ) : '';
     23                }
     24
     25                return content.replace( /(<img[^>]+>)<\/div>/g, function( match, image ) {
     26                        var cls = getAttr( image, 'class' );
     27
     28                        if ( cls.indexOf('wp-audio-shortcode') !== -1 ) {
     29                                return tinymce.trim( getAttr( image, 'title' ) );
     30                        }
     31
     32                        if ( cls.indexOf('wp-video-shortcode') !== -1 ) {
     33                                return tinymce.trim( getAttr( image, 'title' ) );
     34                        }
     35
     36                        return match;
     37                });
     38        }
     39
     40        // Display 'media' instead of img in element path
     41        editor.on( 'ResolveName', function( e ) {
     42                var dom = editor.dom,
     43                        target = e.target;
     44
     45                if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-audio-shortcode' ) ) {
     46                        e.name = 'audio';
     47                }
     48
     49                if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-video-shortcode' ) ) {
     50                        e.name = 'video';
     51                }
     52        });
     53
     54        editor.on( 'BeforeSetContent', function( e ) {
     55                e.content = parseMedia( e.content );
     56        });
     57
     58        editor.on( 'PostProcess', function( e ) {
     59                if ( e.get ) {
     60                        e.content = getMedia( e.content );
     61                }
     62        });
     63
     64        return {
     65                _do_media: parseMedia,
     66                _get_media: getMedia
     67        };
     68});

  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    122122        border-style: solid;
    123123}
    124124
     125.mce-content-body .media-shortcode-wrapper {
     126        position: relative;
     127        margin-bottom: 20px;
     128}
     129
     130.mce-content-body .media-shortcode-wrapper .dashicons {
     131        position: absolute;
     132        z-index: 2;
     133        left: 50%;
     134        top: 50%;
     135        font-size: 48px;
     136        width: 48px;
     137        height: 48px;
     138        margin: -24px 0 0 -24px;
     139}
     140
     141.mce-content-body img.wp-media-shortcode {
     142        border: 1px dashed #888;
     143        background: #f2f2f2;
     144        width: 99%;
     145        height: 250px;
     146        outline: 0;
     147        cursor: pointer;
     148}
     149
     150.mce-content-body img.wp-audio-shortcode {
     151        height: 100px;
     152}
     153
     154.mce-content-body img.wp-media-shortcode:hover {
     155        background-color: #ededed;
     156        border-style: solid;
     157}
     158
    125159.mce-content-body img.wp-gallery.wp-gallery-selected {
    126160        background-color: #d8d8d8;
    127161        border-style: solid;

  • src/wp-includes/media.php

     
    12231223                        $html .= sprintf( $source, $type['type'], esc_url( $$fallback ) );
    12241224                }
    12251225        }
     1226
     1227        if ( ! empty( $content ) ) {
     1228                if ( false !== strpos( $content, "\n" ) )
     1229                        $content = str_replace( array( "\r\n", "\n", "\t" ), '', $content );
     1230
     1231                $html .= trim( $content );
     1232        }
     1233
    12261234        if ( 'mediaelement' === $library )
    12271235                $html .= wp_mediaelement_fallback( $fileurl );
    12281236        $html .= '</video>';

  • tests/phpunit/tests/media.php

     
    346346                $matches = get_media_embedded_in_content( $content, $types );
    347347                $this->assertEquals( $contents, $matches );
    348348        }
     349
     350        function test_video_shortcode_body() {
     351                $width = 640;
     352                $height = 360;
     353
     354                $video =<<<VIDEO
     355[video width="640" height="360" mp4="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4"]
     356<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
     357<source type="video/webm" src="myvideo.webm" />
     358<!-- Ogg/Vorbis for older Firefox and Opera versions -->
     359<source type="video/ogg" src="myvideo.ogv" />
     360<!-- Optional: Add subtitles for each language -->
     361<track kind="subtitles" src="subtitles.srt" srclang="en" />
     362<!-- Optional: Add chapters -->
     363<track kind="chapters" src="chapters.srt" srclang="en" />
     364[/video]
     365VIDEO;
     366
     367                $w = $GLOBALS['content_width'];
     368                $h = ceil( ( $height * $w ) / $width );
     369
     370                $content = apply_filters( 'the_content', $video );
     371
     372                $expected = '<div style="width: ' . $w . 'px; max-width: 100%;" class="wp-video">' .
     373                                '<!--[if lt IE 9]><script>document.createElement(\'video\');</script><![endif]-->
     374<video class="wp-video-shortcode" id="video-0-1" width="' . $w . '" height="' . $h . '" preload="metadata" controls="controls">' .
     375'<source type="video/mp4" src="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4" />' .
     376'<!-- WebM/VP8 for Firefox4, Opera, and Chrome --><source type="video/webm" src="myvideo.webm" />' .
     377'<!-- Ogg/Vorbis for older Firefox and Opera versions --><source type="video/ogg" src="myvideo.ogv" />' .
     378'<!-- Optional: Add subtitles for each language --><track kind="subtitles" src="subtitles.srt" srclang="en" />' .
     379'<!-- Optional: Add chapters --><track kind="chapters" src="chapters.srt" srclang="en" />' .
     380'<a href="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4">' .
     381'http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4</a></video></div>
     382';
     383
     384                $this->assertEquals( $expected, $content );
     385        }
    349386}