Diving Into Automattic’s Block Experiments

One of the repositories I have been keeping an eye on over the past few months is Block Experiments. It is a monorepo of blocks in various stages of development from Automattic. In total, five of the team’s block experiments are now available for download from the plugin directory. Three others seem to still be under development.

My interest was first piqued when I saw the company’s Starscape Block plugin. The plugin essentially did something that I had needed on a separate project more than a year ago. If it had existed at the time, it would have saved me from a headache or two, attempting to mix custom HTML into a page that was mostly made from blocks. Since then, I have taken a few moments to check in on what the team has been building.

Except for Bauhaus Centenary Block, which is likely only of interest to designers as something fun, most of the block plugins should be useful for many users.

Surprisingly, the team has failed to add the “block” tag to all of its block plugins, so not all of these are listed in the official block directory. It is likely an oversight that will be corrected at some point. For now, it just makes it a little harder for those of us looking for standalone block plugins to find them.

Starscape Block

Using the Starscape block in the WordPress editor.
Configuring the Starscape block.

The Starscape Block plugin creates a container with a background of moving stars. End-users can control the density and speed of the stars. The block provides two gradient background options (linear or radial) along with 12 predefined gradient colors to select from. Users can also control the color of the single text input it provides.

The biggest downside of this block at the moment is that it does not behave the same way as the core Cover or Group block. There is no way for users to add anything but a single line of text through a rich text field. If the team would open it up to allow for nested blocks, it would be far more useful.

There is a lot that is possible with this block if the team pushes the envelope a little more. For example, it would also be interesting to have the ability to layer the stars over an image background, such as a cityscape or forest.

Waves Block

Using the Waves block in the WordPress editor.
Adding custom content within the Waves block.

Similar to Starscape Block, the Waves Block plugin creates a container block with a moving background. Instead of stars, the background is made up of — you guessed it — waves. It is not a simple copy of a plugin that does the same thing. The Waves block is a more robust solution. It works almost the same as the core Cover block and allows other blocks nested inside.

End-users can control the complexity, mouse speed, and fluid speed of the waves. They can also set the minimum height of the container and choose the four colors that create the effect of flowing waves.

This block was fun to play around with. Users could create some interesting hero-style page headers with this plugin, especially when WordPress treats the post title/header area as a block container in the future.

Event Block

Configuring the Event block in the WordPress editor.
Setting up a custom event with the Event block.

More often than not, on most projects that I have worked on that posted events, it was typically a single event once in a while. Many of the event management plugins were overkill. Several times in the past, I have built a widget or a simple shortcode to output a basic event notice. For end-users who need a basic method of outputting an event notification on their sites, the Event Block plugin may be the best option.

It is a standalone block that allows users to enter an event title, date, location, description, and image. It is a simple, no-fuss solution.

One missing component I would like to see with this block is the ability to add both a start and end date. For multi-day events, users must provide that information in the description box, which would be acceptable for most use cases. However, the full event date would be better served via the “when” field.

Layout Grid Block

Creating columns of content with the Layout Grid block in the WordPress editor.
Creating a book section with the Layout Grid block.

We have previously covered the Layout Grid Block plugin in a post on whether core WordPress should include a grid system. However, it is worth noting this block is a part of Automattic’s experimental block repository. The plugin has also been updated and improved since the Tavern’s last look. It worked well before, but some minor bug fixes have drastically improved its usability.

Layout Grid Block is quickly becoming one of my favorite plugins for creating columns. It is easy to set up between two and four columns of content and change how the content is displayed based on the screen size. Some of the other plugins I have tested are more powerful. However, some of those tend to be more complicated than what the average user may need. This plugin will likely fit the bill for many use cases.

10

10 responses to “Diving Into Automattic’s Block Experiments”

  1. Amazing where Automattic is going with Gutenberg and blocks!
    Really like the event one, so easy to use and implement. For small website, it is perfect so you don’t need to install a full event solution. Not a big fan of the stars or waves but still nice to see the animation. Thanks for sharing.

  2. Thanks for noticing our experiments and the kind words. 🙇‍♂️
    (Note: I work at Automattic on the team behind these experiments)

    The blocks in general are experiments in the open, trying out different ideas, pushing on what we can do with blocks and also a place to play. Blocks may start here, but then get promoted elsewhere, which is why some may not be listed in the block directory.

    For example, the Image Compare block will be launching in the next version of Jetpack next week. The Layout Grid block we hope to bring to core, but need to refine more and optimize the CSS payload before introducing there. Also the Rich Image block is a just about ready to merge to the Gutenberg plugin as an experiment to iterate on there.

    Thanks again for the kind article, we are excited for the possibilities with the new platform, and plan to keep iterating and exploring what can be done with Gutenberg. So hopefully much more to come.

  3. I’ve given up on hoping each Gutenberg release will have a dedicated metadata API or at least some simple implementation of taking some of the important (to me) php developed metadata components I’ve customized for my site over the years. Your prior post about the Fields API was encouraging but that seems DOA.

    Textarea controls with html/Tinymce editing capability to store metadata and any kind of AJAX related population of html form control options/values are nightmare fuel. I understand most users want easy to generate polished content and rarely use metadata but for me, I can’t use Gutenberg to do the same stuff I did in classic without some serious workarounds and learning investment.

  4. When is WordPress going to get something like an Article Embed block that let’s you embed a news article from any site (rather than just from WordPress sites only)? In effect, a feature that most social networking platforms have built-in as a core feature to make sharing articles of interest super easy to do by just pasting in the article URL.

    I mean there’s this emphasis to post content on your website first (Indieweb), rather than having it scattered across the Web on different social network platforms, yet WordPress doesn’t even have the same basic functionality and ease of use that these platforms have when sharing news articles.

    Why is this so complicated to implement? And why is that no one seems to see it as a crucial component to attract people to the platform for blogging, instead of using other social network platforms? For example, I thought JetPack would have implemented something like this a long while ago (to replicate something like Embed.ly) but still nothing.

    • This is a post about Automattic’s block experiments, so we’re getting a bit off-topic from that discussion. The embedding system also doesn’t really have anything to do with blocks. The embed-related blocks are merely a wrapper over the existing oEmbed system.

      Honestly, I don’t think this is a widely-needed feature. It was tough to turn up many results when searching for similar requests. For the average user, WordPress covers a vast array of providers that will cover their needs. If there’s an oEmbed provider missing from the core list, there is likely a plugin out there that will cover it.

      I’m not 100% up to speed on how Twitter, Facebook, etc. handle embeds, but believe it is a much different type of system that takes a snapshot of a URL and caches the data (image, title, description) on their servers. That seems more like the type of thing that would fall more squarely within plugin territory.

      Embeds, as we know them in WordPress, should never happen unless the site owner explicitly allows them through something like oEmbed. A big part of this is because such embeds use resources from the third-party website.

      The embed system is one of my weak spots in development knowledge, so I hope I described that correctly.

      • Nick, that plug-in is brilliant! Exactly what I was looking for. Thank you. I’ve been looked for something like this for a while but couldn’t find anything when searching within plug-ins.

        “Honestly, I don’t think this is a widely-needed feature.”

        Justin, my apologies for posting it here but I saw it as an area where I’d like to see “experimentation” and development in WordPress because I see it as a basic need (especially for an an end user who wants to migrate off a social network to maintain and own their own content but also maintain a similar easy workflow).

        But most developer focused WordPress sites that I’ve visited and raised things like this, pretty much respond in the same way. They don’t see a need for features (from a developer’s perspective) that to me are basic needs for an end user. For example, when I told my wife about this lack of basic feature on WordPress (that most social networks have), she thought it was crazy.

        Another quick example of developers not seeing what’s essential to an end user is quote blocks. The basic quote blocks within most WordPress Themes have been stylized to have default font sizes equivalent to something that you’d use with a larger pull quote. So font sizes that are way, way too large for quotes. The developers I’ve mentioned this to, think I’m strange for raising such a point. Yet if you’re an end user who does research, often sharing quotes from your research, this is completely frustrating thing to encounter in theme after theme. Like try going to a website like Brain Pickings and dramatically increase the quote fonts sizes. Again it looks absurd but no one seems to care about end users encountering these basic issues when using WordPress.

        Again, sorry for deviation.

        • I think this is as illustration on the disconnect it seems like there is between developers and users. When you posted your reply I knew exactly what you we talking about and I too thought it was a basic feature that WordPress was missing too.

          I agree about quotes too. I never use them as they are usually so huge they look ridiculous.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.