Tag: news

A couple of weeks ago, Munir Kamal updated his Block Slider plugin for WordPress. While not as popular as some of the other projects he has spearheaded, such as Editor Plus, he wanted to breathe some fresh life into it.

The original plugin allowed users to insert a slider block and create the slides directly from the post or page editor. The new approach is similar. However, end-users can only edit it from a new “Block Slider” post type.

Existing users should note that the new version breaks compatibility with their old galleries. It would be wise to make a backup to revert to if necessary.

Kamal listed several benefits to the updated approach:

• A clean and wider slide editing/creation interface. Comparatively, the ‘block’ had less room to work with.
• The fact we have a separate interface/post type, I took the opportunity to modify it a bit to make the slide creation easier for users.
• This approach lets users create and manage sliders easily from one place (post type) compared to in-page block.
• Using the slider to multiple pages/posts is easier with this approach.
• The best part and the most important reason is that the slider can be used outside Gutenberg editor or anywhere with any page builder using the shortcode (or I could provide more ways to use it in the future).

Depending on the user, some of those can be advantages. However, for others, they are not. For example, not all websites would benefit from a dedicated slider management admin screen. Sometimes, a one-off slider is all that is wanted for something like the front page. The new approach creates more work and adds an unnecessary admin menu for those use cases. For users who add multiple sliders to their sites, it should simplify management.

Kamal touts using the block shortcode anywhere, but this feels like a step back from the earlier version of the plugin. It is now impossible to see what a slider looks like mixed with page content without previewing it on the front end. When laying out a full-page design via the editor, having the live preview can be vital to putting it all together.

“I am working on a block that lets you insert a slider (and maybe do a bit more),” Kamal said when I questioned him on the implementation. “It should be out in the next update soon.”

Overall, the user experience of creating and customizing sliders feels smooth. It is easy to attach new slides via the “Add Slide” button fixed to the bottom of the screen and navigate to others.

Other than a minor spacing issue where the right navigation arrow butted against the side of the screen, I had no trouble using it. It worked well in the editor and on the front end.

Block Slider has a commercial version that begins at $29 per year. It includes updates and support for one site. There are also five-site and unlimited tiers for $49 and $99, respectively.

However, most users will likely not need the upgrade. Other than a handful of options, including a carousel view and a few customizations, most features are in the free version. And the plugin does not lack out-of-the-box options.

If anything, the number of settings is almost dizzying. Users who want ultimate customizability should enjoy tinkering with the design tools. Those who prefer a scaled-back interface can always leave the defaults in place. Otherwise, diving into them can be overwhelming.

Kamal shared an intro video to the plugin that barely scratches the surface of what the plugin can do:

I like where Kamal seems to be going with the plugin. His target audience focuses on users who love plenty of options and an easy way to manage their sliders. For one-off use cases, it is best to look elsewhere. Some bits still feel a little rough, like using a shortcode when placing the slider on a page, but that can always be addressed later.

WordPress developer Phi Phan has been making small splashes lately, but in a sea of 1,000s of plugins, it is increasingly tough to make a wave. Over the weekend, he released the Block Enhancements plugin, the first pass on a project that he plans to iterate on with new ideas.

However, this is not his first block-related plugin. Last year, he launched Content Blocks Builder, a plugin that allows developers and users to create blocks from others, patterns, and variations. In February, he released Meta Field Block. He then followed it up with the launch of SVG Block and Block Enhancements last week.

I have quietly tested each as they strolled into the WordPress plugin directory, but they kept getting relegated to the back of the draft posts list. Most seemed like solid plugins at the time, and a reminder from two different people in the past week to check out Phan’s work lit a fire under me. It was time to share what he has been doing with WP Tavern readers.

The SVG Block plugin is a unique take compared to some existing solutions. Users can output the SVG as an image or implement it as a divider.

Phan is not short on ideas for new blocks and enhancements. He rattled off a hefty list of features that he plans to build when questioned.

“A simple separator with an icon,” he noted as an idea. “I’ve tried to support icons in the core/separator, but it requires changing the markup. So I may create a new tiny block just for it. Maybe a wavy divider designer block. I know there are already some on the plugin directory, but they are not fit for some use cases. I’m kind of obsessing with SVG stuff. A ‘toggle’ button block for showing modal, off-canvas, or collapse layout.”

BoldBlocks is his upcoming website, which he will eventually use to promote his plugins. He has yet to launch it—likely because he has been too busy developing new projects.

“[Content Blocks Builder] is my main business focus in the long term,” said Phan. “It’s a tool allowing users to create blocks from other blocks. It helps to create responsive ‘boring’ grid layouts or carousel layouts easily without touching code. I used to create layouts like those with the ACF repeater field, but I didn’t like that kind of workflow in the Gutenberg world anymore. That plugin has many more features than the description on the plugin page, but I’ve not finished rewriting the description and user guides.”

The Block Enhancements Plugin

Block Enhancements is not a block in and of itself. It takes a similar route as EditorsKit and Editor Plus, adding features on top of the system.

The first version of the plugin adds a single feature that allows end-users to stick icons into the core Button, Heading, and List blocks.

Maybe the plugin does not offer enough features to grab everyone’s attention, but it is off to a solid start. Phan does not go overboard with the UI, keeping it simple and following WordPress standards. The icons feature had just the right amount of customizability that I never felt like I needed anything more.

While not listed anywhere in the plugin description, the default library looks to be a mix of Ionicons, Bootstrap, and core WordPress icons. In total, there are over 3,500 options for users to choose from.

If the library does not offer enough choices, the block allows users to directly paste in SVG code.

This is the start of something new, and Phan has already created what looks to be an exciting to-do list for Block Enhancements’ future. Some potential features include:

• Box-shadow builder.
• Multi-border design options.
• 2D transformations via translate, rotate, skew, and scale.
• Fancy border-radius implementation a la 9elements’ project.
• Responsive text alignment.
• Animated reveal effects.
• Copy/paste styles.
• Child blocks selector.

If Phan continues iterating on Block Enhancements with these and other features, it will be a plugin to keep an eye on.

Up next in our Building with Blocks series is a quick tutorial on how to build a timeline page. Timelines give brands and organizations a visual way to introduce themselves and feature highlights from their histories. The block editor makes creating a timeline easier than it ever was with legacy plugins.

For this example, I selected the Timeline Block For Gutenberg by Cool Plugins, which is available on WordPress.org. It’s one of just a handful of plugins that offer timeline blocks. It makes it easy to create a responsive timeline that can be customized to match the organization’s brand, with live previews during the creation process.

I used the relatively new Blockpress theme from MotionBlocks, which supports full site editing so users can customize everything directly on the page. I found the theme easy to work with when creating my example website for this project. It also has compatibility with WooCommerce, if you’re selling something on your site. The Timeline Block for Gutenberg plugin will work with any theme that supports the block editor, but I wanted the chance to play around with Blockpress.

This video demonstrates how you can create a timeline in under five minutes.

The first step is to install the theme and plugin. Once both are activated, create a new page that will house the timeline. Click on the block inserter and select Timeline Block.

One convenient feature about the plugin is that it will insert some placeholders, so it’s easy to see how to add new timeline items (“stories”). The easiest thing to do is replace the text and images that are already there and add more stories at the end if you need a longer timeline.

The plugin lets you customize the story heading, description, and primary label colors, and even the line, icon color/background, and story border. This makes it possible to match the colors to a site’s branding. On the individual story settings, you can change the image size and customize the story icon by selecting from the Font Awesome icon collection. The stories can also link to other posts, so it’s flexible to be used for a variety of different purposes in addition to your standard corporate timeline.

The day has finally arrived when a block theme does something interesting with the featured image on single post views. One of my biggest pet peeves is when themers simply dump it at the top of the content and call it a day.

I nearly always bolt straight for the site editor to remove the single-post featured image upon installing block themes from some authors. However, after installing Archeo, Automattic’s latest, I simply let it be. At least in this instance, the implementation did not make me wonder if we were ever going to get this whole block-based theme venture right.

Perhaps the most impressive thing about the single-post header design is that it works with the limited toolset offered by the current Featured Image block.

If there is one knit-pick I have it is that the post and site titles do not align on the left side of the page, at least on wide-desktop views.

So, the single-post header is well-designed. How does the rest of the theme hold up? I am getting to that, but every now and again, something special about a design catches my eye. And, I cannot wait to let others know about it.

Automattic is the most prolific block theme creator to date. Its Theme Team has rolled out a dozen designs to the WordPress directory over the last year. Many of its initial outings had a familiar feel — tiny variations on a simple base. However, things have livened up recently. Livro, the dark theme that made me dislike dark themes a little less, and Skatepark, a unique experiment in its own right, represented a fresh start after the previous months began to feel stale.

Archeo continues that momentum. The theme is bold when it needs to be while making enough use of whitespace to not overwhelm readers.

It is one of the few faithful representations of magazine designs that I have seen. No, I am not talking about the muddied term in some circles that confuses it with news design. It reminds me of those stunning feature layouts that would draw a reader into a story as they flipped through the latest gloss-covered print that arrived in the mail. I am a product of my generation and will always have a sense of nostalgia for the dying art form, and I love seeing web-based implementations of it when they work well.

Nearly every one of Archeo’s image-categorized patterns captures that essence of a magazine featured article. The following is one of my favorites.

The theme is described as being inspired by Mayan history and culture. Archeo’s patterns are littered with tidbits of historical text and images that make me want to learn more about the subject. Great design can speak to us in ways that we were not expecting.

As an aside, I would love to see creators who describe their designs as “inspired by” something to provide more insight into the subject via a blog post. For those unfamiliar with whatever that subject may be, it would pull back the curtain a bit, giving us a glimpse into why it was important to the designer.

Archeo is the first theme that I have seen use the upcoming web fonts API expected to land in WordPress 6.0. Users with the Gutenberg plugin installed should see the theme’s only font, Chivo, gracing the front end and editor. Those without the plugin should see their system’s default sans-serif font.

The following screenshot is of the theme’s 404 template and shows the Chivo font:

It looks far better than the default, at least on Windows. I recommend running this theme alongside the Gutenberg plugin for the ideal result.

I am surprised the Theme Team did not include a backward-compatible method of handling web fonts for WordPress 5.9 users. It would not have taken much code: a single hook and a check for whether the wp_webfonts() function exists.

Archeo is now the 59th block theme to land in the WordPress.org directory. I am eager to see more from Automattic’s Theme Team, especially if this will be its minimum standard with future designs.

Background tools in Gutenberg are currently limited to the Cover block, but contributors are working on expanding support so that any block can opt into it. Discussions about the best way to do this have been happening for the past two years and now are gaining some momentum.

“Right now it’s possible to add video backgrounds, colored overlays, etc, to the Cover block alone,” Matias Ventura said in 2019 ticket on the UI for background tools. “It would make sense to extract this and extend to other container blocks (group and columns, for example) as well as expanding the features.”

Gutenberg contributor Andrew Serong has created a draft exploratory PR for adding opt-in, server-rendered background support for blocks, which would save background image values to the block’s style attribute in a backgroundImage key. Serong created the PR as a rough, experimental approach and published a few screenshots of how the inspector controls might fit in. However, Gutenberg designers are working on a more refined design for background support in the editor.

Today, Gutenberg designers Joen Asmussen and Javier Arce published a GitHub issue with their vision for a complete reorganization of background controls that includes layer management, layer reordering, and support for filters/blend modes.

“The core idea is to group all the layers (both overlays and media layer) inside a single sidebar section called Background, abstracting the organization of the Cover Block layers on the canvas and simplifying the block sidebar,” Arce said.

These new designs intersect with the goal of expanding background support for use in other blocks beyond the Cover block. There are many other considerations that splinter out of adding background image support to blocks, which contributors have noted in the discussions. These include features like the ability to add a body background image to block themes, specify a color palette to be used for background colors, and the ability to add multiple background images.

Expanding background image support and refining the UI for background controls is still a little ways off, but the project is starting to make significant steps forward. This will be an exciting addition that will markedly expand users’ ability to customize blocks.