Ticket #29989: 29989.diff

src/wp-admin/css/edit.css

@@ -1287 +1287 @@
         transition-timing-function: ease-in-out;
 }
 
+.button-split-wrap {
+        display: none;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 
@@ -1574 +1578 @@
                 padding: 0 10px 0 10px;
         }
 }
+
+@media only screen and (max-width: 480px) {
+
+        #edit-slug-box {
+                padding: 0;
+                min-height: 0;
+        }
+
+        .edit-slug-box:after { /* clearfix */
+                content: "";
+                display: table;
+                clear: both;
+        }
+
+        .edit-slug-box strong,
+        #sample-permalink {
+                display: none;
+        }
+
+        .edit-slug-buttons,
+        .view-post-btn {
+                vertical-align: middle;
+        }
+
+        .edit-slug-buttons {
+                float: left;
+        }
+
+        .view-post-btn {
+                float: right;
+        }
+
+        .edit-slug-buttons .edit-slug.button {
+                margin-bottom: 0;
+        }
+
+        #wp-content-editor-tools {
+                padding-top: 0;
+        }
+
+        .wp-media-buttons {
+                margin: 1em 0;
+        }
+
+        .wp-media-buttons .button {
+                display: block;
+                text-align: center;
+        }
+
+        .button-split-wrap {
+                display: block;
+        }
+
+        #insert-media-button {
+                display: none;
+        }
+
+        .button-split-wrap:after {
+                content: "";
+                display: table;
+                clear: both;
+        }
+
+        .button-split-wrap .button {
+                display: inline-block;
+                line-height: 2em;
+        }
+
+        .button.button-split-main {
+                float: left;
+                width: 85%;
+                border-right: none;
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+        }
+
+        .button.button-split-side {
+                float: right;
+                width: 15%;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+        }
+
+        .button-split-side:before {
+                content: '\f140';
+                display: inline-block;
+                position: relative;
+                top: 0.2em;
+                font-family: 'dashicons';
+                font-size: 20px;
+                line-height: 0.5em;
+                color: #888;
+                speak: none;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+        }
+}
+ No newline at end of file

src/wp-admin/edit-form-advanced.php

@@ -582 +582 @@
 if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) {
         $has_sample_permalink = $sample_permalink_html && 'auto-draft' != $post->post_status;
 ?>
-        <div id="edit-slug-box" class="hide-if-no-js">
+        <div id="edit-slug-box" class="edit-slug-box hide-if-no-js">
         <?php
                 if ( $has_sample_permalink )
                         echo $sample_permalink_html;

src/wp-admin/includes/post.php

@@ -1324 +1324 @@
                 $return =  '<strong>' . __( 'Permalink:' ) . "</strong>\n";
                 $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
                 $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
-                $return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button button-small hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __( 'Edit' ) . "</a></span>\n";
+                $return .= '<span id="edit-slug-buttons" class="edit-slug-buttons"><a href="#post_name" class="edit-slug button button-small button-link hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __( 'Edit' ) . "</a></span>\n";
                 $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
         }
 
@@ -1332 +1332 @@
                 if ( 'draft' == $post->post_status || 'pending' == $post->post_status ) {
                         $draft_link = set_url_scheme( get_permalink( $post->ID ) );
                         $preview_link = get_preview_post_link( $post, array(), $draft_link );
-                        $return .= "<span id='view-post-btn'><a href='" . esc_url( $preview_link ) . "' class='button button-small' target='wp-preview-{$post->ID}'>$view_post</a></span>\n";
+                        $return .= '<span id="view-post-btn" class="view-post-btn"><a href="' . esc_url( $preview_link ) . '" class="button button-small button-link" target="wp-preview-' . $post->ID . '">' . $view_post . "</a></span>\n";
                 } else {
                         if ( 'publish' === $post->post_status ) {
                                 // View Post button should always go to the saved permalink.

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

@@ -219 +219 @@
                                  *
                                  * @param string $editor_id Unique editor identifier, e.g. 'content'.
                                  */
-                                do_action( 'media_buttons', $editor_id );
-                                echo "</div>\n";
+                                do_action( 'media_buttons', $editor_id ); ?>
+                                <div class="button-split-wrap">
+                                        <button class="button button-split-main insert-media add_media" data-editor="content" title="Add Media">
+                                                <span class="wp-media-buttons-icon"></span> Add Media
+                                        </button>
+                                        <button class="button button-split-side"></button>
+                                </div>
+                                <?php echo "</div>\n";
                         }
 
                         echo '<div class="wp-editor-tabs">' . $buttons . "</div>\n";

src/wp-includes/css/editor.css

@@ -1709 +1709 @@
         }
 }
 
+@media screen and ( max-width: 480px ) {
+        .wp-media-buttons,
+        .wp-editor-tabs {
+                float: none;
+        }
+
+        .wp-media-buttons .button {
+                margin-right: 0;
+        }
+
+        button.wp-switch-editor {
+                display: block;
+                width: 42.3%;
+                margin: 0;
+                padding: 2.4% 3.5%;
+        }
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */