Make WordPress Design

Tagged: front-end editor Toggle Comment Threads | Keyboard Shortcuts

  • Ella Iseulde Van Dorpe 3:57 am on September 1, 2014 Permalink
    Tags: front-end editor   

    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.

    • Achin 8:16 am on September 1, 2014 Permalink | Log in to Reply

      Hi Janneke,

      I would like to add my Idea link here from WordPress.org: https://wordpress.org/ideas/topic/wordpress-pagesite-layout-builder?replies=3#post-27109

      Idea – How about having a default WordPress feature for layout customizations which could be integrated with Twitter Bootstrap to set the width of the sections

      Advantage –
      1) user friendly – No need to code page templates for defining layouts. This makes it user friendly, so users who are not good with PHP could also modify,edit layout
      2) Dynamic plugged content – Widgets could be used to place content dynamically without having to code for content
      3) Saves a lot of turn around time
      4) Enhances default WP page editor

      Basically integration of Bootstrap and its layout builder (column and row arrangement) with the WordPress admin page editor 🙂

      • Avryl 3:48 pm on September 1, 2014 Permalink | Log in to Reply

        Hi Achin,

        Thanks for your interest. For now, I’d like to focus the project more on editing and creating posts rather than building a website, but we can certainly think and experiment with that in the future. A lot of people seem to want this, but I’m not sure how it would work. It looks like it’s the theme that would have to do most of the work to make it all work.

    • elham1388 8:31 am on September 7, 2014 Permalink | Log in to Reply

      your web page is really wonderful.. it’s pleasant to read …i’m working in the project in “http://www.npco.net “

    • cmsiran 6:14 am on September 16, 2014 Permalink | Log in to Reply

      you have beautifull website
      please check my website

    • davehventurecapital 5:04 pm on September 18, 2014 Permalink | Log in to Reply

      Removing the editor scrollbar has made it difficult to scroll through and edit content as in order to view the content above or below the editor, I have to scroll through all of the editor content. Conversely, to scroll through the editor content, I have to scroll the page down. I’m seeing no way to re-enable the editor scrollbar even though it is there on an older install of WordPress 3.9.2 on another server but not on a newer install of the same version on another server.

  • Ella Iseulde Van Dorpe 11:47 pm on June 17, 2014 Permalink
    Tags: front-end editor   

    Hi everyone!

    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.

  • Ella Iseulde Van Dorpe 8:08 pm on April 23, 2014 Permalink
    Tags: front-end editor   

    Front-end Editor Meeting 22 April 

    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! 🙂




    • radiomint 2:38 pm on May 15, 2014 Permalink | Log in to Reply

      Hi, I’m new to the Forum. and i need to suggest a feature request / a small implementation to the back end editor. It is small but would benefit a lot of people. 🙂 So how or where can i go and do that?

  • Ella Iseulde Van Dorpe 7:20 am on April 19, 2014 Permalink
    Tags: front-end editor   

    I’ve been away without internet for the last two… 

    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.

  • Ella Iseulde Van Dorpe 8:08 pm on March 10, 2014 Permalink
    Tags: front-end editor   

    Front-end Editor Meeting 4 March 

    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.

    • Avryl 10:46 pm on March 10, 2014 Permalink | Log in to Reply

      Thinking about it, giving the user the option to choose the editor for edit links would require the same for new post links… While drop downs could be added for those admin bar items as well, doing so would add a lot. Too much in my opinion. There must be a better way.

  • designsimply 11:09 pm on March 5, 2014 Permalink
    Tags: front-end editor,   

    WordPress Front-end Editor — Usability Test 2 

    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.

    • Janneke Van Dorpe 10:12 am on March 6, 2014 Permalink | Log in to Reply

      I’ll leave several comments on the different topics today, don’t have time to post them all at once. 🙂

      The onbeforeunload alert (when navigating away from the page) can only be done with a browser alert, it’s not possible to style it or have a save button there. What could be done is intercept when a user clicks on a link that will trigger this event and show a custom modal with a save button, but not when navigating away with the browser (close, previous, next, refresh etc.). But then in half of the cases you’ll still have the browser alert.

      • Janneke Van Dorpe 10:14 am on March 6, 2014 Permalink | Log in to Reply

        So “Prompt the user to save or cancel if the back button is clicked.” is technically not possible (as fas as I know). @azaozz?

        • Andrew Ozz 7:37 pm on March 6, 2014 Permalink | Log in to Reply

          Right. There is a “special” event that is used in these cases, however it always displays a browser provided dialog. In WebKit and IE it is possible to add some text (but not html) to that dialog. FIrefox doesn’t show the added text.

          So, the only thing possible is to trigger the dialog that asks the user to confirm leaving the page. We can add some text to it that will be shown in some browsers, but cannot add html, buttons, etc.

          It is possible to open a modal “under” that dialog so in case the user clicks “Stay on this page”, they will see our modal with Save and Cancel. Not sure if that’s the best UX though.

          • Janneke Van Dorpe 5:17 pm on March 10, 2014 Permalink | Log in to Reply

            Having two dialogs overlapping is not ideal… It looks like it’s going to stay like this, we should just find a way to highlight the save button.

    • Janneke Van Dorpe 10:50 pm on March 10, 2014 Permalink | Log in to Reply

      I still really think “Save” makes more sense for users than “Update” in the front end editor context. I think it would make it easier for them to find.

      Not sure if being in a front-end editor makes a difference. @melchoyce, chat do you think about this?

    • Janneke Van Dorpe 10:52 pm on March 10, 2014 Permalink | Log in to Reply

      Changing the colour of the update button would mean diverging from the main styles. I wouldn’t do that. Adding a pointer should do the job. Once the user knows where the button is, they won’t forget.

    • Janneke Van Dorpe 10:59 pm on March 10, 2014 Permalink | Log in to Reply

      Once the inline Edit link is clicked, replace it with links for Cancel and Save

      Do you mean the inline links in the theme? Unfortunately they need to stay about the same size to prevent breaking the theme.

  • designsimply 8:40 pm on February 27, 2014 Permalink
    Tags: front-end editor,   

    WordPress Front-end Editor — Usability Test 1 

    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.

    • Janneke Van Dorpe 8:43 pm on February 27, 2014 Permalink | Log in to Reply

      Thanks a lot for doing this! Watching everything right now.

    • Rouven Hurling 9:27 pm on February 27, 2014 Permalink | Log in to Reply

      we could maybe use the pointer, that is used for new features, on first activation of the front-end editor to highlight editing options and saves?

    • Janneke Van Dorpe 9:29 pm on February 27, 2014 Permalink | Log in to Reply

      • I guess having only one post on the home page of the website makes it look a bit like that’s the post’s page. So you don’t immediately get that you have to go to the post’s page to see the ‘edit’ link in the toolbar. But as we can see, if the theme adds edit links to posts, it’s easy to discover. I don’t think you should remove it, most themes seem to have it.
      • It’s pretty frustrating not to find the save button! Not sure how we can make this more obvious, but a dismissible pointer might help. Having a save button in the onbeforeunload alert is definitely a good suggestion. Actually the exact same thing is used on the back-end, so there’s room for improvement there as well.
      • Why do you think the secondary buttons are hard to find? I thought it was found quite quickly. On the back-end this would be equally hard; you’d have to toggle the kitchen sink.
      • Not sure how to make tagging easier. If they had gone over the toolbar buttons, they would have found it. They would probably have had the same reflex to add a hash in other environments.
      • I agree on the feature image area, but something needs to be there. A tooltip saying ‘Add featured image’ to inform the user would be helpful indeed.
      • While the post is saving, the update button is disabled. After the page is reloaded, a message shows up that the post has been saved successfully. I think that should be enough?
      • The button reads ‘Update’ because the one on the back-end reads the same. I think things like this should be the same on the front- and back-end.
      • The kitchen sink button is on the left because that way it stays in the same place and you don’t have to move your mouse to toggle back.
    • Janneke Van Dorpe 9:38 pm on February 27, 2014 Permalink | Log in to Reply

      I’d definitely like to see additional tests. If not now, then maybe in a few weeks as things get better. I’ll think about other tasks that might be interesting.

    • Janneke Van Dorpe 9:51 pm on February 27, 2014 Permalink | Log in to Reply

      Are you sure the link added in the media modal was not an image? Not sure why a preview shows up then. In any case, this would be a core bug.

      • Rouven Hurling 10:35 pm on February 27, 2014 Permalink | Log in to Reply

        the “link” added in the media modal looks like a base64 encoded image to me, not sure if core supports that.
        i guess the preview works because it justs sets the src-attribute to the given value and when wp tries to download the image it fails because its not an URL

        • Janneke Van Dorpe 11:40 pm on February 27, 2014 Permalink | Log in to Reply

          But WP doesn’t download the image, does it? It just puts the link in the src attribute. Would be interesting to have the input.

          • Rouven Hurling 11:55 pm on February 27, 2014 Permalink | Log in to Reply

            seems to be an issue with the plugin. if i try to insert a valid image via url i get the following error in console “Uncaught ReferenceError: QTags is not defined”
            while it works in the backend.

            also tried to add a base64 encoded image in backend and that didn’t work (he prepends the url when loading and gets a 414 request too large)

  • Ella Iseulde Van Dorpe 8:01 pm on February 26, 2014 Permalink
    Tags: front-end editor   

    Front-end Editor Meeting 25 February 

    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.

  • Ella Iseulde Van Dorpe 9:49 pm on February 18, 2014 Permalink
    Tags: front-end editor   

    Front-end Editor Meeting 18 February 

    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.

    Screen Shot 2014-02-18 at 16.29.14

  • Ella Iseulde Van Dorpe 11:56 pm on February 11, 2014 Permalink
    Tags: front-end editor   

    Front-end Editor Meeting 11 February 

    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.

    Screen Shot 2014-02-11 at 15.04.02

    Coming soon:

    • 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.

    • naderc 10:48 pm on February 16, 2014 Permalink | Log in to Reply

      The front end editor sounds very promising! What would be the best way to get involved, considering I have a wordpress account and published 2 plugins. Anything else I need? Can anyone join?

    • Avryl 11:12 pm on February 16, 2014 Permalink | Log in to Reply

      Of course! Everyone is welcome to help. Probably the best way to get involved is to join our Skype chat or attend the meeting this Tuesday (see post).

    • venkmanuk 10:45 pm on February 17, 2014 Permalink | Log in to Reply

      This continues to be some great work – thanks!

      Two things / ideas:

      It’s probably been mentioned but in case it hasn’t – it would be amazing if this also allowed the user to edit custom fields on the front end. In real-life most of the sites I build use ACF to customize the way content is displayed. Even if the functionality was as simple as text editing the custom fields – and not creating / managing them – it would be amazing.

      I have been allowing my colleagues to use this editor on a website and got some interesting feedback. The site uses a WP Edit button (edit_post_link) in the page to activate the editor, and in testing the user assumed clicking this again would save the page and close the editor. A fair assumption, i think. It would be great if clicking it a second time would save the front end edits and close the front end editor.

      Either of these possible?

      • Avryl 9:36 am on February 18, 2014 Permalink | Log in to Reply

        Custom fields are editable under ‘More options’, but not inline. Would be interesting, but right now there are more important things to focus on.

        Doesn’t that button say ‘Cancel’? I wouldn’t assume it would save the page. But it’s worth thinking about whether this should exit the editor or save the content.

    • venkmanuk 11:35 pm on February 18, 2014 Permalink | Log in to Reply

      well it does say cancel – if you haven’t hidden the text and replaced it with an editor icon. that was why I was looking for a in-editor class on the edit button too – to style it differently when it’s been clicked.

      it’s interesting because maybe we’re looking at this differently. I’m thinking a front-end editor could function as an inline editor with a supporting toolkit at the top there. Without support for standard tools within the page template itself it’s really dependent on using the toolbar only huh…

      • venkmanuk 11:39 pm on February 18, 2014 Permalink | Log in to Reply

        • Avryl 8:25 pm on February 20, 2014 Permalink | Log in to Reply

          Actually there are classes. You can use the body or past class for these things. Note that this class might change in the future though. Thanks for pointing this out, I’ll see if there’s a better way to avoid this problem.

          Could you elaborate on the second paragraph?

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar