Project

General

Profile

Feature #1390

Show "Kitchen Sink" by Default in TinyMCE

Added by Matt Gold over 7 years ago. Updated about 7 years ago.

Status:
Resolved
Priority name:
Normal
Category name:
BuddyPress (misc)
Target version:
Start date:
2011-11-30
Due date:
% Done:

0%

Estimated time:

Description

The "show/hide the kitchen sink button" on the WP Dashboard TinyMCE menu is one of those things that drives me crazy when it comes to introducing new people to WordPress. How are new members supposed to know that they should click that button to reveal a very useful array of buttons below? I think that many people miss that. Is there any way to have the default be to show the "kitchen sink" rather than to hide it? I think that showing it would result in a more usable site experience for our members.

History

#1 Updated by Boone Gorges over 7 years ago

  • Status changed from New to Assigned
  • Target version changed from 1.3.1 to 1.4

It can probably be done, though it'll take some digging to figure it out.

I'm curious to hear what Chris has to say about the suggestion. The WP dashboard is already overwhelming. It seems to me like showing more buttons will only make things worse.

#2 Updated by Brian Foote over 7 years ago

Normally I'd agree that the last thing we need is more buttons anywhere in the Wordpress dashboard and toolbox. The difference here is that everything that comes up when you expand the kitchen sink is mostly formatting tools that everyone is familiar with from Word or the like anyways. I actually found it more frustrating that I couldn't locate things like text color and underline until I discovered the 'expand' button.

Just my two cents.

#3 Updated by Chris Stein over 7 years ago

I agree that in general the WP Dashboard is a bit overwhelming. But part of the overwhelmingness of it is not knowing what button to click on. The show/hide button in Tiny MCE is not a self explanatory icon.

Probably the best solution would be to reorder and rethink the placement of all of the icons (the links for youtube etc should probably be up with the other insert icons, paragraph seem too important to be on the second row, full screen should probably be placed separately, and why is the paragraph type in the second row?).

But that is also the most difficult. I'm OK with for now showing all of the icons (unless it is difficult enough that we might as well take a look at the order and those other things).

#4 Updated by Boone Gorges about 7 years ago

  • Assignee changed from Boone Gorges to Dominic Giglio

Dom, can you have a look at how this might be done? Might have to hook into TinyMCE's init actions - see http://teleogistic.net/2012/02/using-init-callbacks-with-tinymce-and-wp_editor-in-wordpress/

#5 Updated by Dominic Giglio about 7 years ago

I've been looking into customizing TinyMCE and while there are quite a few ways to control the editor as well as add new button functionality there doesn't seem to be a filter dedicated to "the kitchen sink".

http://codex.wordpress.org/TinyMCE#Customize_TinyMCE_with_Filters

However, upon further inspection in the browser I see that the kitchen sink button is basically a JS toggle that sets the inline style of the kitchen sink's container element (a table#content_toolbar2) to either display:none or display:block. It is rendered as display:none by default. So I think a simple solution to have it displayed for all our users would be to add a function to bp-custom.php that gets triggered on one of the admin page or post edit hooks that adds the following single line of JS to the page:

jQuery('#content_toolbar2').css('display', 'block')

Alternately it could be added to a site wide custom JS file's $(document).ready() function. Either way should work.

@boone - I'm interested to know if you think this is a hack or a fix? And, is there a site wide JS file that the project uses to get JS onto each page?

#6 Updated by Boone Gorges about 7 years ago

Dom, that sounds like a fine fix, but I'm guessing (from my prior experience with WP's TinyMCE editors) that initializing on $(document).ready() won't work - it'll be too early. The editor itself begins its initialization process on $(document).ready(), which means that it's not finished until sometime after that event; thus there will be no #content_toolbar2 element to act on. Please feel free to give it a try, though if it doesn't work, this is probably why, and you'll need to register a TinyMCE onInit() callback, as I describe in the blog post linked above.

If you just need to add JS, do it in /wp-content/themes/bp-nelo/_inc/js/cac-custom-js.js. If you need some PHP, probably bp-nelo's functions.php is the best place for something like this.

#7 Updated by Dominic Giglio about 7 years ago

I was a little hesitant to even mention the site wide document.read() option since we only want it loaded on pages with an editor anyways. I will experiment tonight with different hooks to see where best to get that JS loaded onto the page. I'm always weary of adding JS directly onto a page but sometimes there's just no other way to get done what you're trying to accomplish. I much prefer working in document.ready() and loading one or two support JS files in the footer.

#8 Updated by Boone Gorges about 7 years ago

Now that I think about it, I suppose the bp-nelo file is probably not an appropriate place, since it isn't enqueued in the Dashboard, and definitely is not enqueued on blogs other than the main blog. The "right" way to do this is to make a plugin (either a proper plugin that can be network activated, or a simple PHP file for wp-content/mu-plugins/ - the latter is probably better as it introduces less overhead) that hooks into 'admin_enqueue_scripts', and then loads a javascript file that you've stashed somewhere.

Don't worry about front-end editors (like the one in BuddyPress Docs) for now.

#10 Updated by Dominic Giglio about 7 years ago

I don't believe it! I have been digging through the code on this one for days now and I can't believe I missed an option specifically designed to disable/enable the kitchen sink! Well I've learned a lot about TinyMCE in the process which is what counts. I have some code now that changes which rows the buttons get assigned to. If we need more advanced customization of the button selection in the future I'll know how to do it. :-) I will (hopefully) get this code into bp-custom tonight.

#11 Updated by Matt Gold about 7 years ago

This is all kind of awesome .. . ..demonstrates the power of working on an open system!

I'm glad, Dom, that you don't feel that it was lost time.

#12 Updated by Dominic Giglio about 7 years ago

@boone I've added the solution you linked to above to the bottom of bp-custom.php. In my environment it now shows the kitchen sink by default on bp-nelo AND individual blog TinyMCE editors (when editing both posts and pages). As this is my first issue I haven't marked it as resolved because I would like you to confirm it works in your environment first.

Additionally, @chris mentioned in reply #3 above that we may want to customize the layout of the buttons. One of the things I learned researching this issue is how to include/exclude and reorder the buttons on the editor's toolbar. Let me know if this is something you'd like me to take on or if it needs to be opened in a new issue.

All available TinyMCE buttons are listed here: http://www.tinymce.com/wiki.php/Buttons/controls

#13 Updated by Chris Stein about 7 years ago

While it is fresh in your mind I think it's a good time to think about the reordering. I don't have time this week to focus on it but I could next week. If we do the reorder then I think we may also look at adding a message to users about that and the kitchen sink and then also maybe a blog post that can talk about the changes, tips on entering text in general and maybe recover full screen editing.

That can probably be a post in ground control and linked to/ added to the help. Coordinated of course with the timing on when we release these changes.

Good work on this. It will effect a lot of the users of the site.

I'll leave it up to you and Boone as to whether or not it should be a new ticket.

#14 Updated by Boone Gorges about 7 years ago

  • Status changed from Assigned to Resolved

I'll leave it up to you and Boone as to whether or not it should be a new ticket.

A separate ticket would be nice, as it may not fall under the 1.4 milestone, and in any case it's easier to gauge the roadmap when completed features are kept separate from incomplete ones.

#15 Updated by Matt Gold about 7 years ago

Just wanted to say that I think that this will improve the usability of the Commons significantly. Thanks to all of you for your work on this.

Also available in: Atom PDF