- You probably noticed, but @designsimply did two usability tests with the front-end editor. One. Two. Main problems:
- The “save” button seems to be hard to find.
- The featured image area needs to be more descriptive.
- Gallery previews have recently been added to trunk by @gcorne. I’ve been trying to implement the same plugin with the front-end editor, but since templates are used instead of the actual shortcode output, it will need to be adjusted. After all, we’re trying to make an accurate WYSIWYG editor. #52
- Currently edit links on the front-end link to the front-end editor, and edit links on the back-end to the back-end editor. It’d be better if there was a drop down in the admin bar to choose which editor you’d like to use (?), but how should both editors be described? ‘Edit in admin’ and ‘Edit not on the front-end’ might make sense to us, but probably not to the average user. #53
- The ‘meta modal‘ needs to improve. It’s a bit too clunky. It might be better to have a (collapsable) side bar with collapsed meta boxes (a bit like the customiser). Needs mock ups.
- We should experiment with an inline toolbar (one that pops up after selecting text). I think this would only be useful in addition to the main toolbar, since it cannot have all the tools the main toolbar has. Needs mock ups.
- Mobile: the editor works on small screens, but doesn’t have a TinyMCE toolbar. It should have one, or at least one with a few tools. Needs mock ups. #14
Tagged: front-end editor Toggle Comment Threads | Keyboard Shortcuts
Janneke Van Dorpe is discussing. Toggle Comments
- No trouble finding the Edit link inline, editing a title, or adding a paragraph
- Lots of difficulty saving
- Difficulty adding a new post
- Featured image area is not clear
- Back button results in lost edits
- Difficulty adding a link (back-end editor)
- Difficulty adding an image (back-end editor)
You can download the full video here: deaea9a3.mp4.
Points of Confusion
Difficulty saving (Length: 1:56)
Difficulty adding a new post on the front end (Length: 0:42)
Featured image area looks like a place you can “write something” (Length: 0:07)
Back button exits the editor without saving and without a prompt (Length: 0:06)
- Misses the “Edit Post” link in the toolbar completely but finds the inline “Edit” link
- Struggles to figure out how to save changes
- Secondary editor functions are hard to find
- Unable to find the tag icon in the toolbar
- No trouble adding or modifying content and links
This is a great first look, so I would recommend watching the entire video through. (Length: 8:45)
You can download the full video: c41ea9a3.mp4.
Not much to report this time since I’ve been away since the last meeting. Everything has been moved to GitHub, so new tickets should now be added there. I also added Grunt with jshint. @samuelsidler asked @designsimply to do some user tests. Exciting!
The next meeting will be Tuesday, 4 March 2014, 17:00 UTC, hopefully with a lot of updates to share.
- We decided to move the development to git and GitHub, hopefully that makes it easier for people to contribute! @kraftbj will port over the existing Trac tickets and then we’ll use GitHub as our bug tracker.
- Not many updates this week, I’ve only been working on post locking and a responsive admin bar.
It’s been three weeks since the last update, so I’ll quickly go over some of the things that I added to the plugin since then. @samuelsidler asked me to post a bit more regularly, so I’ll publish an update after every meeting on Tuesday. Here are the logs for last week’s meeting and today’s. The next meeting will be Tuesday, 18 February 2014, 17:00 UTC in #wordpress-ui.
- Changing the format of a post changes the relevant post and body classes, so you can now preview the theme’s styles for that format. I’d like to do something similar for categories and tags. See #2116.
- The page now refreshes when updating the post and the messages you get at the back-end will appear. Some of these should probably be changed to make sense on the front-end though. These messages fade out after 5 seconds. I’ve used the same styles that are used on the back-end, because they seems to stand out quite well, and it’s consistent.
- The location of the title is detected better, it should now work with most themes.
- In the ‘meta’ modal, all the meta boxes are now listed under each other to fill up empty space. I left the shortcuts in the sidebar though, and shortcuts to the category and tag section in the admin bar. While this layout works great on mobile, it’s still a bit empty on wide screens. One solution may be columns, another making the modal smaller in width.
- I try to give inline access to the modal based on commonly used classes/attributes/tags. E.g. an HTML time tag or published class links to the date and time section, a tag and category rel attribute link to their sections.
- TinyMCE now comes with tooltips and they’ve been added to the back-end, so I’ve added them to the front-end as well. Buttons outside TinyMCE also have tooltips to have some consistency.
- Autosave is now implemented (both to the browser and server), but this is done by modifying the core files and including them in the plugin. Autosave.js will need to be updated in core so it is flexible enough to use on the front-end.
- Going to the revisions browser from the front-end and restoring one will now bring you back to the front-end.
- Post locking.
- TinyMCE modals styled just like the media and meta modal. See also #26952 for core.
- A link plugin like the one on the back-end.
- A working adminbar for small screens.
If you’d like to help, you could join our Skype chat by adding jannekevandorpe and mentioning the Front-end Editor and taking a look at the tickets listed on the plugins Trac.
There’s been a lot of updates since the last post. You can now create posts and pages from the front-end. I’ve added some more TinyMCE tools and a meta modal that looks very similar to the media modal and holds meta boxes based on the ones on the back-end. Because they’re just a copy, the lay out still needs to be improved. It looks like this:
All bugs/tasks/ideas/suggestions are now centralised in the plugins Trac. At the moment it’s a fairly small list of the things that popped up in my mind, but hopefully you test the plugin, stumble upon a bug and report it and share all your thoughts. Make sure you’ve added the ticket to the wp-front-end-editor component. Sometimes it ends up as not-listed and I won’t notice it.
If you’re interested in contributing, this is also the place where you can find things to do.
If you’d like to join our Skype conversation, just add jannekevandorpe and mention the front-end editor.
- The plugin had a few updates recently: it now automatically embeds links that are supported by oEmbed, it generates a preview of galleries and captions, you can add/edit/remove the featured image and the toolbar moved into the admin bar. If you quickly want to see what that looks like, take a look at this video:
- We’ve had some good Skype conversations lately. If you’d like to join the group to help with the design and development, add jannekevandorpe (but do mention the front-end editor in your request).
- Normally the next meeting is Monday, but since a lot of people are busy around this time of the year, I’m going to cancel it. I should be around though, so feel free to come anyway. So now the next meeting is Monday, 6 January 2014, 16:00 UTC on the #wordpress-ui IRC channel.
- TinyMCE will most likely be updated to 4.0.x (the version on which the Front-end Editor depends) by 3.9. Here’s the ticket if anyone’s interested to test/help @azaozz: #24067.
There’s also a ticket regarding the new styles not being applied to the Media Modal on the front-end (as you can see in the video). Would be nice if there’s a patch by 3.8.1. #26677.
- So, what’s next and what can you do?
- Shortcode previews. Along with oEmbed previews, this is something that could be used for the back-end editor too. It might be good to split this from the main project, but it’s obvious that this is important to any project that tries to improve WYSIWYG. Creating previews of core shortcodes isn’t that difficult because we know exactly what they do. Adding support for all shortcodes could be a nightmare as they can do anything. It’s also quite difficult to detect if the shortcode is going to represent a block or inline element, currently the code just assumes it’s going to be block. One solution could be to make the shortcode define whether it’s compatible, but it’s nicer if things just work out of the box. Still, it’s better than nothing.
- Add things such as date and time, visibility, permalink, status and format next to the categories and tags, and think about where these should go. It might be easier and interesting to put them in a modal (similar to the media modal). The main things to keep in mind are accessibility, space and extendibility.
- Also note that switching between categories, tags, format and status actually requires the html to be updated. Not only could the theme have some CSS for the content based on these, it might also changes its lay out.
Creating/drafting posts through the front-end.
- Add support for CPTs.
- Responsiveness/mobile interface. Only keep the most basic TinyMCE tools.
- It would be nice if some people could continuously check the security of the plugin.
- Low priority, but autosave (and local storage), post locking and
I’ll briefly summarise some of the things we said in last week’s meeting, at WordCamp London and on Skype.
- We’d like to experiment with the toolbar (or part of it) popping up on selecting some text, even though it’s not easy to discover without clearly pointing it out to the user, and there’s no way all the options could fit in. It’s probably best to keep a fixed and permanent toolbar on top and develop a smaller inline toolbar next to it. We can then hide one of both to do some user testing. Some inspiration here, here and here.
- For now, it’s better to focus on the most basic TinyMCE functionality, keeping in mind that it should be extendible. Let’s also just focus on the most used WordPress options, things like Custom Fields, Discussion, Author and other custom meta boxes are low priority and maybe not even in scope.
- In the next version of the plugin, the toolbar will move up, like this:
- It now also depends on WordPress 3.8-alpha or higher, so you’ll need to update your install to test it.
- Another thing that needs to be done is, apart from experimenting with different editing interfaces and taming TinyMCE, designing and developing a way to preview oEmbeds and shortcodes/galleries and thinking about other ways to insert shortcodes other than manually inserting them. If we want a real WYSIWYG editor, having a preview for those is a must.
- A Skype group has been set up, so if you’d like to join, add jannekevandorpe and let me know.
- The next meeting will be Monday, 2 December, 16:00 UTC on the #wordpress-ui IRC channel.
We had a good chat today about the status of the front-end editor plugin and where it’s going. To recap, we talked about the following:
- The overall list of tasks is on a spreadsheet now. It will probably grow considerably over time. If you’re interested, comment here to sign up!
- The color scheme of the front-end editor was based on the MP6 customizer being black. The customizer (as has landed in core) has changed to white/grey, so we should update the plugin as well.
- On the color scheme topic, it may be possible to use color schemes for the editor in the future, but it’s not worth looking at until much later in the process.
- The plugin currently has an MP6 dependency, which is no longer needed given that MP6 has landed in core.
- The fade of the edit bars is a bit too much and should be removed, though this won’t exist when the toolbar moves up to the admin bar.
- In edit mode, things might look better if everything but the content fades out, but we need to determine how to do this right.
- The project is still in its early stages. It might be worth working up some other concepts before we get too far along in one direction.