Front-end Editor Meeting 20 January

Screen Shot 2014-01-20 at 23.18.25

With @avryl (me), @melchoyce, @helen, @samuelsidler, @gcorne, @obenland, @azaozz and @ubernaut. (Log.)

We changed the meeting time to Tuesdays 17:00 UTC since that’s going to be much easier for some of us. Next meeting is Tuesday, 28 January 2014, 17:00 UTC in #wordpress-ui.

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 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 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:

Screen Shot 2014-01-20 at 23.00.50

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

#front-end-editor

Front-end Editor: Quick Christmas Update

  • 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 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. 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?
    • TinyMCEThis toolbar should also move into the admin bar. I wonder whether we should keep the default APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., or completely create a new one that fits the admin bar’s API. There was also talk about creating an inline toolbar with some basic tools, but it’s probably best to develop this next to the one in the admin bar and show/hide them to test which one scores best in terms of user experience.
    • 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. 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 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.. Creating previews of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), space and extendibility.
    • Also note that switching between categories, tags, format and status actually requires the 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. to be updated. Not only could the theme have some CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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 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.
    • Low priority, but autosave (and local storage), post locking and expired sessions.

#front-end-editor

Front-end Editor Update

I’ll briefly summarise some of the things we said in last week’s meeting, at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. 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 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. boxes are low priority and maybe not even in scope.
  • In the next version of 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, the toolbar will move up, like this: Screen Shot 2013-11-18 at 17.06.14
  • 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 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, 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.

#front-end-editor

Front-end Editor Meeting Recap (November 11)

Attendees: @avryl, @helen, @melchoyce, @samuelsidler, @shaunandrews, @ubernaut

We had a good chat today about the status of the front-end editor 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 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 customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. being black. The customizer (as has landed in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.) 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.

Next steps:

  • @avryl to remove the MP6 dependency, add the wordpressdotorg author to the plugin, and fix the permalink issue. Done.
  • @shaunandrews will explore some other concepts.
  • Setup a Skype group for those interested in contributing.
  • The meeting time will change to Mondays at 16:00 UTC going forward.

#front-end-editor

Front-end Editor #2

I apologise for disappearing like that, but here’s a small update for the front-end editor!
Just as a reminder, the link to the previous post, the plugin and the GitHub repo.

We need your help!

Here’s a list of some of the things that need to be done. Currently it’s just a draft and it will probably expand over time. I’ll start tackling them one by one, but if you’d like to take one of them, or if you have suggestions, let me know. Also feel free to fork 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, transform it with your thoughts and share the results!

There will be a meeting Monday, 11 November, 16:00 UTC on the WordPress UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. IRC channel, and I’ll definitely be there. If you’re interested, please join! Or leave a comment if you can’t make it.

I’ll try to publish a post every week with the progress we’ve made.

#front-end-editor

Front-end Editor

This is the first Front-end Editor post (see Inline Editing Front-end Editor on the Features as Plugins Tracking page).

If you haven’t heard about it before, you should definitely take a look at the overview, where you can read about the problems we’re trying to solve and where we’ll keep all the information.

A prototype is currently in development, it can be found in the plugin directory and on GitHub as a mirror.

Here are a few screenshots:

fee-1

Editing mode

fee-2

TinyMCE 4.x

fee-3

Tagging

fee-4

Distraction free writing?

fee-5

Post updated

fee-6

Responsive

Of course this is just one approach. Another could be @scribu’s Front-end Editor.

Excited? Get involved!

We’d really like to hear (and see) your thoughts! Whether it’s feedback to the current prototype, or ideas, examples of how other platforms implement front-end editing, wireframes or even working prototypes – everything is welcome.

We’re still looking for more people to join us: developers, designers, users… If you’re interested, please leave a comment.

Our weekly IRC chats are on Thursdays, 20:00 UTC. The next one will be on September 19 20:00 UTC.

#front-end-editor