Ticket #29804: 29804.patch

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

@@ -946 +946 @@
                         'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
                         'Toolbar Toggle' => __( 'Toolbar Toggle' ),
                         'Insert Read More tag' => __( 'Insert Read More tag' ),
-                        'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
+                        '(more…)' => __( '(more…)' ), // Title on the placeholder inside the editor
                         'Distraction Free Writing' => __( 'Distraction Free Writing' ),
                 );
 

src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -82 +82 @@
     });
 
         // Replace Read More/Next Page tags with images
-        editor.on( 'BeforeSetContent', function( e ) {
+        editor.on( 'BeforeSetContent', function( event ) {
                 var title;
 
-                if ( e.content ) {
-                        if ( e.content.indexOf( '<!--more' ) !== -1 ) {
-                                title = editor.editorManager.i18n.translate( 'Read more...' );
-
-                                e.content = e.content.replace( /<!--more(.*?)-->/g, function( match, moretext ) {
-                                        return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="more" data-wp-more-text="' + moretext + '" ' +
-                                                'class="wp-more-tag mce-wp-more" title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />';
+                if ( event.content ) {
+                        if ( event.content.indexOf( '<!--more' ) !== -1 ) {
+                                title = editor.editorManager.i18n.translate( '(more&hellip;)' );
+
+                                event.content = event.content.replace( /<!--more(.*?)-->/g, function( match, moretext ) {
+                                        return '<hr data-wp-more="more" data-wp-more-text="' + moretext + '" title="' + ( tinymce.trim( moretext ) || title ) + '" />';
                                 });
                         }
 
-                        if ( e.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
+                        if ( event.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
                                 title = editor.editorManager.i18n.translate( 'Page break' );
 
-                                e.content = e.content.replace( /<!--nextpage-->/g,
-                                        '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="nextpage" class="wp-more-tag mce-wp-nextpage" ' +
-                                                'title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />' );
+                                event.content = event.content.replace( /<!--nextpage-->/g, '<hr data-wp-more="nextpage" title="' + editor.editorManager.i18n.translate( 'Page break' ) + '" />' );
                         }
                 }
         });
@@ -108 +105 @@
         // Replace images with tags
         editor.on( 'PostProcess', function( e ) {
                 if ( e.get ) {
-                        e.content = e.content.replace(/<img[^>]+>/g, function( image ) {
+                        e.content = e.content.replace(/<hr[^>]+>/g, function( image ) {
                                 var match, moretext = '';
 
                                 if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) {
@@ -130 +127 @@
         editor.on( 'ResolveName', function( event ) {
                 var attr;
 
-                if ( event.target.nodeName === 'IMG' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) {
+                if ( event.target.nodeName === 'HR' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) {
                         event.name = attr;
                 }
         });
@@ -138 +135 @@
         // Register commands
         editor.addCommand( 'WP_More', function( tag ) {
                 var parent, html, title,
-                        classname = 'wp-more-tag',
                         dom = editor.dom,
                         node = editor.selection.getNode();
 
                 tag = tag || 'more';
-                classname += ' mce-wp-' + tag;
-                title = tag === 'more' ? 'Read more...' : 'Next page';
-                title = editor.editorManager.i18n.translate( title );
-                html = '<img src="' + tinymce.Env.transparentSrc + '" title="' + title + '" class="' + classname + '" ' +
-                        'data-wp-more="' + tag + '" data-mce-resize="false" data-mce-placeholder="1" />';
+                title = editor.editorManager.i18n.translate( tag === 'more' ? '(more&hellip;)' : 'Page break' );
+                html = '<hr title="' + title + '" data-wp-more="' + tag + '" />';
 
                 // Most common case
-                if ( node.nodeName === 'BODY' || ( node.nodeName === 'P' && node.parentNode.nodeName === 'BODY' ) ) {
+                if ( node.nodeName === 'BODY' || ( node.parentNode.nodeName === 'BODY' && ( node.nodeName === 'P' ) ) ) {
                         editor.insertContent( html );
                         return;
                 }
 
                 // Get the top level parent node
                 parent = dom.getParent( node, function( found ) {
-                        if ( found.parentNode && found.parentNode.nodeName === 'BODY' ) {
-                                return true;
-                        }
-
-                        return false;
+                        return found.parentNode && found.parentNode.nodeName === 'BODY';
                 }, editor.getBody() );
 
                 if ( parent ) {
-                        if ( parent.nodeName === 'P' ) {
-                                parent.appendChild( dom.create( 'p', null, html ).firstChild );
-                        } else {
-                                dom.insertAfter( dom.create( 'p', null, html ), parent );
-                        }
-
+                        editor.$( parent ).after( html );
                         editor.nodeChanged();
                 }
         });

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

@@ -131 +131 @@
         padding: 0;
 }
 
-.mce-content-body img[data-wp-more] {
+hr[data-wp-more] {
+        background: none;
         border: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
-        width: 96%;
-        height: 16px;
+        width: 100%;
+        height: 22px;
+        font-size: 14px;
+        line-height: 20px;
         display: block;
-        margin: 15px auto 0;
+        margin: 20px 0;
         outline: 0;
-        cursor: default;
+        cursor: pointer;
+        position: relative;
 }
 
-.mce-content-body img[data-wp-more][data-mce-selected] {
-        outline: 1px dotted #888;
+hr[data-wp-more][data-mce-selected] {
+        outline: 1px dotted currentColor;
 }
 
-.mce-content-body img[data-wp-more="more"] {
-        background: transparent url( images/more.png ) repeat-y scroll center center;
+hr[data-wp-more]:after {
+        content: '';
+        position: absolute;
+        top: 20px;
+        border-bottom: 2px dashed currentColor;
+        width: 100%;
 }
 
-.mce-content-body img[data-wp-more="nextpage"] {
-    background: transparent url( images/pagebreak.png ) repeat-y scroll center center;
+hr[data-wp-more]:before {
+        content: attr( title );
+        position: absolute;
 }
 
 /* Gallery, audio, video placeholders */