Make WordPress Core

Tagged: editor Toggle Comment Threads | Keyboard Shortcuts

  • Ella Iseulde Van Dorpe 8:54 am on August 1, 2015 Permalink |
    Tags: , , editor   

    Editor Enhancements in 4.3 

    Text Patterns

    We added a small set of text patterns, or text shortcuts if you will. These will hopefully keep you focussed better on your writing and save you some time. :)

    Typing *  or -  will automatically give you a proper HTML list right away. Same for 1.  or  1) , but then ordered. Not your intention? Pressing backspace will undo this change. You can also use the undo button, ctrl/cmd+z or esc.

    Starting your paragraph with two to six number signs # will convert that paragraph to a heading. Similarly the greater-than symbol > will convert the paragraph to a blockquote.

    We’re planning to add some more next release, and a way for plugins to extend this.

    Here’s a demo video @boren made.

    Inline Link Toolbar

    This toolbar will show up when you put your cursor in a link. You’ll now be able to see a short version of the URL without having to open the link modal all the time. Clicking it will open the page that it links to in a new browser tab. If you wanted to do this before, you had to open the link modal and copy paste the URL in a new browser tab yourself.

    It also comes with an edit and remove button. We hope to move the editing experience inline next release as well.

    Inline link toolbar

    • Bjørn Johansen 8:25 am on August 5, 2015 Permalink | Log in to Reply

      I think this is pretty sweet.

      However, in some locales, this will at one point cause an issue when someone tries to start a paragraph with a date that is the first day of a month. At least here in Norway we write dates as e.g. “1. september” where the dot means “1st”.

      • Bjørn Johansen 8:28 am on August 5, 2015 Permalink | Log in to Reply

        Sorry for commenting before thinking. This is where the undo functionality becomes very handy.

        • John Blackbourn 1:38 pm on August 5, 2015 Permalink | Log in to Reply

          Valid point, Bjørn. Hopefully the combination of being able to press backspace, undo, esc, or cmd/ctrl+z will mean that anyone who does end up with an unexpected list, blockquote, etc will be able to back out of it one way or another.

    • Fernando Tellado 3:52 pm on August 5, 2015 Permalink | Log in to Reply

      I’ve found a bug with links. When you try to change an image link inserted in the editor to another one link from the chain (link) icon in the editor the image disappear. I think this is a bug related to the new inline link editor ’cause it has appeared after its introduction

    • Lara Littlefield 2:56 pm on August 10, 2015 Permalink | Log in to Reply

      I am so excited about these editor ✨ enhancements. This is a huge help for mobile and alternate device/UI composing and editing.

    • Jeff Chandler 9:32 pm on August 17, 2015 Permalink | Log in to Reply

      Why is this video not embeddable/shareable?

    • frameitsam 4:54 pm on August 22, 2015 Permalink | Log in to Reply

      This is all good and well, but what happened to the “edit” and “remove” buttons when you select an image in the editor? These handy functions seem to have disabled the image editing functions.

  • Ella Iseulde Van Dorpe 9:26 pm on July 29, 2015 Permalink |
    Tags: , , editor   

    Old Distraction Free Writing Code Removed in 4.3 

    This release we removed all old DFW code, which hasn’t been used in core since 4.1. We left it in core for two releases so plugin authors had the time to update. If it is essential to your plugin, the files in 4.2 can still be reused and improved. See [32677].

  • Ella Iseulde Van Dorpe 1:17 pm on July 23, 2015 Permalink |
    Tags: , , editor   

    Word/character count updates in 4.3 

    Here are several adjustments we did:

    • Instead of updating on enter/return, it will now refresh when you stop typing.
    • For word count, it will exclude a lot more characters that shouldn’t be counted as words.
    • For character count, we no longer exclude any of these characters. This means that numbers and common western punctuation are no longer excluded compared to 4.2. Emoji and other astral characters are now counted as one character instead of two.
    • We added a new type all, in addition to words and characters, that will count characters including spaces. This seemed necessary for Japanese and maybe other languages. Edit: this is now character_including_spaces and character_excluding_spaces.
    • Shortcodes and HTML comments are now excluded.

    See ticket #30966 for more information.

    Please test the latest beta which includes these changes.

  • Ryan Boren 12:01 am on July 15, 2015 Permalink |
    Tags: , bubbles, , content-overrun, , edit-site, editor, , , , , network-admin, right-now, ,   

    Today in the Nightly: Site icons in the customizer, editor patterns, more accessible comment bubbles, row toggle focus styling 

    Install the nightly, and try out this fresh batch of shiny.

    Site Icons in the Customizer

    I’ve long wanted site icons in the customizer alongside site title and tagline. The identity information that I always want to edit when first setting up a site are now all together in the customizer.

    For more visuals, see these visual records.

    See #16434.

    Editor Patterns

    Create bulleted lists, ordered lists, and blockquotes using markdown like patterns. I find this particularly handy on phones when the editor toolbar is offscreen.

    Screen Shot 2015-07-14 at 4.39.12 PM

    See #31441.

    Better focus styling for list table row toggles

    See #32395.

    Better accessibility and design for the comments bubble

    The comments columns in our list tables were among the most confusing for screen reader users. Accessibility and visuals are now improved.

    See #32152.

    Eliminate content overruns on small screens

    An audit of content overruns on small screens resulted in many fixes.



    See #32846.

    Styling improvements on small screens for Right Now in the network admin

    See #32962.

    Improved header information in Network Admin Edit Site tabs

    • Use the site’s name rather than URL in the Edit Site header.
    • Provide “Visit” and “Dashboard” links for the site on all tabs.



    See #32525.

    Disambiguate “Automatically add new top-level pages to this menu”

    In the customizer, a menu’s auto-add pages option is now separated from the preceding menu location checkboxes.

    See #32820.

     Passwords UI Improvements

    Passwords received a couple of improvements. The show/hide toggles look better, and passwords ui is on the install screen. Passwords on the install screen still needs a little more flow work.

    See #32589 and #32925.

    For more visuals, see these visual records.

    Reduce link noise in media library list view

    This is visually subtle but removes confusion for screen readers.


    See #32254.


    Previously: Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons

  • Andrew Ozz 1:31 am on July 9, 2015 Permalink |
    Tags: , , editor,   

    Editor changes in WordPress 4.3 

    The editor initialization was updated. The main change is that the content for both Visual and Text editors is prepared/escaped the same. We used to run the content through the PHP wpautop() when the default editor was TinyMCE. This is no longer needed as we run the textarea content through the JavaScript wpautop() before initializing TinyMCE.

    In that terms wp_richedit_pre() and wp_htmledit_pre() were deprecated together with the richedit_pre and htmledit_pre filters. They were replaced by format_for_editor() and the format_for_editor filter. For more information see #32425.

    Another change is the complete removal of the code for the old Distraction Free Writing mode. This code was disabled and has been unused since WordPress 4.1. We left it in core so the authors of plugins that were using it would have plenty of time to update.

    If this is essential for some plugins, the files from WordPress 4.2 can be reused. For more information see #30949.

    If you are the author of a plugin that uses any of the deprecated functions or filters, please update it now. If your plugin uses wp_editor(), please test it in the latest beta.

    As always, feedback is very welcome.

    • Samuel Wood (Otto) 1:39 am on July 9, 2015 Permalink | Log in to Reply

      FYI to support team members. Any major editor JS change causes massive issues, because of caching. Bottom line, adding a version to the JS files, like we do, doesn’t solve the problem for people like CloudFlare users and people with overly crazy caching situations. Expect that these changes will cause big upticks of reports of breakage and silly demands to revert. CLEARING CACHES WILL FIX IT. The trick is finding out what kind of cache they use, and then clearing that.

      Just saying. This always happens for every major JS change.

      • Andrew Ozz 3:32 am on July 9, 2015 Permalink | Log in to Reply

        Yeah, this used to be a really big problem some time ago. Lately the situation has been improving. We have been updating TinyMCE and the custom plugins in each new WordPress release. There are still some reports of editor JS errors, but far less than few years ago.

    • Leo Caseiro 2:08 am on July 9, 2015 Permalink | Log in to Reply

      Hi @azaozz believe the PHP function is wpautop()

    • crispinbalfour 7:56 am on August 21, 2015 Permalink | Log in to Reply

      I am not sure whether this is a place to ask this but I have posted a query and nobody is responding.

      I have updated to 4.3 and now the GT3 Page builder in Skew Theme is not working. The developer gave me a fix so I can at least see the content in the Text Area module, but there are no buttons for inserting/editing links any more.

      The developer indicated this was a bug with Tiny MCE in the latest release – is this the case? From what is written above Tiny MCE is no longer a part of things, and the GT3 is not going to work anymore?


    • hernangonzalez 9:49 pm on August 23, 2015 Permalink | Log in to Reply

      This change seems to be a headache for those who had chosen to no use wpautop() on their blogs (disabled via plugins or custom themes) and who want to control the HTML markup themselves.

    • lokidude99 10:47 pm on August 26, 2015 Permalink | Log in to Reply

      Seems to have broken all my sites that used qtranslate plus a plugin that seems to have recently become unsupported.

      Debug mode throws no errors and the only error I see in the console is ..

      Uncaught TypeError: Cannot read property ‘canvas’ of undefinedb.closeAllTags @ quicktags.min.js?ver=4.3:1d @ editor.min.js?ver=4.3:1(anonymous function) @ editor.min.js?ver=4.3:1i @ tinymce.min.js?ver=4203-20150730:2m @ tinymce.min.js?ver=4203-20150730:2

      When you click on the visual tab in the editor.

      Any suggestions on where I should look to fix this?

      Urgently need assistance on this.

    • WooRockets 8:32 am on September 9, 2015 Permalink | Log in to Reply

      Thanks for informing us about the problem with the visual editor. Current we are using wp_editor() function for our plugin: WR PageBuilder, and it isn’t working on WordPress 4.3 (it was working well on WordPress 4.2). I’d really appreciate if you could suggest me a way to fix this problem. Thank you very much.

    • WooRockets 8:48 am on September 9, 2015 Permalink | Log in to Reply

      Please see screenshot problem here:



      • Andrew Ozz 3:47 pm on September 9, 2015 Permalink | Log in to Reply

        Looks like an error in an “inline” script on that page. To troubleshoot: best to enable `SCRITP_DEBUG`, then look at the script where the first error occurs. My guess is that the plugin doesn’t select the editor switching buttons properly.

    • abeeken 8:48 am on September 14, 2015 Permalink | Log in to Reply

      Hello people, hopefully this is the correct thread for this; it’s the only one that I can find that seems to pertain to the problem I’m having!

      So, I’ve got a Network install that I’m running a very specific suite of sites on for use at our University. A feature I’ve included in this is that certain pages allow registered users to add content via a TinyMCE editor instantiated using the wp_editor() function. This was working all fine and great until I updated to WP4.3 at which point the editor loads the Visual and Code tabs, but none of the formatting buttons – in fact, it’s always displaying in the text view with no formatting at all. In addition, the Admin menu bar is also not displaying for any pages which display the wp_editor() field.

      Is this a known issue in 4.3 or is it likely to be something to do with my particular install? I’ve tried switching themes, disabling plugins etc but it specifically seems to be tied in with my using this function.

      Any help or confirmation of this issue would be greatly appreciated.

  • Ryan Boren 10:56 pm on June 30, 2015 Permalink |
    Tags: , , editor, image-editor, , , site-icons, today-in-the-nightly   

    Today in the Nightly: Site Icons, Text editor in Press This 

    Here are a few cool things that recently landed in trunk. They are available right now in the nightly build. Install the nightly, and try them out.

    Site Icons

    We’ve wanted site icons in core for a long time. #16434 was opened four years ago and will be resolved as fixed for 4.3.


    Our crop controls are not easy to use on my iPhone 6+. The images overflow the right side of the screen. Horizontally and vertically scrolling an image bigger than the screen while working a rubber band select that resets when the image is tapped is not pleasant.

    Provide feedback on #16434 or on this post.

    See these visual records for more screenshots and flow storyboards.

    Text editor in Press This

    Press This now has a Text editor for editing HTML, just like the standard editor in post-new.php.


    Provide feedback on #32706, in #core-pressthis, or on this post.

     Padding for image settings

    The Image Crop and Thumbnail Settings boxes received a little bottom padding.

    And so that we are always aware of what our mobile experience looks like, here are those settings boxes on an iPhone 6+.

    When you see a sidebar obscuring content on a phone, you can be pretty sure you’re witnessing lingering desktop bias. These screens were designed for desktops where you have room to use  sidebars. You can’t make a screen responsive and call it ready for a phone. The image flow effort is working on this.

    Provide feedback on #31845 or on this post.

    Manage in the Customizer

    Appearance > Menus received a “Manage in the Customizer” button to match Appearance > Widgets.

    Screen Shot 2015-06-30 at 3.16.57 PM

    Next, fix up mobile.


    Provide feedback on #32808 or on this post.


    Previously: Today in the Nightly: Inline link toolbar and Press This split button

    • Emil Uzelac 11:05 pm on June 30, 2015 Permalink | Log in to Reply

      Just awesome!

    • Ryan Boren 11:45 pm on June 30, 2015 Permalink | Log in to Reply

      To create these posts, I work my way through the latest commits looking for changes to visuals. From the changesets, I visit the tickets. If the tickets don’t have before and after screenshots for both a desktop and a phone, I test the changes on a desktop and a phone and take screenshots. I upload those screenshots to the ticket. I comment on the ticket with any bugs I find in the process. I often find something, especially on phones. If I don’t have time to test and screenshot, I tag the ticket with needs-screenshots so I can get back to it later.

      Now that I have tickets with screenshots. I collect those screenshots and publish them as “Today in the Nightly” using the tool we’re all making together, WordPress. I often find bugs that way, too. Triage, recursive dogfooding, visual archiving, visual awareness, and a useful post to show for it. Recruiting drive: This is a great way to contribute. Help us with flow patrol, as we call it. :-)

    • Andre 4:27 am on July 2, 2015 Permalink | Log in to Reply

      I am just now playing with the beta 4.3, but regarding the site icon…I’m sure many will be extremely happy about that feature being part of the core. The only thing that should be given consideration is the labeling of it. I think it might confuse many end-users who may wonder what is a site icon when most are familiar with the term “favicon”, which as I understand, is the correct name for it. Just something to think about.

  • Ella Iseulde Van Dorpe 3:39 pm on June 8, 2015 Permalink
    Tags: editor   

    Editor Chat Tomorrow 

    Tomorrow we have our weekly editor chat (9 June 2015 21:00 UTC) in the #core-editor Slack channel. Here are some points we want to discuss. If any of these are of particular interest to you, be sure to attend. :)

    • Last week we added the text pattern plugin, please test! Are there any other patterns we should add? High on the list are for a block quote, #{1,6}  for headings and --- for a horizontal rule. #31441
    • What should happen to word count? Do we (re)move it? When and how should it be refreshed? Currently it only refreshes on enter and backspace, which is not ideal. In any case we also need to fix the counter itself (ignore more unicode ranges, shortcodes…) and this makes the counter slower. #30966
    • Inline linking. We’ve been talking about this for a while. There are some interesting mock ups from @joen, we should iterate on them and code it. Link text may go away. Should we keep “Open link in a new window/tab” in core? If you want to know more about the way it will work or help out, join us. :) If there is consensus it may still make 4.3.
    • Another thing that should be coded asap is the caption placeholder. #32175

    If there’s anything else you’d like to bring up that’s editor related, don’t hesitate to do so.

    • Shapeshifter 3 4:48 pm on June 8, 2015 Permalink | Log in to Reply

      I’m not picking on you individually Ella, but why has WordPress (whether coming from dot com OR dot.org) seemed to have been on an incremental path to limit user Link Management. The standard old Link Manager was disabled by default over two years ago, and now needs this plugin to be re-enabled: https://wordpress.org/support/view/plugin-reviews/link-manager.

      Also, I personally use “Open link in a new window/tab” every day, and wonder why the Core Contributors would want to stop offering that: https://toolbox-4-websites.com/design ?

      Why doesn’t WordPress just post a disclaimer on the homepages of both dot.com AND dot.org stating:
      “These are the things we DON’T want you to do with OUR SOFTWARE.”?

      • Ella Iseulde Van Dorpe 8:13 pm on June 8, 2015 Permalink | Log in to Reply

        The Link Manager is not related to the editor, and this is before my time. :)

        “Open link in a new window/tab” – I’m not saying we should remove it, just saying we should talk about it. In my humble opinion this should be the decision of the reader, not the writer.

    • Helen Hou-Sandi 5:21 pm on June 8, 2015 Permalink | Log in to Reply

      Leaving a note here to remind myself for tomorrow: I’d like to see if there’s anything we can do to make it smoother when views refresh after an undo. It’s pretty jarring right now and all the more obvious when undoing a text pattern format.

    • Robert Dall 5:31 pm on June 8, 2015 Permalink | Log in to Reply

      I personally like use and advise my clients to use the Word Count that is included in WordPress it helps me and them write content to a certain amount. Which has benefits to SEO. It small and unobtrusive if it’s not improved it should still be kept for these obvious advantages.

    • Julien 8:17 am on June 9, 2015 Permalink | Log in to Reply

      Regarding the inline linking mock ups, I personally feel that the one without dark overlay is best. It keeps the focus on writing and editing while when the overlay appears, I feel like doing something else and loosing my focus on the article. What do you guys think?

  • Ella Iseulde Van Dorpe 5:34 pm on May 1, 2015 Permalink
    Tags: , editor   

    Editor wish list for 4.3 

    This is a list with improvement we’ve been planning for 4.3 and beyond. It’s open for suggestions and discussion, and it will continuously be updated.

    • Improve the editor on mobile. – #29923
      • Contextual floating toolbar.
      • Fix touch and focus issues. – #31247
      • Improve the spacing around the editor?
      • Combine “Add Media” with any buttons added by plugins. – #29989
    • Save and update without a page reload. For this we will need to look into nonce refreshing. – #7756
    • cmd/ctrl+S should work in the text editor and when the visual editor is not focussed. – #31655
    • Fix word count. – #30966
    • Bullet list shortcut. – #31441
    • Drag and drop linked images, captioned images and views. – #28272, #28003, #28826
    • Caption placeholder. – #32175
    • Add tests for our TinyMCE plugins. – #31596
    • Remove old Distraction Free Writing? – #30949
    • Improve editor scrolling.
    • Better default editor styles. – #31253, #32176
    • Inline link form. – Mock ups from @joen. One step done.
    • Leaving dialog. – #28566

    Some things we started looking at for future releases:

    • Better structure for meta boxes. (needs tickets, mock ups)

    Anything you’d like to see in this release or would like to work on? Please leave a comment.

  • Ella Iseulde Van Dorpe 11:39 pm on June 20, 2014 Permalink
    Tags: editor,   

    GSoC: Editor Experiments #2 

    I meant to do a post last week, so this one is a bit late, but here it is anyway. I’ve mostly been working on the extendibility of views in TinyMCE and little improvements to the views themselves.


    I’m trying to find a way to make it as easy as possible for plugins to create a view for their shortcode (though it doesn’t necesarily have to be a shortcode). At the moment the biggest challenge is the handling of scripts for those views. Views with scripts are sandboxed in an iframe, but while this is great for a view that just displays external content (like a map or tweet), it’s not so great for normal content because the iframe doesn’t inherit the styles of its parent. Sure, we could “detect” some styles, but that’s not good enough. We could also put editor-style.css in each iframe, but that will break once you switch formats or categories, unless we change every iframe’s body class simultaneously. I wish all major browsers supported “seamless” frames. :(

    On the front-end, however, we wouldn’t have this problem. The content is not wrapped in an iframe, so scripts can be added where they normally would.

    The current registation of a shortcode and view looks like this. It will change a lot though.

    register_shortcode( 'my_shortcode', array(
    	'__FILE__' => __FILE__,
    	'content' => '',
    	'block' => true,
    	'attributes' => array(
    		'my_attribute' => array(
    			'title' => __( 'My Title' ),
    			'defaults' => ''
    	'scripts' => array( 'script-handle', ... ),
    ) );

    Notice that all the attributes must be defined here, unlike add_shortcode(). Now you’ll need to create a directory my_shortcode in the directory of __FILE__.



    This is what the shortcode will output on the front-end. This file receives the variables $attributes, $content and $tag.


    This file registers the view for the TinyMCE editor.

    ( function( $, views ) {
    	'use strict';
    	views.register( 'my_shortcode', {
    		getHTML: function( attributes, content, tag ) {
    			// Content goes here.
    		edit: function( shortcode, attributes, content, tag, node ) {
    			// This function is run when the user clicks on the edit icon.
    			// E.g. you could create a default modal (or create your own).
    			// This modal will display the `edit.php` template. You can provide a callback to do some crazy stuff.
    			// If edit.php is set up correctly, all the attributes will be filled in for you.
    			this.modal( node, callback );
    			// OR
    			// While the modal above will handle the update automatically when the user clicks on <input type="sumbit">,
    			// you can also do it manually.
    			this.refresh( attributes_or_shortcode, node );
    	} );
    } )( jQuery, wp.mce.views );


    A script to run with the view’s content. This could also go in a <script> tag inside the content. Both will trigger an iframe.


    An html template to display the input fields. This will be optional, by default it would just display input fields for all the attributes you registered. You can hide certain attributes and set up your own controls by providing a custom edit.php template and add JavaScript using the modal callback.

    The name attributes that match the registered shortcode attributes will be filled in automatically with the old shortcode attributes and the defaults when using this.modal().

    <input type="text" name="my_attribute" value"">
    <input type="submit" class="button button-primary">

    An example

    Eventually I’ll create several examples to illustrate all this. So far I’ve made an example for a map (a Google map). The code can be found in a child plugin: https://github.com/avryl/editor-experiments/tree/master/google-maps-block. You can see all the files I described when you enter the map directory.

    In the editor, it just looks like this.

    Screen Shot 2014-06-20 at 09.55.34

    The edit view looks like this. You can search, add a marker, drag and drop it, move the map, change it to satellite and save it all.

    Screen Shot 2014-06-20 at 09.59.06

    View for embed

    I’ve also been working a bit on the embed view for core. You can now paste an embeddable URL and it will automatically create a view for it. See #28195.

    View improvements

    I experimented a bit with the views themselves to make navigation and editing around them easier. Right now you can’t put your cursor right before or after a view. But with the Editor Experiments plugin you can! This is done by creating a fake cursor next to the view and detecting when the cursor enters and leaves the view. The cursor behaves exactly like a normal cursor (though the height is equal to the view), you can’t see the difference.

    Screen Shot 2014-06-19 at 14.54.34

    • Dinesh Kesarwani 5:48 am on June 21, 2014 Permalink | Log in to Reply

      It’s awesome.

      But how hierarchical shortcodes will be handled? For (basic) example

      [grid col=”6″]thecontent[/grid]
      [grid col=”6″]thecontent[/grid]


      • Florian Girardey 8:22 am on June 21, 2014 Permalink | Log in to Reply

        I love this Idea, i think that hierarchical shortcodes will be handled as they are actually. Each shortcode tag wrapp will render an html output.
        But i think that we need first to resolve the bug of nested shortcodes with the same tag :/

      • Avryl 3:29 pm on June 21, 2014 Permalink | Log in to Reply

        If all the shortcodes that you nest belong to the same plugin, the plugin can easily handle that. Actually, there’s no need at all for shortcodes within the main shortcode, because you create the shortcode through a UI. You can simply output HTML. But it’s still possible.

        If there are shortcodes inside the content of a shortcode by another plugin, it’s up to that plugin to parse them or not. But you can’t have a view inside a view atm. I’m also not sure if that’s necessary. I’d like to see some use case for such a scenario.

    • J.D. Grimes 12:22 pm on June 21, 2014 Permalink | Log in to Reply

      This is exciting, especially the shortcodes. I would love to see that make it to core. I’ll definitely be following along here..

    • TV productions 1:44 pm on June 21, 2014 Permalink | Log in to Reply

      I really like the idea! Views for shortcodes is a thing that seperates WordPress from being a multicontent CMS. I hope there is some space for the overall layout, so that the flow for inserting/editing a shortcode will look (almost) the same for each shortcode. I will be keeping an eye on this project 😉

    • programmin 12:53 am on June 25, 2014 Permalink | Log in to Reply

      Cool! So this will be a consistent api for creating shortcodes with the edit/delete buttons like most wp-core shortcodes? (related to bug introduced in 3.9 – https://core.trac.wordpress.org/ticket/28169) That will be great – especially for Nextgen-gallery and others that awkwardly have a click-event on a preview image to go to edit special content.

      Btw when you say “I wish all major browsers supported “seamless” frames”, are you talking about how stylesheets don’t apply within the iframes in the page (like TinyMCE’s iframes)? Because the latest MCE4 releases have support for inline mode – which uses a contentEditable in the page, without iframes:


      Btw am I the only one seeing “Notify me of follow-up comments by email” on this comments form?

      • Avryl 2:30 am on June 25, 2014 Permalink | Log in to Reply

        More or less, yes. I’m actually trying to make all of this work inline, so you’re in “edit mode” immediately when you click anywhere on the view. You could then add your own buttons inline to open a modal, or have all the controls inline.

        I don’t think it’s a good idea to use inline mode in the admin. With an iframe you create a sandbox for both CSS and JS, which makes it a lot easier to add something like editor-style.css without having to reset all the admin styles. I think TinyMCE is also going to use a seamless iframe for inline mode once it’s better supported.

    • Nick Haskins 6:18 pm on July 27, 2014 Permalink | Log in to Reply

      Really some great work on this Janneke! We’ve been watching the progress of this and wpview pretty closely, and have been waiting for this api to truly take advantage of it within our plugin.

      I see that this is labeled “experiment.” Am I correct in assuming that this codeset won’t be in 4.0? If it will be, in what form?


  • Ella Iseulde Van Dorpe 2:13 pm on May 30, 2014 Permalink
    Tags: editor,   

    GSoC: Editor Experiments 

    I’ve not posted on /core before, so, hello everyone! :) I’m Janneke and I’m currently working on my GSoC project. I’m from Belgium, but I currently live in Scotland and study philosophy at the University of Glasgow. This is something different entirely, but I started playing with WordPress a bit last year and enjoyed it a lot. :)

    The original proposal was focussed on the front-end editor and content blocks, but that has changed a bit. I’ll focus on the back-end editor first instead, though the work will likely be reusable for a front-end editor. I’ll also focus on a bit more than just “content blocks”, so that’s why I’ve titled this “Editor Experiments”.

    My general goals are to try to simplify and visualise the editor more, and to improve the workflow by providing as many tools as possible inline, at the right place and time. A lot of these ideas are not new, of course, and can be found in other editors and Joen‘s and Mel‘s mockups from last year. In order to visualise the editor more, I’ll try to make it easy for plugins to register shortcodes with previews for them, like there are now previews for a couple of media shortcodes such as galleries.

    I’ll post an update on this blog every Friday with the progress I’ve made. I meant to publish a post last Friday, but didn’t have access to this blog yet, so here’s one for both weeks. I’ve set up a GitHub repo, and for now that’s the only place where you can download the plugin.


    I’ve empty the TinyMCE toolbar, leaving only the most general tools, undo/redo, paste as plain text, remove format and help. On the other side we can control the the screen: switch between visual and text mode and activate fullscreen mode.

    Screen Shot 2014-05-30 at 13.35.31

    Instead of putting the title in a tiny box, I moved it to the editor as a first heading so it looks the same as on the front-end. Themes can style it appropriately.

    Screen Shot 2014-05-30 at 13.41.37

    Whenever you move the focus to an empty paragraph, a suggestion pops up to insert a “content block”.

    Screen Shot 2014-05-30 at 13.46.29

    To insert aligned images, you can put your cursor at the start of a paragraph.

    Screen Shot 2014-05-30 at 13.58.42

    Clicking on it gives you some kind of modal, where you can choose a block to add to your post. Of course, in the future plugins will be able to add their own blocks by registering shortcodes. So blocks can be block level HTML elements and block level shortcodes.

    Screen Shot 2014-05-30 at 13.49.21

    What happens after clicking on one of the blocks will depend on the block. Clicking on any of the media blocks will forward you to the media modal. Plugins can have a custom modal to configure the shortcode, which will likely also be used to edit it. Of course, blocks that require no configuration are added immediately (like a horizontal rule).

    To format text, you should select it, and a toolbar will pop up.

    Screen Shot 2014-05-30 at 14.03.56

    And let’s add a link.

    Screen Shot 2014-05-30 at 14.06.06

    That’s it for now. :)

    In the next two weeks I’ll work on the registration of views for shortcodes.

    Now I’d love to hear what you think! I really value your opinion and brilliant ideas. Please do try it, and file issues on GitHub.

    • andrei1709 2:21 pm on May 30, 2014 Permalink | Log in to Reply

      Hello and pleased to meet you!
      Your suggestion looks good, but wouldn’t this send too many GET requests to the server, thus making the text editor more laggy?

      • Avryl 3:59 pm on May 30, 2014 Permalink | Log in to Reply

        For the previews? Currently galleries, playlists etc. are already previewed in the editor. They’re put together from templates, so the output of the shortcode is not requested. But yes, depending on the shortcode, it will always take some time to generate it, but not more than on the front-end.

    • Remkus de Vries 2:23 pm on May 30, 2014 Permalink | Log in to Reply

      I like where this is going. One thing we’d have to be careful with is not putting to much stuff in the modal pop-up. All the various media types would only need one button and take if from there to what we know now.

    • tomdryan 2:26 pm on May 30, 2014 Permalink | Log in to Reply

      Good stuff!

      I’ve wanted to see the registration of shortcodes, along with content blocks and I’m glad you are working on it. In your registration procedure/data structure, please include a description of the shortcode function, supported parameters and the source of the shortcode (which plugin created it).

      Also, it would be nice if you enabled standard widgets to be inserted anywhere and if you enabled any widgets to have a corresponding shortcode (there are plugins that do this now, but it should be included as part of your overall re-envisioning of content creation).

      Keep up the good work!

      • Avryl 4:01 pm on May 30, 2014 Permalink | Log in to Reply

        Yes, these are good ideas. I’ve also always wanted to see shortcodes and widgets merged into one concept.

    • tomdryan 2:32 pm on May 30, 2014 Permalink | Log in to Reply

      Also, it would be nice if you put this in the form of a plug in at some point, so those of us non-coders can test it out and provide feedback.

    • Brad Touesnard 2:37 pm on May 30, 2014 Permalink | Log in to Reply

      Very cool, great work, looking forward to seeing more of this.

    • Eric Binnion 2:47 pm on May 30, 2014 Permalink | Log in to Reply

      Looks interesting! I went ahead and starred the Github repo and I look forward to playing with this :)

    • Christiaan Conover 2:56 pm on May 30, 2014 Permalink | Log in to Reply

      Great idea! I love seeing a new take on the way the editor functions to make it more flexible and extensible. I’ll definitely be trying out your solution!

    • Seth Rubenstein 3:25 pm on May 30, 2014 Permalink | Log in to Reply

      Great idea. Can’t wait to see what’s possible with the shortcode registration.

    • @ubernaut 3:32 pm on May 30, 2014 Permalink | Log in to Reply

      looking good.

    • camu 4:02 pm on May 30, 2014 Permalink | Log in to Reply

      It reminds me of Visual Composer (check CodeCanyon).

      • Avryl 4:13 pm on May 30, 2014 Permalink | Log in to Reply

        The biggest difference is that Visual Composer is more like a page builder. If you just want to write something, it’s very confusing.

        • binarymoon 4:22 pm on May 30, 2014 Permalink | Log in to Reply

          that said – I’d love to see some visual composer style functionality built into this. Even if it’s just the ability to add additional shortcodes to the popup through a plugin.

          Regardless – I think this looks sweet. If you create a plugin for it so I can install through wp.org then I’d love to test it out.

    • Chris Reynolds 4:19 pm on May 30, 2014 Permalink | Log in to Reply

      I’d be really interested in seeing how this fares vs. the regular editor in user testing. It looks good, but I wonder about the lack of the WYSIWYG (or, more specifically, the stripped-down toolbar). For me, I use keyboard controls to do things like bold or italics, so selecting text and waiting for the pop up wouldn’t bug me much, but some of the other things (content blocks and links) might not be immediately intuitive. But I have no idea — would be great to see some testing :) and +1 for the pluginified version. You get a plugin for this and maybe the admin-help-come-user-testing team can maybe run some tests for it (or at least add it to the list).

      • Andy McIlwain 9:25 pm on June 3, 2014 Permalink | Log in to Reply

        An issue I’ve seen with some users — including myself — is when we’re writing long-form content and we need to scroll up/down the screen to get back at the toolbar.

        Moving the text formatting inline would ease some of those frustrations.

      • Avryl 4:23 pm on May 30, 2014 Permalink | Log in to Reply

        Yes, I’d definitely like to do some user testing in a few weeks! It’d be great if you could help with that. :)

    • Diego de Oliveira 4:49 pm on May 30, 2014 Permalink | Log in to Reply

      Just tested this plugin and… wow, it’s already awesome! Congratulations!

      I think that this approach could really solve the main issues of CEUX project and would integrate really good with the FEE. The editing experience reminds a lot of Medium editor, which is good. And I really liked the modal for content blocks, looks like a good solution for scalability of content blocks.

      One thing that the CEUX project had was the possibility to sort / reorder content blocks. Any plans for something like this? I know that drag / drop is naturally possible for media objects (and other possible views), but it would be cool if we could do the same with the usual elements, like paragraphs, lists, tables, etc.

      And please, keep the awesome work!

      • Avryl 4:59 pm on May 30, 2014 Permalink | Log in to Reply

        I’ve experimented a bit with with drag and drop of direct children of the body

        This sounds so weird out of context.

      • Avryl 4:58 pm on May 30, 2014 Permalink | Log in to Reply

        Great! Thanks for giving it a try!

        Yes, maybe. I’ve experimented a bit with with drag and drop of direct children of the body, which is challenging, but could work. That be really cool. I know that arrow are really useful sometimes, especially on touch devices, but I really hate adding so much buttons/icons. :)

        • Diego de Oliveira 5:14 pm on May 30, 2014 Permalink | Log in to Reply

          Yeah, “less is more”, almost always! More buttons/icons = more cluttering, and a strong point for your approach is how clean is the process of editing content. But for touch devices… that’s would be challenging, for sure!

          There are some sortable js libraries that works on touch devices too, but I don’t know if it would work for a really long content that would be edited in a smartphone. Still, I would prefer drag ‘n drop instead of arrows. At least for me, it feels more intuitive.

    • Paal Joachim Romdahl 5:12 pm on May 30, 2014 Permalink | Log in to Reply

      I am thinking beside the eye (visual) mode there can also be a grid icon. Turn on the grid to place elements in grid cells (kinda like table data cells). Click inside a cell and see the cell walls go darker blue. Write and add content into the specific cell. Turn off the grid to see how the content is aligned into nice columns and rows.

      Adding break points. Resize the browser and click somewhere to make a break point. At each break point redo any of the content. Easy way to create media queries directly inside the content creation area. Perhaps a way to turn break point view on or off.

      • Avryl 5:18 pm on May 30, 2014 Permalink | Log in to Reply

        Yes, columns is a much requested feature… I’m not sure if something like this should added in the content itself. The theme should handle that. What if you divide your content into 2 columns and switch to a smaller width theme? :/

        I’m not sure what you mean in the second paragraph.

        • Paal Joachim Romdahl 5:33 pm on May 30, 2014 Permalink | Log in to Reply

          Ok instead of a grid it is important to add items to columns one can see. To directly see how it looks. A grid is basically about seeing how elements are together on a page.

          Another way to to drop/click an element next to another automatically creating a row of two elements.

          Break points to where the page changes to another layout. Here is an example on how it is done in Macaw: https://www.youtube.com/watch?v=lz7MlRSAR-I

          Creating visual media queries directly in the content screen instead of creating them through CSS (or having the option to do so).

          • Avryl 5:51 pm on May 30, 2014 Permalink | Log in to Reply

            Break points to where the page changes to another layout. Here is an example on how it is done in Macaw: https://www.youtube.com/watch?v=lz7MlRSAR-I

            Creating visual media queries directly in the content screen instead of creating them through CSS (or having the option to do so).

            Why would you want to do that? Isn’t that something for the theme to handle? I don’t really want to make it more difficult for writers to write something in WordPress. I want to make it easier. :)

    • Juanfra Aldasoro 5:28 pm on May 30, 2014 Permalink | Log in to Reply

      Looking and working great :) I think that something like this (if it is coded with an extensibility approach) could normalize the diverse world the page builders are suffering these days. This way WordPress would have a final answer for the call on builders and shortcodes – as it did before with the customizer and options/settings for example.

    • Robert Chapin 2:09 pm on June 1, 2014 Permalink | Log in to Reply

      This is conceptually awesome. The editor is the soul of WordPress and yet is often neglected during discussions of new features.

    • bduclos 9:00 am on June 2, 2014 Permalink | Log in to Reply

      Looks really good!
      Is it planned for WordPress 4.0 or later?

    • PeterRKnight 11:27 am on June 2, 2014 Permalink | Log in to Reply

      Looks amazing already. I love where this is going.

    • Andy McIlwain 9:27 pm on June 3, 2014 Permalink | Log in to Reply

      Really liking this, especially the inline text formatting.

      Have accessibility considerations been made for keyboard-only input?

      • Avryl 3:20 pm on June 19, 2014 Permalink | Log in to Reply

        It wouldn’t be less accessible than the current toolbar. You can still use keyboard shortcuts to execute editor commands. The toolbar currently shows up when selecting content with your keyboard, but I’ll need to add a shortcut to move the focus to the toolbar. If you have any suggestions, feel free to share. :)

    • Manny Fleurmond 9:08 pm on June 10, 2014 Permalink | Log in to Reply

      Little iffy on the title being part of the editor but everything else is awesome. Having shortcodes being registered in your modal would be awesome for plugin developers. I’d probably find a way to merge your modal with the existing media modal, since all of the media buttons are repeated. Heck, it could be a chance to abstract the media modal to an “insert content block’ modal.

      I’m definitely keeping an eye on this. Great job.

    • morethinking 9:07 am on June 19, 2014 Permalink | Log in to Reply

      First of all, thanks for doing this. This is something that many people in the WordPress community have been wanting for a long time (as the popularity of page builders indicates).

      With that said, I would like to offer my two-sense worth on the issue of columns.

      You wrote:

      “Yes, columns is a much requested feature… I’m not sure if something like this should added in the content itself. The theme should handle that. What if you divide your content into 2 columns and switch to a smaller width theme?”

      In my opinion, columns are more often than not an issue of content and should be part of the editor. What’s more, I believe there are solutions to the issue that you raised. Take a look at the Live Grid Example here: http://getbootstrap.com/2.3.2/scaffolding.html.

      Beyond that, obviously a user needs to pick a theme that works with his or her particular content. If someone wants columns and a particular theme doesn’t work with their columns then they should either choose a different theme, modify the theme so that it fits in with their content or give up on using columns.

      What I don’t think should be done is to leave the option of users organizing their content into columns to theme developers (except in those cases where columns are being used more for design purposes). I also don’t see why the option shouldn’t be included because of those rare cases where a problem may develop.

      One last thought/point. It may be worth taking some time to look at the Squarespace layout editor to see what they have done in general as well as how they handle columns.

      With that said, once again thanks for the great work.

      • Avryl 3:30 pm on June 19, 2014 Permalink | Log in to Reply

        When people talk about columns, the first thing I think of is splitting the whole content in two columns, but that’s not what they mean in most cases. That’s why I suggested that the theme should handle it, because in that case it makes sense.

        Sure, I can see why it’d be useful. I’m not sure if it can be done within TinyMCE, but I have some ideas. I’ll definitely give it a try at some point.

        I’ve looked at most editors on the internet, including Squarespace. :)

    • morethinking 9:07 am on June 22, 2014 Permalink | Log in to Reply

      I see that you have done your homework :).

      Glad to hear that you are willing to give it a try.

      Just one question, I’m not sure what you mean by ‘splitting the whole content in two columns’. What I have in what one might find on a home page — with different sections of the page divided into different columns to display the content differently. It would be nice if the end user could have control for laying out content like that.

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