Call for Testing: Calypso HTML Toolbar

Hello! I’m Jacopo, a developer on Team Lannister, and I have been working on bringing the HTML Toolbar to Calypso.

GH7jyAVaDY.gif

WHAT IS IT?

The HTML Toolbar is a set of tools that add things like bold, italic, blockquote, image, code and more to your posts while in HTML editing mode. A few of the latest updates include, but are not limited to:

  • Clicking on a tag button will alternate between “open” and “close” tags.
  • The “Close Tags” button will close all open tags.
  • If clicked while selecting an URL in the post content, the “Link” button will smartly recognize it as the URL for the link () tag.
  • The toolbar is a single-line scrollable element.
  • The toolbar sticks to the top of the page when scrolling.
  • The Insert Media / Contact Form button.
  • Undo/redo ability.
  • Drag and drop media.

Some of the current limitations are:

  • The toolbar is only sticky on large enough screens.
  • No undo/redo for IE11 — IE11 lacks the JavaScript function needed to make it work.
  • Cursor position is not synced when switching between modes.
  • Must scroll to the top in order to switch modes.
  • The toolbar only recognizes tags inserted via the toolbar itself. An open tag manually written or pasted in the post content won’t be affected by the “Close Tags” button, and it won’t be closed by clicking on that tag button.
  • Buttons available in WP Admin’s HTML Toolbar not yet included: Proofread, Add Poll, Add Location, Add Embed.

WHAT TO TEST?

Try the following activities:

  • Go to Horizon, start editing a post and switch to HTML mode.
  • Try opening and closing tags via the toolbar.
  • Check for cross-browser and cross-OS issues.
  • Try to undo/redo as you normally would in your usual workflow. Does it work as expected?
  • Drag and drop the types of files you’re used to working with.
  • Try inserting media and contact forms.

WHAT TO REPORT?

We’d like to know:

  • Do the actions feel right to you?
  • Does undo/redo work as expected?
  • Any issues with inserting media?

Please add any feedback as a comment on this thread.

We are planning to test this feature until Monday, March 13, 2017.

23 thoughts on “Call for Testing: Calypso HTML Toolbar”

  1. Hello Jacopo,

    I would like to suggest some functionality that use( d) to exist in the previous New Editor (the one from maybe two years ago or something like that) and that still exists in the Classic (WP Admin) Editor, and this functionality involves hotlinked images.

    In the previous New Editor and in the Classic Editor you can insert hotlinked images without having to upload the images to your Media Library, and you have the ability to align and add captions and add ALT text and add a Custom URL to hotlinked images.

    But the New New Editor lacks that functionality, if you try to use the Insert option it forces you to upload the image to your Media Library, which is not what I want, and so to add a hotlinked image you have to copy and paste a direct link to the image but then you can not align and add captions and add ALT text and add a custom URL to your hotlinked images.

    Because of this I have been forced to use the Classic (WP Admin) Editor to do major edits (which requires me to have to search for each post manually because we can not set the Classic Editor as the default editor when clicking the Edit Button on posts/pages), and to create new posts for probably two years or more.

    I need this functionality to create my posts every day, and so the New New Editor is still not usable for me until it gets that functionality for hotlinked images again.

    On all of my posts and pages I add a centered hotlinked image with captions, ALT text, and a custom URL.

    I just tested this in the New New Editor in Horizon to see if this has changed yet but it has not, and so that is my feedback.

    Thank you,
    -John Jr

    Like

    1. Hi John, thanks for the feedback!

      It is true that you cannot hotlink images in Visual mode, but with this update you’re able to do it in HTML mode.
      Just hit the img button in the new HTML Toolbar and paste in the image URL. The image won’t be uploaded but simply hotlinked.
      Then, in Visual mode, you’ll be able to align it and add a caption via the context menu (basically, just click on the image in the editor and the context menu with alignment and caption options will pop up right there on the image).

      Liked by 2 people

      1. Hello Copons,

        You are welcome.

        Thank you for sharing that tip, but will this functionality be added to the Visual Mode?

        Also I noticed that in Visual Mode I did not see an option for ALT text or Custom URL when I added a hotlinked image using your method.

        The HTML Mode had an ALT text option but I am not sure if what I entered there stayed or not when I switched to Visual Mode.

        Thank you,
        -John Jr

        Like

        1. Title and alt text entered in HTML mode will stay there in Visual mode too.

          I can’t say for sure if they will be added in Visual mode though, as I’m not currently working on the Visual editor.

          Liked by 1 person

        2. Okay, thank you for answering that Copons.

          I would like to suggest that those options and Custom URL (which I use so that when people click the hotlinked image it will take them to the source, which is usually Wikipedia or Wikimedia Commons) return to the Visual Mode as well because there are some people like me who only use the Visual Mode, and who need all of those options to do my posts everyday (I do longform posts pretty much everyday for years now).

          Without those options people like me will continue using the WP Admin Editor, which would not be as much of a problem if it were not for the fact that the New Editor is forced on us when clicking the Edit button on posts, and so to edit old posts in the WP Admin Editor we have to manually search for posts in the WP Admin Dashboard to open them in the old editor manually just to be able to edit older posts.

          Which means that people like me, who currently need to go back to edit over a thousand posts, have to do this the hard way just to have the features that I need.

          We need an option to make the old editor the default because it seems that some features that we need may never return to the New Editor, I have given feedback each year, but the core features I need still have not been added back yet which has greatly hurt my blogging experience so much so that I stopped my edit all my older posts plan out of frustration.

          -John Jr

          Liked by 2 people

        3. Hearty assent to John Jr’s last paragraph. My own reasons for using the WP Admin Editor much of the time are different, but I do use both editors and find that neither one by itself would take care of my needs. Maybe there should be a survey asking people what is important to them in Editor X that is not in Editor Y.

          Liked by 2 people

        4. Thank you Mellow Curmudgeon.

          I have probably suggested that they start using surveys for years now (so far only a few have ever been done), Polldaddy is owned by Automattic and polls are available on WordPress.com, and so it is odd to me that surveys are not used much at all when they could easily add them to posts on their blogs/websites and/or email them and/or show them in the Dashboard(s).

          We had some battles about the previous New Editor and various other things before in the WordPress.com Forums and many of us gave feedback in those various battles over the years, but I do not really use the forums now-a-days unless I have no choice after my experiences in those battles and because of other issues that I have with the forums.

          After leaving the forums I would submit bugs/annoyances/feedback by email and through the contact form, but I rarely do now because over time it seems to matter less and less as many of those issues still remain years later after reporting them various times and that and the various past battles in the forums and various other issues have left me worn down but I still blog almost everyday thanks to the WP Admin Editor (without that I would have probably given up on WordPress.com).

          I am glad that Horizon Feedback exists, and I hope that they will start using this blog more to connect with us and get feedback; and I hope that they will publicize it instead of hiding it so that more people will know about it and participate.

          I also hope that they will start using their other blogs/websites like WordPress.com News and The Daily Post et cetera to better reach out to us for feedback, and to let us know what is going on.

          -John Jr

          Liked by 1 person

        5. I feel your pain John, as I’ve always been a heavy WP Admin editor user myself.
          My team is currently working on the gaps between the two version of WordPress, and it’s something we take seriously.
          I’ll report your request and we’ll see about it. Just to be clear though, not all features will make the jump to the new version (some will change, most of them will be improved, few dropped), so I can’t assure you anything about this particular one.

          Liked by 2 people

  2. One of the many reasons I still use the WP Admin editor much of the time has been Calypso’s lack of an HTML toolbar in HTML mode, so I am glad that this deficiency is being addressed. Hope to have a chance to do a little testing B4 2017-03-13.

    Liked by 2 people

  3. I am using Firefox on a Win 10 computer. I encountered one big bug.

    I click on the button for bold or italics so as to start typing in new text that will be in bold or italics. No text has been selected. The editing cursor is where I want to insert the new text. OOPS! The click forgets where the editing cursor was and leaves me ready to type new text at the end of the current draft rather than where I want to type it. I must find that spot all over again. Not good. If I get flustered and thrash about, I may find unwanted tags appearing in strange places. PLEASE keep the editing cursor where it was when I clicked on the bold or italic button.

    The list-making buttons have much the same forgetfulness as the bold and italics buttons, and it is a bummer to have what I type appear at the end of a long draft when I had been expecting it appear somewhere in the middle. If I goof when trying to climb out of the hole, I can be left with unwanted and unmatched opening and/or closing tags and with buttons in the click-me-for-a-closing-tag state, rather than the click-me-for-an-opening-tag state.

    I fear that some other buttons (like code) have much the same big bug.

    Done w/o problems:
    Insert a link.
    Wrap selected text with opening/closing tags for bold or italics.
    Undo with Ctrl-Z, except when trying to undo ALL consequences of triggering the big bug.

    Like

    1. Hi there, thanks for the feedback!
      I could reproduce this on Firefox on macOS, and… ouch, really.
      I’ve recently changed the logic behind the buttons and, as it seems, I haven’t tested the old parts on Firefox, in the assumption my changes didn’t touch them.
      I’m working on a fix right now, I’ll push it out (and give you a heads up about it) as soon as possible.

      Liked by 1 person

  4. Quick note on the known limitation {{Cursor position is not synced when switching between modes.}}

    I am glad I can insert images in HTML mode because that gives me more control over where they actually appear. (Images I insert in Visual mode often must be moved in HTML mode.) On the other hand, I always want to override the default alignment. If I am not sure how to tweak the HTML attributes directly, I can switch to the Visual tab. But I need to find the image again on the Visual tab. I realize that it would be tough to maintain a tight correlation between editing cursor positions on the HTML and Visual tabs, but it would be helpful if the cursor position in one tab could be *approximated* when switching to the other.

    Like

    1. I know that’s an important missing feature that would have come up at some point during this call for testing, and that’s why I wrote about it. 🙂

      Truth is: the cursor position sync is not really related to the HTML Toolbar, but more on the inner workings of the two modes (very, very different between each other).

      So yes: it’s definitely on our radar, but I sincerely don’t know what to say about it at this point.

      Liked by 1 person

    1. Still not a fan of image alignment though. If I work in HTML mode and I’m prone to heavily using the keyboard (shortcuts), it would always break my workflow to change to “Visual mode” just to “center” or “right align” an image.

      I hope you can come up with a solution.

      Liked by 1 person

      1. I get what you’re saying, but in my opinion the HTML mode should be more simple than powerful, and having a million of options would make it more cumbersome to use, and I’m sure you’ll understand that for this reason a change like this must be discussed internally before.

        Meanwhile, if you don’t want to break your workflow, may I suggest you to check out the differences in an image code in HTML mode after you change its alignment?
        For example, you could see something like:
        class="alignnone size-full wp-image-100"
        changing into:
        class="aligncenter size-full wp-image-100"

        Manually changing alignnone into aligncenter (if you want to center the image) is exactly what you’re looking for.
        It’ll feel weird and annoying at first, but I’m sure you’ll get used to it in no time! 🙂

        Like

        1. … may I suggest you to check out the differences in an image code in HTML mode after you change its alignment …

          Thanks for the tip. That’s exactly what I’m planning to do now that I can add images in HTML mode. 😀

          … and I’m sure you’ll understand that for this reason a change like this must be discussed internally before.

          I totally understand. 🙂

          It’s just that I most recently noticed a fascinating feature in the visual editor. When you copy a URL into your clipboard, then highlight word(s) in the visual editor and press Ctrl + v to paste the link, it automatically adds an anchor with the URL as ‘href’ attribute and the highlighted words as description.

          I was just hoping for something similar for images. What I mean is, I highlight the HTML code which was pasted after uploading an image, copy it to the clipboard and the simply press a (to be added) keyboard shortcut for repasting the image as left, right or center aligned.

          But don’t worry, it’s just an idea/feature request. I’m not expecting it to happen it anytime soon. 😉

          Cheers
          Martin K. aka iqatrophie

          Like

  7. So, it’s time to wrap this up, do a last round of internal testing and finally ship it to everybody!
    A huge thank you to John Jr, Mellow Curmudgeon, JenT, and Martin K. for sharing their invaluable feedbacks with me! 🙂

    See you all on the next call for testing!

    Liked by 2 people

Comments are closed.