"Convert to blocks" replaces all images with the same image

[jasmussen]

In upgrading an old post to Gutenberg, the "convert to blocks" feature is extremely handy. But in the case of image conversions, it failed on this post. All blocks were converted right, including the first image. But every subsequent image was replaced by the first image.

GIF:

Here's the post, if you'd like to try:

<a href="http://moc.co/wp-content/uploads/2015/06/twentythirteen.png"><img class="alignright size-medium wp-image-10332" src="http://moc.co/wp-content/uploads/2015/06/twentythirteen.png" alt="twentythirteen" width="400" height="400" /></a>

Twenty Thirteen, the theme I designed with <a href="http://en.wp.obenland.it/">Konstantin</a> and <a href="http://simpledream.net/">Lance</a> is <a href="http://en.blog.wordpress.com/2013/04/25/twenty-thirteen/">now on WordPress.com</a>, and will soon be the default theme of WordPress 3.6.

Designing Twenty Thirteen has been a pretty remarkable experience, mainly because I got to work with such an amazing community. There's nothing to temper a theme into shape like hundreds of people submitting patches. It's as much a privilege as it is a learning experience and the design has changed so much since my initial mockups, all for the better. Here's how it all started.
<h2>Brief</h2>
Through machinations I have not yet fully understood, an invitation to design a new default WordPress theme landed in my lap at the end of 2012. After an ensuing song and dance show with no-one watching, the reality of the situation slowly descended on me. My motto for the next couple of months was <a href="http://noscope.com/2012/litany-of-fear/">the Litany of Fear from Dune</a>.

The overarching vision for the theme that <a href="http://ma.tt">Matt</a> had set out, was <a href="http://make.wordpress.org/core/2013/02/18/introducing-twenty-thirteen/">a focus on blogging, and great support for post formats</a>. On top of that, we wanted a colorful, warm and friendly vibe. That plus total creative freedom was pretty much the extent of the direction given. Blue skies are both daunting and exhilerating.

Keeping those core values in mind, I started creating palettes, picking fonts, and drawing shapes.

<em>Note: It's important to understand that there's a new Twenty theme every year, and one goal is to be different from the year before. Twenty Twelve is CMS oriented and features a squeaky clean codebase. Twenty Thirteen is focused on the blog, putting your reverse chronological post stream front and center. Will next year be a CMS theme again? Perhaps; I personally cannot wait to see what will be created for Twenty Fourteen.</em>
<h2>Design</h2>
It was quite a relief that the theme didn't have to be anything like the previous Twenties. After all, Twenty Twelve is still a fantastic theme. It's current and it's wonderful, and the year-naming of the Twenty themes (unlike with Microsoft Office) does not indicate "newer or better" -- just: different. This gave me the freedom to explore a bunch of ideas, including dropdown menu widget areas, multi-column posts, crazy abstract headers, tiled galleries, large pictures, huge fonts and bold colors. Some of those initial ideas survived, others were tempered by reality.
<div><a href="http://moc.co/wp-content/uploads/2015/06/palette.png"><img class="fullbleed wp-image-10349" src="http://moc.co/wp-content/uploads/2015/06/palette.png" alt="palette" width="2000" height="1000" /></a></div>
<a href="http://moc.co/wp-content/uploads/2015/06/bitter.png"><img class="size-large wp-image-10350" src="http://moc.co/wp-content/uploads/2015/06/bitter.png" alt="bitter" width="780" height="213" /></a>

<a href="http://moc.co/wp-content/uploads/2015/06/source.png"><img class="size-large wp-image-10351" src="http://moc.co/wp-content/uploads/2015/06/source.png" alt="source" width="780" height="222" /></a>
<h2>Post formats</h2>
Posts are posts, right? Sure, but what if there were special layouts that were tailormade to different types of content? That's the genesis of post formats in WordPress, and the feature is getting a huge bump in the upcoming 3.6 release. With Twenty Thirteen, we wanted to hook into that new ecosystem, and encourage the use of different post formats to better highlight a variety of content. So I spent a great deal of time trying to find a pattern for each post format: <em>what does a "status update" look like</em>? Let me tell, you, I have stacks of paper sketches -- many of them angrily crossed out, some of them so quickly jotted down they're barely readable anymore.

<a href="http://moc.co/wp-content/uploads/2015/06/mockups.jpg"><img class="aligncenter size-medium wp-image-10376" src="http://moc.co/wp-content/uploads/2015/06/mockups.jpg" alt="mockups" width="600" height="394" /></a>

In the end the key to cracking the design was assigning a color swatch to each format. You'd be able to create your own alternating tapestry of colors.

<a href="http://moc.co/wp-content/uploads/2015/06/tapestry.png"><img class="aligncenter wp-image-10373" src="http://moc.co/wp-content/uploads/2015/06/tapestry.png" alt="tapestry" width="400" height="800" /></a>

The mockups were quite interesting and difficult to do, because a zoomed out view of such a tapestry of posts doesn't do the overall design justice. You have to zoom in 1:1 and watch the colors change as you scroll down the page -- like how users will see it. Scrolling becomes almost magaziney.
<h2>Icon Font</h2>
One aspect of theme design that becomes much more difficult when a wide range of background colors is used, is iconography. Icons for comments, tags, categories etc, are usually PNG files. The problem with that is that you bake the icon color into the graphic file, making it necessary to create a rather large stack of different-colored icon files in order to ensure contrast on all background colors. Since we wanted it to be super easy for users to change the default Twenty Thirteen color scheme if they wanted to, PNG files weren't ever going to be an option. Fortunately I was allowed to release an icon font I'd created for WordPress.com, and use that. The result, <a href="http://genericons.com/">Genericons</a>, is a free and GPL icon font full of symbols that are useful for WordPress themes. I hope to see it in use far beyond Twenty Thirteen, because it's just so wonderful to be able to add colors, drop shadows or even CSS animation to fully resizable symbols, compared to dealing with PNGs.
<h2>Header</h2>
With a tapestry of alternating colors, how does a header fit in? The answer was to treat the header like we treated post format backgrounds: have the background illustration full size, regardless of browser width, cropped if seen on a mobile device. This made the header a decorative element and part of the tapestry. As for the contents of the header, I explored abstract color shapes, flat and simple like the post backgrounds themselves.

<a href="http://moc.co/wp-content/uploads/2015/06/headershapes2.png"><img class="alignright size-large wp-image-10361" src="http://moc.co/wp-content/uploads/2015/06/headershapes2.png" alt="headershapes2" width="780" height="243" /></a>

<a href="http://moc.co/wp-content/uploads/2015/06/headershapes3.png"><img class="alignleft size-large wp-image-10362" src="http://moc.co/wp-content/uploads/2015/06/headershapes3.png" alt="headershapes3" width="780" height="243" /></a>

<a href="http://moc.co/wp-content/uploads/2015/06/headershapes1.png"><img class="aligncenter size-large wp-image-10378" src="http://moc.co/wp-content/uploads/2015/06/headershapes1.png" alt="headershapes1" width="780" height="433" /></a>

Here's a video of me creating one of the headers in Photoshop:

http://www.youtube.com/watch?v=aTVU9GfIvM0&amp;rel=0

Here's a fun header that didn't make it:
<div><a href="http://moc.co/wp-content/uploads/2015/06/scrapped-header.png"><img class="fullbleed wp-image-10366" src="http://moc.co/wp-content/uploads/2015/06/scrapped-header.png" alt="scrapped-header" width="3200" height="600" /></a></div>
Speaking of kooky, one way to create a warm vibe, I find, is to not take everything too seriously. So we put little tweaks here and there to hopefully make you smile. The <a href="http://twentythirteendemo.wordpress.com/404">404 page</a> is an example.
<h2>Make Your Own Kind Of Music</h2>
Twenty Thirteen is not for everyone -- it's for colorful blogs with a variety of content. If you're into that, I really hope that you'll enjoy using Twenty Thirteen. I hope you'll customize it, re-color it, hack it and make it your own. In fact at some point in the not too distant future, I'd like to release a couple of alternate color schemes and templates to get you started. This is not the end.

It's been such a privilege to work on this theme, and I thank Matt and the community for not only giving me the opportunity, but for embracing the colors and shapes I concocted. Probably the greatest privilege of all was to work directly with Lance Willet and Konstantin Obenland, my partners in crime. These guys took my mockups and made them sing. Seeing the theme come together was like magic. A design is just an idea, but for ideas to become real they need to meet with reality with all that entails. Lance and Konstantin were supportive and they understood and appreciated what we were trying to do, and for the work they did (and are still doing) they have my undying admiration. I'm tremendously proud to have my name listed next to them in the great halls of the Twenty theme developers. It's a bucket-list item I never thought I'd be able to check. So thanks so much for that.

[jasmussen]

@iseulde I think you worked on the initial "Convert to blocks" feature. Any idea what's going on? Thanks.

[jorgefilipecosta]

Hi @jasmussen thank you for reporting this issue. This issue refers to the same root cause as two other issues: #4694 and #4449. I already created a PR that should fix it: #4740.

I'm closing this one for now.