Blogosphere

Pasting Flickr embed codes into WordPress blocks no longer works

Software engineers all over the world continuously deliver new and changed functionality to WordPress.com. This is great when you like the changes, and not so great when you don’t. Especially when you have to learn all new steps to do something you’d already learned to do and were happy with.

One major change was the new block editor. It was a whole new way of approaching creating content. I found it to be easy to learn and I like it a great deal better than any other editor WordPress has ever offered.

One thing I especially liked about it was how easily I could embed images from Flickr, which is where I host most of my images. In the old editors, embedding a Flickr image was a multi-step process. One of those steps was manually stripping out of the embed code a <script> tag that WordPress tripped up on.

WordPress actually doesn’t allow <script> tags in posts. This is wise, because those tags execute in your browser code that’s stored elsewhere. That code could be malicious. The code Flickr wants to run in your browser is harmless, but there’s no way for WordPress to know that.

In the block editor, simply pasting the Flickr embed code into an empty block stripped the <script> tag and made the image appear. Yay!

But this functionality was recently removed with neither warning nor explanation. Pasting a Flickr embed code into a block now results in a blank block.

But not an empty block. When you switch the block to HTML view, some HTML code appears. WordPress converted the Flickr embed code to the image’s simple URL wrapped in a hyperlink tag, wrapped in a paragraph tag, like this:

<p><a href="URL_of_Flickr_image"></a></p>

This is a malformed hyperlink, in that it specifies the link target (the page to go to, here the URL of the Flickr image) but no text or image to which to attach the hyperlink. The browser correctly renders this as blank.

Thinking I’d found a bug, I opened a case with WordPress.com support. They told me that simply pasting the Flickr embed code should never have worked because of the <script> tag. They didn’t explain why.

I pointed out to them that before this change, blocks flawlessly stripped out <script> tags. I asked if they would restore the old functionality. They said with no explanation that they would not.

They gave me two alternatives. The first is to paste the Flickr image’s URL into an empty block. This does work, but the image is of a fixed size, which is narrower than the block on some screens. I did it below, so you can see. There doesn’t appear to be any way to increase the image size. I almost always want the image to scale to full width, so this alternative won’t work for me.

Pay parking

The other alternative they offered is to paste the Flickr embed code into a block of type Custom HTML. This adds three extra steps I didn’t have to do before:

  1. Convert the automatically created default block to a Custom HTML block.
  2. After pasting the Flickr embed code, manually delete the <script> tags.
  3. Open the block menu and choose Convert to Blocks to show the embedded image rather than its underlying HTML code.

This is not onerous, but it is disappointing because several days ago I did not have to do these steps. A real benefit I gained with the block editor is now lost. These steps give me the same end result I had before, at least.

Pay parking

In my work as a software engineering manager in a company that delivers a software product over the Internet, I’ve personally led engineers to deliver changes that have caused users frustration. There are a lot of valid reasons to do it. But users hate to be surprised by changes that alter their workflows, especially when they don’t know why it had to change.

I’d love it if WordPress.com would revert to the old functionality so I can just copy and paste those Flickr embed codes and move on. But I’d have an easier time accepting this loss of functionality if someone had given me even a flimsy explanation of why.

To get Down the Road in your inbox or reader, click here to subscribe!

Standard
Blogosphere

A couple weeks ago I published a mini-review of the new Gutenberg editor in WordPress. I said there that there was no clean way to embed images from Flickr.

I was wrong. It’s stupefyingly easy. You just paste the Flickr embed code directly into an empty block. The image appears instantly! It also hyperlinks back to the Flickr page from which it came, per Flickr’s terms of service.

Teacup
Flickr image embedded instantly into WordPress Gutenberg

This is far easier than how we all had to embed Flickr images in any previous WordPress editor. Given that I use Flickr to host my photographs, Gutenberg is making creating posts significantly faster for me!

Embedding Flickr images in the WordPress Gutenberg editor

Aside
Blogosphere

Using the WordPress Gutenberg editor

WordPress has been working for a long time on a new post editor, which they’ve named Gutenberg. The folks at WordPress.com are slowly rolling it out to users, allowing them to opt in to test it. As soon as it was available to me I took the plunge, and have written several posts with it now.

I remember the last time they rolled out an all-new editor — it broke all of my workflows and frustrated me for weeks until I learned it.

Gutenberg didn’t. That’s not to say it’s like any past WordPress editor; it’s not. It doesn’t offer Microsoft Word-style editing like every other editor in the universe. Each paragraph, photo, everything is its own element known as a block.

I thought this would be the most overthought editor design ever. But then I started typing my first post, and the majority of things I wanted to do fell right to hand or were quickly discoverable.

I make software for a living. Let me tell you — the quick learnability they have delivered is no mean feat. Within a couple posts I didn’t want to use the old editors anymore. I even converted my in-progress posts to Gutenberg.

To add any kind of content, you press Enter to create a new block. If you want a text element, just type. If you want any other kind of element — image, YouTube embed, pull quote, anything — hover over the block with your mouse, click the plus-in-a-circle icon that appears, and choose the kind of content you want from the list that opens. The block will then give you every clue you need to create, link to, or embed that content.

Here’s a random image from my WordPress media library, easily inserted as a block.

Moving blocks around isn’t a cut-and-paste operation, as it is in every other editor. You hover over the block with your mouse and some controls appear that let you drag and drop the block, or move it up or down in the document.

There are a few quirks yet that I hope they iron out.

Empty image block

First and foremost for me: you can’t directly embed Flickr images. You’d think you could use “Insert from URL,” but it doesn’t work for Flickr (yet?).

Fortunately, there’s a workaround: create an image block and hover over it. A toolbar pops up. Click the icon that looks like three dots stacked vertically. From the menu that appears, choose Edit as HTML. You’ll see some block code in there; triple click to select it all. Then paste in the image’s HTML embed code from Flickr. Then click away from the block. You will get a message about it not being in block format. Click Resolve, and then scroll down and click Convert to Block.

A helpful commenter explained that you can insert a Flickr image simply by pasting its embed code into an empty block. Bam! Easiest Flickr embedding ever in WordPress!

At Coxhall Gardens
Embedded image from Flickr.

This is far easier than it was in the old editors, which had limited Flickr embed functionality. I always switched to HTML view and pasted the embed code there, which was more a pain than the workaround method in Gutenberg. But still, here’s hoping that WordPress streamlines this even more.

Another quirk is that while typing, if you delete the first letter of a word it also deletes the space before it. I have to assume this is a bug.

On my theme, at least, paragraph spacing is different (it’s most noticeable before and after images, as the image isn’t evenly spaced with the surrounding paragraphs). And image captions are centered, where the old editor left-aligns them.

There also isn’t a way to set the text Publicize uses when it sends your post to your social media accounts. I’ve been going back and doing that in the old editor; it seems to hold the formatting okay. Gutenberg creates code that is very different from the old editor’s so that wasn’t a given.

Again, I’m shocked by how easily and quickly I’m taking to Gutenberg. I look forward to WordPress improving on these quirks and adding missing functionality.

Standard