Ticket #42587: Css_classes_field_for_wp_link__Consider_it_s_really_helpfull_for_developers.patch

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

@@ -1704 +1704 @@
                                         <label><span><?php _e( 'Link Text' ); ?></span>
                                         <input id="wp-link-text" type="text" /></label>
                                 </div>
+                <div class="wp-link-text-field">
+                    <label><span><?php _e( 'CSS Class' ); ?></span>
+                        <input id="wp-link-classes" type="text" /></label>
+                </div>
                                 <div class="link-target">
                                         <label><span></span>
                                         <input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>

trunk/src/wp-includes/css/editor.css

@@ -1629 +1629 @@
         }
 
         #wp-link-wrap.has-text-field .query-results {
-                top: 235px;
+                top: 270px;
         }
 
         #link-selector {

trunk/src/wp-includes/js/wplink.js

@@ -30 +30 @@
 
                         // Input
                         inputs.text = $( '#wp-link-text' );
+            inputs.classes = $( '#wp-link-classes' );
                         inputs.url = $( '#wp-link-url' );
                         inputs.nonce = $( '#_ajax_linking_nonce' );
                         inputs.openInNewTab = $( '#wp-link-target' );
@@ -221 +222 @@
                 },
 
                 mceRefresh: function( searchStr, text ) {
-                        var linkText, href,
+                        var linkText, href, classes,
                                 linkNode = getLink(),
                                 onlyText = this.hasSelectedText( linkNode );
 
@@ -229 +230 @@
                                 linkText = linkNode.textContent || linkNode.innerText;
                                 href = editor.dom.getAttrib( linkNode, 'href' );
 
+                classes = editor.dom.getAttrib( linkNode, 'class' );
+                inputs.classes.val(classes);
+
                                 if ( ! $.trim( linkText ) ) {
                                         linkText = text || '';
                                 }
@@ -304 +308 @@
 
                         return {
                                 href: $.trim( inputs.url.val() ),
-                                target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : null
+                                target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : null,
+                class: $.trim( inputs.classes.val() )
                         };
                 },
 
                 buildHtml: function(attrs) {
-                        var html = '<a href="' + attrs.href + '"';
+            var html = '<a href="' + attrs.href + '" class="'+attrs.class+'"';
 
                         if ( attrs.target ) {
                                 html += ' rel="noopener" target="' + attrs.target + '"';