Posted on

Exploring Photo Blocks, an Experimental FSE-Ready Photoblogging Theme

Kjell Reigstad announced the Photo Blocks theme on December 9. It is a part of an ongoing set of experimental work from the WordPress Theme Experiments repository on GitHub. It is essentially a testbed of ideas that are helping to propel the upcoming block-based theming era.

In the past few months, I have covered the repository’s Carrd-like landing page theme, Twenty Twenty-One Blocks, and the Full Site Editing (FSE) Theme Generator. There is a lot of movement happening in the repository that theme developers would be remiss to overlook.

“I built a new block-based photoblog theme in the experiments repo,” Reigstad tweeted just a couple of weeks ago. “It’s refreshing to see how well this works just with existing FSE tools.”

Like most FSE-capable themes currently making the rounds, it is simple. There are miles left before block-based themes and the upcoming site editor reach maturity. Photo Blocks showcases yet another step in the evolution of the system.

Photo Blocks theme in the site editor.
Posts page view of Photo Blocks in the site editor.

The theme uses the Query block’s new grid view, which was added in Gutenberg 9.5. The Query block is one of the most important pieces of the Full Site Editing system. Like in traditional themes, the query and “the loop” output posts on the front end.

The addition of the grid view allows themes to output their posts in columns. This is a nice addition for Photo Blocks and other photoblogging or portfolio themes. Currently, the Query block supports only a second type of view, the default list of posts. It all seems to limit design possibilities right now, but the grid option does provide some hope that more robust tools are coming.

The Query block is undoubtedly one of the most complex features the Gutenberg team is building, and it is a crucial block for the upcoming site editor.

There is also no posts pagination or navigation at the moment. That is because the Gutenberg team is still ironing out the details of such a block. This is another Herculean task given the near-limitless variations on designing posts navigation. The block will need to provide theme authors the flexibility they are accustomed to when writing code.

Why Testing and Building Experimental Themes Matters

The development of Photo Blocks exposed some missing features in Gutenberg. Without community feedback from building and testing block-based themes, it is tough for the development team to identify such issues.

Currently, the only way to have same-height images in the Photo Blocks theme’s post grid is to manually crop and upload images with the same aspect ratio. Reigstad opened a ticket to set a consistent crop for the Post Featured Image block. I would also recommend an image-size option similar to how it is handled in the Image block.

Traditionally, themes that output a grid of featured images would fall back to a default image or use the first image from the post content if one was not set. There is currently no way to do this with the Post Featured Image block — another missing key feature. Reigstad opened a new ticket that proposed taking the idea further.

“In the past, the featured image was a single image, added and managed separately from the rest of the post content,” he wrote. “For block-based sites however, that restriction is largely unnecessary. Rather than just an image, we should consider making it possible to set a video or audio embed as the ‘Featured’ block. Also, since posts are made up of structured data, it’s theoretically possible to signify any block from within post content as a ‘Featured’ block.”

The idea of featured media is not new. Many themes have had featured audio and video in the past. However, the concept of marking any type of block as featured is worth exploring. Even if not every block lends itself well to this, surely some do beyond images.

Posted on

Get Involved With Block-Based WordPress Theme Experiments

As the WordPress theme review team wound down their team meeting yesterday, they were finalizing what their focus area for 2020 would be. The general agreement among members was that block-based themes should be at the top of the list. There was some pushback from a minority that did not want to see block-based themes at all. The reality is that themes will be changing in the next year or two.

As a team, this is the group of people who will ultimately need to set guidelines based on something WordPress has never done before. They will also need to work diligently to bring theme authors up to speed on how themes of the future will be built.

At this point, there are many unknowns, but work on tickets for full-site editing is happening at a quick pace.

Allan Cole, Theme Imagineer at Automattic, later invited team members to get involved with the Theme Experiments project on GitHub. It is a way for developers in the WordPress community to help steer the theme-development ship. Currently, the repository is fairly bare-bones and represents only the early work toward creating themes from blocks. Each sub-directory in the repository will be an individual experiment that explores creating themes using blocks or block templates.

The initial documentation for block-based themes was introduced in early December 2019. Since then, a handful of contributors have put together some working theme examples to get the ball rolling.

The repository is open to contributions from anyone. This would be a good moment for members of the larger theme development community to start sending in pull requests to share their experiments.

To test any of the experiments in this repository, you need to be running the latest version of the Gutenberg plugin. You must also enable the “Full Site Editing” and “Full Site Editing Demo Templates” options from within the plugin’s “Experiments” screen.

Parisienne Theme

Screenshot of the Parisienne theme built from blocks.
Screenshot of the Parisienne theme.

Currently, the only approved theme experiment is the Parisienne theme. It’s a test of how block templates and template parts work. A live demo of the theme is available.

Don’t expect to be blown away. There are many missing pieces in the Gutenberg plugin, such as blocks for displaying posts and similar items. The idea is to explore how templating will work and provide feedback to the Gutenberg development team.

One major concern I have at this point is the flat nature of the two sub-directories for housing templates and template parts. With the seven template part files in this theme, I worry that we are not learning from the mistakes of the past. The sub-folders could become unruly, particularly /template-parts, and house dozens upon dozens of files in a real-world scenario. This is no different from how themes currently work other than the location of the template files. Now would be a good time to reimagine the folder structure and optimize the organization of theme templates. For example, group sidebar templates under a /template-parts/sidebar folder instead of dumping everything into one location.

Twenty Nineteen and Twenty Twenty

Screenshot of the Twenty Nineteen Blocks experimental theme.
Early look at a block-based Twenty Nineteen theme.

The repository has two open pull requests for experimenting with blocked-based versions of the Twenty Nineteen and Twenty Twenty default themes. Of the two, the Twenty Nineteen Blocks theme seemed the least broken, despite the original not being designed specifically for the block editor.

Porting the most recent default WordPress themes is important because it provides theme authors a way to compare how old methods of handling features will work in the new block system.