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?
- TinyMCE. ~~This 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

@ubernaut 10:24 pm on December 26, 2013

this is looking great!
Paal Joachim Romdahl 10:52 pm on December 26, 2013

Very nice!
Anonymous User 3:20 am on December 27, 2013

Absolutely gorgeous!

Would 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. field support be tied to the APIs of the metamorphosis work?
Anonymous User 5:46 pm on December 27, 2013

It’s really working well now. It has come a long way since the project started and, as it matures further, I would love to see 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 being added to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. someday. 🙂
Lachlan MacPherson 2:21 am on December 28, 2013

Great work! This is a fantastic addition and will make a big difference to WordPress. Here hoping it makes it to 3.9 🙂
Weston Ruter 10:56 pm on December 28, 2013

Regarding 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, this is an analogous problem we’ve wrestled with for WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. 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.. Specifically, themes and widgets need to opt-in for whether they support postMessage (non-refresh) updates to the Customizer preview. Widget Customizer has built-in support for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-bundled themes and widgets, but others must opt-in as we don’t know if a theme’s 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. has dynamic positioning of widgets, or a widget has dynamic initialization via JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. See full writeup: https://wordpress.org/plugins/widget-customizer/other_notes/#Live-Previews
- Avryl 9:59 am on December 30, 2013
  
  Yeah, really annoying… It be awesome if there’s a way to make these things work out of the box. But at least you have a refresh fallback!
brashell 8:57 am on December 30, 2013

You know how the [caption] tag for when you insert an image with a caption you see then see the image and the caption beneath it inside the editor. What about using the same concept?
- brashell 8:58 am on December 30, 2013
  
  caption tag / 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. [caption]
  - brashell 8:59 am on December 30, 2013
    
    Also I would like to recommend that you add a drop down under the edit button to edit in the backend. Also maybe something in the settings to chooses if you edit in the front or back by default.
- Avryl 9:56 am on December 30, 2013
  
  I’m not sure what you mean… Captions are converted?
  
  I’d not use a drop down, but a button in both editors to switch. And yeah, a setting like that would be nice!
  - brashell 5:00 am on January 7, 2014
    
    I don’t know why I wasn’t notified of a reply… How can I send you some screenshots of what I mean? It filters out everything I write here so I can’t post it either.
    - brashell 5:10 am on January 7, 2014
      
      http://edutasc.com/blog/shortcode-in-editor-parse-example/ Here, this is what I am talking about
      - Avryl 9:30 am on January 7, 2014
        
        Yeah, so caption should be converted when using the media manager to insert them. They don’t convert yet if you’re just pasting them…
      - brashell 9:59 pm on January 7, 2014
        
        What about using javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. to replace the short code with a graphic preview?
      - Avryl 10:05 pm on January 7, 2014
        
        We’re working on it, but it’s tricky as a 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. can do anything.
      - brashell 10:06 pm on January 7, 2014
        
        Here is an example of what I mean, http://www.wpsites.co.uk/435-replacing-inserted-shortcodes-in-tinymce-with-a-graphic.php I think that 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 developers could provide an image when writing the short code. So it would eliminate the issues of short codes that do something quite different.
      - Avryl 10:23 pm on January 7, 2014
        
        Hm, I don’t really like that. A 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. can stand for something from a few inline words to a gallery 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.. How do you replace that with a relevant image? You can’t, unless there’s an image for every single shortcode. You can just as well replace it with a live preview. That’s not the problem.
        
        The main problem is that you don’t know whether the shortcode represents an inline or block element.
venkmanuk 8:46 pm on January 2, 2014

This is looking great.. good workin! I have a small idea/request – I’ve implemented this using an icon for the ‘edit_post_link’ link – but need to change the icon to show we are in the edit mode ( don’t like the ‘cancel’ message but that’s another issue ) .. it would be great if when in front-end editor mode we could have an editor_open css class added to the body or the edit_post_link.
- Avryl 8:50 pm on January 2, 2014
  
  Sure!