TinyMCE:

- Use `data-wp-*` for processing and styling of the `more` and `nextpage` placeholders, keep the class names for back-compat. Makes them "immune" to "Clear formatting".
- Translate the titles of the placeholders.
Fixes #28772.
Built from https://develop.svn.wordpress.org/trunk@29317


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

wp-includes/class-wp-editor.php

@@ -944,6 +944,7 @@ final class _WP_Editors {
 			'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
 			'Distraction Free Writing' => __( 'Distraction Free Writing' ),
 		);
 

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

@@ -37,7 +37,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			}
 		});
 
-		if (  pixels && ! initial ) {
+		if ( pixels && ! initial ) {
 			// Resize iframe, not needed in iOS
 			if ( ! tinymce.Env.iOS ) {
 				iframe = editor.getContentAreaContainer().firstChild;
@@ -83,18 +83,24 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 
 	// Replace Read More/Next Page tags with images
 	editor.on( 'BeforeSetContent', function( e ) {
+		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="' + moretext + '" ' +
+					return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="more" data-wp-more-text="' + moretext + '" ' +
-						'class="wp-more-tag mce-wp-more" title="Read More..." data-mce-resize="false" data-mce-placeholder="1" />';
+						'class="wp-more-tag mce-wp-more" title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />';
 				});
 			}
 
 			if ( e.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
+				title = editor.editorManager.i18n.translate( 'Page break' );
+
 				e.content = e.content.replace( /<!--nextpage-->/g,
-					'<img src="' + tinymce.Env.transparentSrc + '" class="wp-more-tag mce-wp-nextpage" ' +
+					'<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="nextpage" class="wp-more-tag mce-wp-nextpage" ' +
-						'title="Page break" data-mce-resize="false" data-mce-placeholder="1" />' );
+						'title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />' );
 			}
 		}
 	});
@@ -105,16 +111,14 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			e.content = e.content.replace(/<img[^>]+>/g, function( image ) {
 				var match, moretext = '';
 
-				if ( image.indexOf('wp-more-tag') !== -1 ) {
+				if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) {
-					if ( image.indexOf('mce-wp-more') !== -1 ) {
+					if ( match = image.match( /data-wp-more-text="([^"]+)"/ ) ) {
-						if ( match = image.match( /data-wp-more="([^"]+)"/ ) ) {
+						moretext = match[1];
-							moretext = match[1];
-						}
-
-						image = '<!--more' + moretext + '-->';
-					} else if ( image.indexOf('mce-wp-nextpage') !== -1 ) {
-						image = '<!--nextpage-->';
 					}
+
+					image = '<!--more' + moretext + '-->';
+				} else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) {
+					image = '<!--nextpage-->';
 				}
 
 				return image;
@@ -123,16 +127,11 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	});
 
 	// Display the tag name instead of img in element path
-	editor.on( 'ResolveName', function( e ) {
+	editor.on( 'ResolveName', function( event ) {
-		var dom = editor.dom,
+		var attr;
-			target = e.target;
 
-		if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-more-tag' ) ) {
+		if ( event.target.nodeName === 'IMG' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) {
-			if ( dom.hasClass( target, 'mce-wp-more' ) ) {
+			event.name = attr;
-				e.name = 'more';
-			} else if ( dom.hasClass( target, 'mce-wp-nextpage' ) ) {
-				e.name = 'nextpage';
-			}
 		}
 	});
 
@@ -145,9 +144,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 
 		tag = tag || 'more';
 		classname += ' mce-wp-' + tag;
-		title = tag === 'more' ? 'More...' : 'Next Page';
+		title = tag === 'more' ? 'Read more...' : 'Next page';
+		title = editor.editorManager.i18n.translate( title );
 		html = '<img src="' + tinymce.Env.transparentSrc + '" title="' + title + '" class="' + classname + '" ' +
-			'data-mce-resize="false" data-mce-placeholder="1" />';
+			'data-wp-more="' + tag + '" data-mce-resize="false" data-mce-placeholder="1" />';
 
 		// Most common case
 		if ( node.nodeName === 'BODY' || ( node.nodeName === 'P' && node.parentNode.nodeName === 'BODY' ) ) {

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

@@ -122,8 +122,7 @@ img::selection {
 	padding: 0;
 }
 
-.mce-content-body img.mce-wp-nextpage,
+.mce-content-body img[data-wp-more] {
-.mce-content-body img.mce-wp-more {
 	border: 0;
 	-webkit-box-shadow: none;
 	box-shadow: none;
@@ -135,16 +134,15 @@ img::selection {
 	cursor: default;
 }
 
-.mce-content-body img.mce-wp-nextpage[data-mce-selected],
+.mce-content-body img[data-wp-more][data-mce-selected] {
-.mce-content-body img.mce-wp-more[data-mce-selected] {
 	outline: 1px dotted #888;
 }
 
-.mce-content-body img.mce-wp-more {
+.mce-content-body img[data-wp-more="more"] {
 	background: transparent url( images/more.png ) repeat-y scroll center center;
 }
 
-.mce-content-body img.mce-wp-nextpage {
+.mce-content-body img[data-wp-more="nextpage"] {
     background: transparent url( images/pagebreak.png ) repeat-y scroll center center;
 }