Ticket #18690: 18690.3.patch.diff

File 18690.3.patch.diff, 20.0 KB (added by natebedortha, 20 months ago)

Includes CSS & JS, and @goldenapple's last patch (with one slight markup change)

Line 
1Index: wp-admin/includes/template.php
2===================================================================
3--- wp-admin/includes/template.php      (revision 18714)
4+++ wp-admin/includes/template.php      (working copy)
5@@ -1810,15 +1810,64 @@
6        <div id="contextual-help-wrap" class="hidden">
7        <?php
8        $contextual_help = '';
9-       if ( isset($_wp_contextual_help[$screen->id]) ) {
10+       if ( isset($_wp_contextual_help[$screen->id]) && is_array($_wp_contextual_help[$screen->id]) ) {
11+               $contextual_help .= '<div class="metabox-prefs">' . "\n";
12+               
13+               /*
14+                * Loop through ['contextual-help-tabs']
15+                *   - It's a nested array where $key=>$value >> $title=>$content
16+                * Has no output so can only loop the array once
17+                */
18+               $contextual_help_tabs = ''; // store looped content for later
19+               $contextual_help_panels = ''; // store looped content for later
20+
21+               $contextual_help_tabs_array = apply_filters( 'contextual_help_tabs', $_wp_contextual_help[$screen->id]['contextual-help-tabs']);
22+               $contextual_help_tabs_array = apply_filters( "contextual_help_tabs-{$screen->id}", $contextual_help_tabs_array);
23+               $contextual_help_links = apply_filters( 'contextual_help_links', $_wp_contextual_help[$screen->id]['contextual-help-links']);
24+               $contextual_help_links = apply_filters( "contextual-help-links-{$screen->id}", $contextual_help_links);
25+
26+               $tab_active = true;
27+
28+               foreach( $contextual_help_tabs_array as $tab_title => $tab_content ) {
29+                       $tabname_slug = sanitize_title($tab_title, '', 'save');
30+                       
31+                       $contextual_help_tabs .= '<li class="tab-' . $tabname_slug . ( ($tab_active) ? ' active' : '' ) . '">';
32+                       $contextual_help_tabs .= '<a href="#' . $tabname_slug . '">' . $tab_title . '</a>';
33+                       $contextual_help_tabs .= '</li>' ."\n";
34+                       
35+                       $contextual_help_panels .= '<div id="' . $tabname_slug . '" class="help-tab-content' . ( ($tab_active) ? ' active' : '' ) . '">';
36+                       $contextual_help_panels .= $tab_content;
37+                       $contextual_help_panels .= "</div>\n";
38+
39+                       $tab_active = false;
40+               }
41+
42+               
43+               // Start output from loop: Tabbed help content
44+               $contextual_help .= '<ul class="contextual-help-tabs">' . "\n";
45+               $contextual_help .= $contextual_help_tabs;
46+               $contextual_help .= '</ul>' ."\n";
47+               $contextual_help .= '<div class="contextual-help-tabs-wrap">' . "\n";
48+               $contextual_help .= $contextual_help_panels;
49+               $contextual_help .= "</div>\n";
50+               // END: Tabbed help content
51+               
52+               // Links to right of tabs
53+               $contextual_help .= '<div class="contextual-help-links">' . "\n";
54+               $contextual_help .= $contextual_help_links;
55+               $contextual_help .= "</div>\n";
56+               
57+               $contextual_help .= "</div>\n"; // end metabox
58+               
59+       } elseif ( isset($_wp_contextual_help[$screen->id]) ) {
60                $contextual_help .= '<div class="metabox-prefs">' . $_wp_contextual_help[$screen->id] . "</div>\n";
61        } else {
62                $contextual_help .= '<div class="metabox-prefs">';
63-               $default_help = __('<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>');
64+               $default_help  = __('<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>');
65                $default_help .= '<br />';
66                $default_help .= __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>');
67                $contextual_help .= apply_filters('default_contextual_help', $default_help);
68-               $contextual_help .= "</div>\n";
69+               $contextual_help .= '</div>' . "\n";
70        }
71 
72        echo apply_filters('contextual_help', $contextual_help, $screen->id, $screen);
73@@ -1831,10 +1880,17 @@
74 /**
75  * Add contextual help text for a page
76  *
77+ * The array $help takes the following format:
78+ *     array( 'contextual-help-tabs'   => array( $tab1_title => $tab1_value [, $tab2_title => $tab2_value, ...] ),
79+ *             'contextual-help-links' => $help_links_as_string )
80+ *
81+ * For backwards compatability, a string is also accepted.
82+ *
83  * @since 2.7.0
84  *
85- * @param string $screen The handle for the screen to add help to.  This is usually the hook name returned by the add_*_page() functions.
86- * @param string $help Arbitrary help text
87+ * @param string       $screen The handle for the screen to add help to.  This is usually the hook name returned by the add_*_page() functions.
88+ * @param array|string         $help   Creates tabs & links columns within help text in array.
89+ *
90  */
91 function add_contextual_help($screen, $help) {
92        global $_wp_contextual_help;
93@@ -2267,4 +2323,4 @@
94 //]]>
95 </script>
96 <?php
97-}
98\ No newline at end of file
99+}
100Index: wp-admin/js/common.dev.js
101===================================================================
102--- wp-admin/js/common.dev.js   (revision 18714)
103+++ wp-admin/js/common.dev.js   (working copy)
104@@ -238,7 +238,31 @@
105        }
106 };
107 
108+// help tabs
109+$('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
110+  var newTab;
111 
112+  e.preventDefault();
113+
114+  // don't do anything if the click is for the tab already showing.
115+  if ( $(this).is('.active a') )
116+    return false;
117+ 
118+  // tab triggers
119+  $('.contextual-help-tabs .active').removeClass('active');
120+  $(this).parent('li').addClass('active');
121+
122+  newTab = $( $(this).attr('href') ); 
123+
124+  //tabs
125+  $('.help-tab-content').not( newTab ).removeClass('active').hide();
126+  newTab.addClass('active').show();
127+ 
128+});
129+
130+// click the first contextual help tab (should happen when this screenMeta is opened)
131+$('.contextual-help-tabs a:first').click();
132+
133 $(document).ready( function() {
134        var lastClicked = false, checks, first, last, checked, dropdown,
135                pageInput = $('input.current-page'), currentPage = pageInput.val();
136Index: wp-admin/edit-form-advanced.php
137===================================================================
138--- wp-admin/edit-form-advanced.php     (revision 18714)
139+++ wp-admin/edit-form-advanced.php     (working copy)
140@@ -163,31 +163,42 @@
141 add_screen_option('layout_columns', array('max' => 2) );
142 
143 if ( 'post' == $post_type ) {
144-       add_contextual_help($current_screen,
145-       '<p>' . __('The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and drop, and can minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1- or 2-column layout for this screen.') . '</p>' .
146-       '<p>' . __('<strong>Title</strong> - Enter a title for your post. After you enter a title, you&#8217;ll see the permalink below, which you can edit.') . '</p>' .
147-       '<p>' . __('<strong>Post editor</strong> - Enter the text for your post. There are two modes of editing: Visual and HTML. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. Click the last icon in the row to get a second row of controls. The HTML mode allows you to enter raw HTML along with your post text. You can insert media files by clicking the icons above the post editor and following the directions. You can go the distraction-free writing screen, new in 3.2, via the Fullscreen icon in Visual mode (second to last in the top row) or the Fullscreen button in HTML mode (last in the row). Once there, you can make buttons visible by hovering over the top area. Exit Fullscreen back to the regular post editor.') . '</p>' .
148-       '<p>' . __('<strong>Publish</strong> - You can set the terms of publishing your post in the Publish box. For Status, Visibility, and Publish (immediately), click on the Edit link to reveal more options. Visibility includes options for password-protecting a post or making it stay at the top of your blog indefinitely (sticky). Publish (immediately) allows you to set a future or past date and time, so you can schedule a post to be published in the future or backdate a post.') . '</p>' .
149-       ( ( current_theme_supports( 'post-formats' ) && post_type_supports( 'post', 'post-formats' ) ) ? '<p>' . __( '<strong>Post Format</strong> - This designates how your theme will display a specific post. For example, you could have a <em>standard</em> blog post with a title and paragraphs, or a short <em>aside</em> that omits the title and contains a short text blurb. Please refer to the Codex for <a href="http://codex.wordpress.org/Post_Formats#Supported_Formats">descriptions of each post format</a>. Your theme could enable all or some of 10 possible formats.' ) . '</p>' : '' ) .
150-       '<p>' . __('<strong>Featured Image</strong> - This allows you to associate an image with your post without inserting it. This is usually useful only if your theme makes use of the featured image as a post thumbnail on the home page, a custom header, etc.') . '</p>' .
151-       '<p>' . __('<strong>Send Trackbacks</strong> - Trackbacks are a way to notify legacy blog systems that you&#8217;ve linked to them. Enter the URL(s) you want to send trackbacks. If you link to other WordPress sites they&#8217;ll be notified automatically using pingbacks, and this field is unnecessary.') . '</p>' .
152-       '<p>' . __('<strong>Discussion</strong> - You can turn comments and pings on or off, and if there are comments on the post, you can see them here and moderate them.') . '</p>' .
153-       '<p>' . sprintf(__('You can also create posts with the <a href="%s">Press This bookmarklet</a>.'), 'options-writing.php') . '</p>' .
154-       '<p><strong>' . __('For more information:') . '</strong></p>' .
155-       '<p>' . __('<a href="http://codex.wordpress.org/Posts_Add_New_Screen" target="_blank">Documentation on Writing and Editing Posts</a>') . '</p>' .
156-       '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
157-       );
158+       add_contextual_help($current_screen, array(
159+               'contextual-help-tabs' => array(
160+                       __('Customizing this display') =>
161+                               '<p>' . __('The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and drop, and can minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1- or 2-column layout for this screen.') . '</p>',
162+                       __('Title and post editor') =>
163+                               '<p>' . __('<strong>Title</strong> - Enter a title for your post. After you enter a title, you&#8217;ll see the permalink below, which you can edit.') . '</p>' .
164+                               '<p>' . __('<strong>Post editor</strong> - Enter the text for your post. There are two modes of editing: Visual and HTML. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. Click the last icon in the row to get a second row of controls. The HTML mode allows you to enter raw HTML along with your post text. You can insert media files by clicking the icons above the post editor and following the directions. You can go the distraction-free writing screen, new in 3.2, via the Fullscreen icon in Visual mode (second to last in the top row) or the Fullscreen button in HTML mode (last in the row). Once there, you can make buttons visible by hovering over the top area. Exit Fullscreen back to the regular post editor.') . '</p>',
165+                       __('Publish box') =>
166+                               '<p>' . __('<strong>Publish</strong> - You can set the terms of publishing your post in the Publish box. For Status, Visibility, and Publish (immediately), click on the Edit link to reveal more options. Visibility includes options for password-protecting a post or making it stay at the top of your blog indefinitely (sticky). Publish (immediately) allows you to set a future or past date and time, so you can schedule a post to be published in the future or backdate a post.') . '</p>' .
167+                               ( ( current_theme_supports( 'post-formats' ) && post_type_supports( 'post', 'post-formats' ) ) ? '<p>' . __( '<strong>Post Format</strong> - This designates how your theme will display a specific post. For example, you could have a <em>standard</em> blog post with a title and paragraphs, or a short <em>aside</em> that omits the title and contains a short text blurb. Please refer to the Codex for <a href="http://codex.wordpress.org/Post_Formats#Supported_Formats">descriptions of each post format</a>. Your theme could enable all or some of 10 possible formats.' ) . '</p>' : '' ) .
168+                               ( ( current_theme_supports( 'post-thumbnails' ) && post_type_supports( 'post', 'thumbnail' ) ) ? '<p>' . __('<strong>Featured Image</strong> - This allows you to associate an image with your post without inserting it. This is usually useful only if your theme makes use of the featured image as a post thumbnail on the home page, a custom header, etc.') . '</p>' : '' ),
169+                       __('Discussion Settings') =>
170+                               '<p>' . __('<strong>Send Trackbacks</strong> - Trackbacks are a way to notify legacy blog systems that you&#8217;ve linked to them. Enter the URL(s) you want to send trackbacks. If you link to other WordPress sites they&#8217;ll be notified automatically using pingbacks, and this field is unnecessary.') . '</p>' .
171+                               '<p>' . __('<strong>Discussion</strong> - You can turn comments and pings on or off, and if there are comments on the post, you can see them here and moderate them.') . '</p>'
172+               ), 'contextual-help-links' =>
173+                       '<p>' . sprintf(__('You can also create posts with the <a href="%s">Press This bookmarklet</a>.'), 'options-writing.php') . '</p>' .
174+                       '<p><strong>' . __('For more information:') . '</strong></p>' .
175+                       '<p>' . __('<a href="http://codex.wordpress.org/Posts_Add_New_Screen" target="_blank">Documentation on Writing and Editing Posts</a>') . '</p>' .
176+                       '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
177+       ) );
178 } elseif ( 'page' == $post_type ) {
179-       add_contextual_help($current_screen, '<p>' . __('Pages are similar to Posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest Pages under other Pages by making one the &#8220;Parent&#8221; of the other, creating a group of Pages.') . '</p>' .
180-       '<p>' . __('Creating a Page is very similar to creating a Post, and the screens can be customized in the same way using drag and drop, the Screen Options tab, and expanding/collapsing boxes as you choose. This screen also has the new in 3.2 distraction-free writing space, available in both the Visual and HTML modes via the Fullscreen buttons. The Page editor mostly works the same as the Post editor, but there are some Page-specific features in the Page Attributes box:') . '</p>' .
181-       '<p>' . __('<strong>Parent</strong> - You can arrange your pages in hierarchies. For example, you could have an &#8220;About&#8221; page that has &#8220;Life Story&#8221; and &#8220;My Dog&#8221; pages under it. There are no limits to how many levels you can nest pages.') . '</p>' .
182-       '<p>' . __('<strong>Template</strong> - Some themes have custom templates you can use for certain pages that might have additional features or custom layouts. If so, you&#8217;ll see them in this dropdown menu.') . '</p>' .
183-       '<p>' . __('<strong>Order</strong> - Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in this field.') . '</p>' .
184-       '<p><strong>' . __('For more information:') . '</strong></p>' .
185-       '<p>' . __('<a href="http://codex.wordpress.org/Pages_Add_New_Screen" target="_blank">Documentation on Adding New Pages</a>') . '</p>' .
186-       '<p>' . __('<a href="http://codex.wordpress.org/Pages_Screen#Editing_Individual_Pages" target="_blank">Documentation on Editing Pages</a>') . '</p>' .
187-       '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
188-       );
189+       add_contextual_help($current_screen, array(
190+               'contextual-help-tabs' => array(
191+                       __('About Pages') =>
192+                               '<p>' . __('Pages are similar to Posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest Pages under other Pages by making one the &#8220;Parent&#8221; of the other, creating a group of Pages.') . '</p>' .
193+                               '<p>' . __('Creating a Page is very similar to creating a Post, and the screens can be customized in the same way using drag and drop, the Screen Options tab, and expanding/collapsing boxes as you choose. This screen also has the new in 3.2 distraction-free writing space, available in both the Visual and HTML modes via the Fullscreen buttons. The Page editor mostly works the same as the Post editor, but there are some Page-specific features in the Page Attributes box:') . '</p>',
194+                       __('Page Attributes') =>
195+                               '<p>' . __('<strong>Parent</strong> - You can arrange your pages in hierarchies. For example, you could have an &#8220;About&#8221; page that has &#8220;Life Story&#8221; and &#8220;My Dog&#8221; pages under it. There are no limits to how many levels you can nest pages.') . '</p>' .
196+                               '<p>' . __('<strong>Template</strong> - Some themes have custom templates you can use for certain pages that might have additional features or custom layouts. If so, you&#8217;ll see them in this dropdown menu.') . '</p>' .
197+                               '<p>' . __('<strong>Order</strong> - Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in this field.') . '</p>'
198+               ), 'contextual-help-links' =>
199+                       '<p><strong>' . __('For more information:') . '</strong></p>' .
200+                       '<p>' . __('<a href="http://codex.wordpress.org/Pages_Add_New_Screen" target="_blank">Documentation on Adding New Pages</a>') . '</p>' .
201+                       '<p>' . __('<a href="http://codex.wordpress.org/Pages_Screen#Editing_Individual_Pages" target="_blank">Documentation on Editing Pages</a>') . '</p>' .
202+                       '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
203+       ));
204 }
205 
206 require_once('./admin-header.php');
207Index: wp-admin/css/wp-admin.dev.css
208===================================================================
209--- wp-admin/css/wp-admin.dev.css       (revision 18714)
210+++ wp-admin/css/wp-admin.dev.css       (working copy)
211@@ -15,6 +15,7 @@
212  6.0 - Admin Header
213        6.1 - Favorites Menu
214        6.2 - Screen Options Tabs
215+       6.3 - Help Menu
216  7.0 - Main Navigation
217  8.0 - Layout Blocks
218  9.0 - Dashboard
219@@ -1608,10 +1609,6 @@
220        visibility: hidden;
221 }
222 
223-#contextual-help-wrap li {
224-       list-style-type: disc;
225-       margin-left: 18px;
226-}
227 .toggle-arrow {
228        background-repeat: no-repeat;
229        background-position: top left;
230@@ -1645,7 +1642,104 @@
231        display: none;
232 }
233 
234+/*------------------------------------------------------------------------------
235+  6.3 - Help Menu
236+------------------------------------------------------------------------------*/
237 
238+#contextual-help-wrap {
239+  position: relative;
240+  padding: 0;
241+  overflow: hidden;
242+}
243+
244+#contextual-help-wrap > .metabox-prefs {
245+  padding: 8px 20px 12px;
246+  max-height: 200px;
247+  overflow: auto;
248+}
249+
250+.contextual-help-tabs {
251+  position: absolute;
252+  top: 0;
253+  left: 0;
254+  bottom: 0;
255+  width: 150px;
256+  max-height: 220px;
257+  margin: 0;
258+  overflow: auto;
259+ 
260+  border-right: 1px solid #dfdfdf;
261+}
262+
263+.contextual-help-tabs li {
264+  margin-bottom: 0;
265+
266+  list-style-type: none;
267+}
268+
269+.contextual-help-tabs a {
270+  display: block;
271+  padding: 5px 5px 5px 12px;
272+ 
273+  font-weight: bold;
274+  line-height: 18px;
275+  text-decoration: none;
276+ 
277+  border-width: 1px 0;
278+  border-style: solid;
279+  border-top-color: #f9f9f9;
280+  border-bottom-color: #dfdfdf;
281+}
282+
283+.contextual-help-tabs a:hover {
284+  background-color: #EAF2FA;
285+  color: #333;
286+}
287+
288+.contextual-help-tabs .active a,
289+.contextual-help-tabs .active a:hover {
290+  background: #ffffff;
291+  color: #000000;
292+}
293+
294+.contextual-help-tabs-wrap {
295+  position: relative;
296+  display: block;
297+  margin: 0 152px 0 150px;
298+  height: 188px;
299+  overflow: auto;
300+}
301+
302+.help-tab-content {
303+  display: none;
304+  margin: 0 22px 12px 0;
305+  padding-right: 20px;
306+}
307+
308+.help-tab-content.active {
309+  display: block;
310+}
311+
312+.help-tab-content li {
313+       list-style-type: disc;
314+       margin-left: 18px;
315+}
316+
317+.contextual-help-links {
318+  position: absolute;
319+  width: 150px;
320+  top: 0;
321+  right: 0;
322+  bottom: 0;
323+  padding: 0 8px 0 12px;
324+  overflow: auto;
325+ 
326+  background-color: #ffffff;
327+ 
328+  border-left: 1px solid #dfdfdf;
329+}
330+
331+
332 /*------------------------------------------------------------------------------
333   7.0 - Main Navigation (Left Menu)
334 ------------------------------------------------------------------------------*/