Update: Further development and discussion will be on GitHub. You can install the plugin through the WordPress.org.
The next Front-end Editor meeting will be September 2, 2014 17:00 UTC! Take a look at the project on GitHub to get a good idea of what current state is. There are quite a few big changes. It only works with WordPress 4.0 and the plugin in the .org repo is not up-to-date. If you’d like to get involved, make sure to attend. I’m not going to continue the Skype group, we’ll just use IRC, GitHub and these P2 posts. As soon as WordPress 4.0 is released, I’ll release a 1.0 beta and publish a post about all the changes.
There haven’t been any meetings for the front-end editor in a while, and since I’m working on the GSoC project right now I won’t actively hold any meetings until that’s finished. If anyone would like discuss something or work on the project though, feel free to continue them. Most of the time I’ll be in #wordpress-ui too. (My username is avryl.)
A lot of things that I’m working on can also be used for the front-end editor, so I might merge in some things along the way.
Yesterday we had a quiet meeting, so there’s not much to report.
I’ve removed compatibility with WordPress 3.8 so it’s easier to develop, and the plugin now loads the TinyMCE scripts from core, which should make the editor load faster. I also restyled the admin bar used in the editor so that it looks like the back-end editor. That way the buttons have styles for every state, and it’s hopefully easier to distinguish read and writing mode.
More updates next week! 🙂
I’ve been away without internet for the last two weeks, but now I’m back, so the next front-end editor meeting will be Tuesday, 22 April 2014, 17:00 UTC. In the meantime I’ll update the plugin a bit for 3.9 and remove 3.8 compatibility so it’s easier to work with.
With @avryl (me), @azaozz, @hugobaeta, @kraftbj, @melchoyce, @mrroundhill, @rhurling, @samuelsidler, @ubernaut. Log.
Links: Front-end Editor plugin, GitHub.
- 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
The next meeting is tomorrow, 11 March 2014, 17:00 UTC in #wordpress-ui.
I did a usability test on the WordPress Front-end Editor 0.8.5 plugin with the Twenty Thirteen theme on WordPress r27243.
- 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)
See more highlight reels after the jump.
I did a usability test on the WordPress Front-end Editor 0.8.4 plugin with the Twenty Twelve theme on WordPress r27162.
- 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.
See highlight reels after the jump.
With @avryl (me), @kraftbj, @samuelsidler, @ubernaut. Log.
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.
With @avryl (me), @kraftbj, @samuelsidler, @melchoyce and @ubernaut. Log.
Download the WordPress Front-end Editor plugin.
- 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.