Masonry Galleries & Gutenberg

The new WordPress editor, codenamed Gutenberg, comes with a new gallery block that lets you easily pick the number of columns, and quickly put together a nice image collage.

If we utilize the ability to also add a custom CSS class, we can rearrange this gallery relatively easily, using just a little bit of additional CSS.

Start by opening the Block Settings panel, and adding custom-gallery in the Additional CSS Class field:

We can now write a snippet of custom CSS to hook into that and tune the design. Here's a bit of CSS that'll turn it into a masonry layout. 

.custom-gallery {
     column-count: 2;
     column-gap: 0;
     padding: 0;
     display: block;
}

@media (min-width: 782px) {
    .custom-gallery {
         column-count: 3;
    }
}

@media (min-width: 1440px) {
    .custom-gallery {
         column-count: 4;
    }
}

.custom-gallery .blocks-gallery-item {
     display: block;
     width: auto;
     margin: 0;
}

.custom-gallery .blocks-gallery-item figure {
     height: auto;
}
 

If you'd like an example of what this looks like, head to my Projects page.

No doubt someone will soon enough create a dedicated block just for masonry-style galleries. In the meantime, this trick might hold you over.

Gutenberg & Themes

WordPress is set to receive a brand new editor, some time this year with WordPress 5.0. Along with this new editor are some new features that themes can opt into. This post will cover what those new features are. 

If you only ever read one thing about Gutenberg and themes, though, know this: there is no "Gutenberg theme", and as a theme builder, there's nothing you have to do, to be compatible with the new editor.

As with all things, there may be more features you can opt into in the future. But the editor that will ship with WordPress 5.0 will not require you to make any changes.

Wide Images

While you don't have to do this, you can opt into supporting wide images. Gutenberg specifically supports two new image sizes: wide, and fullwide. Here's a fullwide image:

This is a very wide image.

You can use these alignments on nearly all blocks. Here's the wide alignment applied to a gallery:

When a theme supports wide alignments, blocks get access to two new alignments on the toolbar:

The two last buttons are wide and fullwide respectively. The way your WordPress theme opts into these two alignments, is to paste the following snippet into your functions.php:

add_theme_support( 'align-wide' );

Adding that will make the two new alignment buttons show up, and it will add .alignwide and .alignfull to blocks which have been given these alignments.

The next step to take is to ensure that we have the necessary CSS in place to handle these new classes. The reason you have to opt-in to these alignments, is because the code to do that is slightly more complex than what you need to simply float an image left or right.

I put together a Codepen which features the simplest approach that I've found while still being solid and easy to apply. It works by relying on a main column that has no max-width, and instead applying this max-width to every child element that isn't a wide or fullwide image. The code looks like this:

.site-content > *:not( .alignwide ):not( .alignfull ) {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

See also a version of the same Codepen which features a sidebar, in addition to wide images.

What this code does is say every immediate child of the .site-content, except elements with classnames .alignwide or .alignfull, should have a max-width and be centered horizontally. This essentially lets us specify max-widths of 100% for fullwide (use ALL the screen!) or 75% for wide images. You could also specify pixel-widths here.

But what about floats?

The usual way to float an image is this:

.alignleft {
  float: left;
  margin-right: 2em;
}

Simple. But in a layout with an unconstrained main column, this float would burst out of the main column, and place itself snugly to the extreme left of the viewport. Not what we want. What we want is for it to float alongside the left margin as defined by the main-column max-width we defined previously.

But images in Gutenberg come with extra markup we can leverage. Here's the markup:

<figure class="alignleft">
  <img src="https://cldup.com/yPKF2vjugC.jpg" alt="">
</figure>

The figure here is the same width as the main column, because it was not excluded from the max-width we applied earlier. That means this element is both centered, and has the same margins as the adjecent text. Which means we can just float the image inside this element:

.alignleft img {
  float: left;
  margin-right: 2em;
}

Subtle change, but an important one. We're simply floating the image inside the constrained and centered container. This makes the figure element collapse into a zero-height element, and lets subsequent text float around the image. Just like how we want it.

There are many other ways to support wide images in Gutenberg, but it's important to remember that you don't have to support these alignments, and if you don't do anything, the buttons won't show up in the editor. Hope you'll enjoy using wide images! By the way, this website is now using a theme that supports wide images out of the box, and you can snatch it on Github.

Update, February 24th: The Codepen examples linked in this post have been tweaked slightly, and captions have been added to floated images. 

Good Decisions, Else Options

There's a mantra in the WordPress development community: decisions, not options. It's meant to be a standard to which you hold any interface design decision: if you make a decision for users it'll ultimately be better than forcing them to make decisions themselves. It's a decent mantra — if you're not mindful you'll end up with feature creep and UI complexity, and it's orders of magnitude more difficult to remove an old option than it is to add one in the first place. Adding an option instead of making a decision for the user is almost always bad UI design.

Except when it's not.

The problem with a mantra like this is that it quickly gets elevated to almost biblical status. When used by a disgruntled developer it can be used to shoot down just about any initiative. Like Godwins law for WordPress: once you drop the "decisions not options" bomb, rational discussion comes to a halt.

The thing about open source development is that it's much like natural evolution: it evolves and adapts to changes in the environment. Unfortunately that also means features once useful can become vestigial once the problem they used to solve becomes obsolete. Baggage like this can pile up over years, and maintaining backwards compatibility means it can be very difficult to rid of. Sure, "decisions not options" can help cauterize some future baggage from happening, but it's also not the blanket solution to it.

The problem is: sometimes the right decision is unfeasible, therefore beckoning an option in its absence. WordPress is many things to many people. Some people use it for blogging, others use it for restaurants, portfolios, photo galleries, intranets, you name it. Every use case has its own sets of needs and workflows and it's virtually impossible to make a stock experience that's optimal for everyone. Most bloggers would arguably have a better experience with a slew of WordPress features hidden or removed whereas site owners might depend on those very same features for dear life. By catering to many use-cases at once, user experiences across the board are bound to be unfocused in some way or other.

The "Screen Options" tab is an example of a feature that would probably not exist were "decisions not options" taken at face value. Screen Options exists on the idea that not everyone needs to see the "Custom Fields" panel on their Add New Post page, yet acknowledges that some users will find that feature invaluable. It is an option added in absence of a strong decision, for example, to limit WordPress to be a blogging-only tool. I consider it an example of an exception to the mantra for the good of the user. Sure, the UI could use some improvement, let's work on that, but I really appreciate the ability to hide the "Send Trackbacks" panel.

I'm a fan of WordPress. I'm a fan of good decisions, and I'm a fan of good UI design. I believe that if we relieve ourselves of arbitrary straitjackets and approach each design objective with a sense of good taste and balance, we can make excellent open source software. Cauterizing entire avenues of UI simply because it adds options, however, negates the fact that sometimes those options exist in absence of a higher-up decision that just can't be made for whatever reason.

Twenty Thirteen: Make It Yours

WordPress 3.6 was released today. With it, the Twenty Thirteen theme into which we've poured much energy. One aspect that was particularly important to me, when designing the theme, was to encourage users to customize the theme to their liking. For the very same reason, every icon in Twenty Thirteen is an easily recolorable icon-font glyph. So changing the whole color scheme is basically writing some CSS.

To celebrate the occasion, I made a couple of color themes you can install on your Twenty Thirteen blog.

2013 Green

twentythirteen-green

Green is my favorite color these days. Did you know when danish people have their final high school exams, they sit at a green table, because green has a calming effect on your mind? It's true. I tried it.

Get 2013 Green (preview)

2013 Green Sequence

twentythirteen-green-sequential

Twenty Thirteen has emphasis on blogging, and post backgrounds are assigned based on post formats. If you don't use post formats, but want the colors of Twenty Thirteen, get this one — it'll simply alternate the background colors sequentially.

Get 2013 Green Sequence (preview)

2013 Blue

twentythirteen-blue

I actually threw in a shade of pink, or "salmon", in this blue mix. So it's not entirely shades of sky blue, but I guess you could not use the "status" post format if you dislike salmon. Or you could customize it and make it your own!

Get 2013 Blue (preview)

2013 Blue Sequence

twentythirteen-blue-sequential

If you really don't like salmon but do want an alternating post-format-free blue theme, you'll want to get this one and customize it. Or you could embrace the salmon. Smoked. On toast. With salt and pepper.

Get 2013 Blue Sequence (preview)

2013 Orange Sequence

twentythirteen-orange-sequence

Having made sequence versions of blue and green, it seems unfair not to complete the triad. So here's Orange Sequence — that's the default Twenty Thirteen color scheme, but the colorful post backgrounds are assigned regardless of post format.

Get 2013 Orange Sequence (preview)

How To?

These are child themes. That means they're WordPress themes that require a parent theme to be present, in this case Twenty Thirteen. So these themes will only work if you also have Twenty Thirteen installed. If you're on WordPress 3.6 or higher, Twenty Thirteen is preinstalled.

More Options

One of the best things about open source is that you can modify things to your liking, and even redistribute.

Please do so. Make it your own, and share it back.

I would like nothing more than to see you modify and redistribute any of the above child themes. So much, in fact, that if you'd like to re-color the default Twenty Thirteen header, I've made you this PSD so you can easily do just that.

Now go play with some colors!

Jetpack

large_jetpack

Exciting times at Automattic. We've just launched Jetpack, a brand new plugin for your WordPress blog. It brings you features that were previously WordPress.com only. A lot of features, actually — you should visit jetpack.me to find out all the nitty gritty details — but my favourite features are these:

  • All new, iPad friendly WordPress.com Stats
  • Some unannounced upcoming features!

I'm so completely proud to have played a part in the team-effort design of the Jetpack experience. We really, really hope you like it.

Before The Continental Drift

Just a few days ago, my Pangea theme (which was developed for this website eons ago) was added to the official WordPress themes repository.

pangea_new_home
(What it looked like)

That means the theme is now GPL and auto updatable in the WordPress admin.

Pangea is a really minimalistic theme, which focuses on being simple and usable and not getting in the way of your content. You can see the demo site, but really the killer features are sub-surface:

  • Theme is built and tested on WordPress 2.7 and 2.8
    • Fully widgetized
    • Galleries look nice
    • Gravatars work as they should
    • Comments are threaded
  • The code is massively clean and separated into as few logical files as possible. There’s only one file containing the postloop code, for instance.
  • Improves upon the standard WordPress comment threading
    • Renames “Reply”, to “Reply here” (and makes it translatable!)
    • Moves the “Reply here” link and the entire comment reply box to the bottom of the comment thread, where your comment will actually appear
  • IE6 is, by default, served a standardized CSS view (read more) but this is optional
  • Comes with an english PO file ready for translation

The honest-to-goodness truth of it is that in my freelance venture, I need a clean base theme to build my client sites on. Pangea is it (the last three client sites on my recently launched corp. site, “Dejligt”, are based on Pangea, I swear) and so it has been iteratively cleaned and tweaked for the purposes of saving me time for the next website I’m building. So, while Pangea should hopefully appeal to the minimalists in the crowd, it should definately also appeal to those of you who are going to throw out most of the stylesheet and the images folder, and then build your own continent.