The next Front end Editor meeting will be…

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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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, GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and these P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. posts. As soon as WordPress 4.0 is released, I’ll releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. a 1.0 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. and publish a post about all the changes.

#front-end-editor

Hi everyone There haven’t been any meetings for…

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.

#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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party now loads the TinyMCE scripts from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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! 🙂

fee-2014-04-23

 

 

#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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party a bit for 3.9 and remove 3.8 compatibility so it’s easier to work with.

#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 imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. area needs to be more descriptive.
  • Gallery previews have recently been added to trunk by @gcorne. I’ve been trying to implement the same pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party with the front-end editor, but since templates are used instead of the actual shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. output, it will need to be adjusted. After all, we’re trying to make an accurate WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. 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 ‘metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. 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.

#front-end-editor

WordPress Front-end Editor — Usability Test 2

I did a usability test on the WordPress Front-end Editor 0.8.5 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party with the Twenty Thirteen theme on WordPress r27243.

Summary

  • No trouble finding the Edit link inline, editing a title, or adding a paragraph
  • Lots of difficulty saving
  • Difficulty adding a new post
  • Featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. 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.

#front-end-editor, #usability-testing-2

WordPress Front-end Editor — Usability Test 1

I did a usability test on the WordPress Front-end Editor 0.8.4 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party with the Twenty Twelve theme on WordPress r27162.

Summary

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

#front-end-editor, #usability-testing-2

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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, 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.

#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 TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets and then we’ll use GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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

#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 ‘metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.’ modal, all the meta boxes are now listed under each other to fill up empty space. I left the shortcuts in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. though, and shortcuts to the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. 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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. files and including them in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. Autosave.js will need to be updated in core so it is flexible enough to use on the front-end.
  • Going to the revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. 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.

#front-end-editor