Build Featured Boxes with the WordPress Block Editor – WordPress Tavern


It’s a new day with another chase for this elusive block plugin that will bring some joy into my life. Today’s experience is courtesy of Sumaiya Siddika’s Feature Box plugin. This is a simple block that allows end users to upload an image and add content to an offset box.

The output of the plugin is a typical pattern on the web. As usual, I’m excited to see plugin authors experimenting to bring these features to WordPress users. I want to see more, especially from first-time plugin contributors.

I was able to quickly set up the block and add my custom content to it. This is what the block looked like after I grabbed my content and personalized it. I saw myself as a recipe blogger for this test.

Insertion and modification of the Feature Box block.

Technically, the plugin worked well. I did not encounter any errors. Everything was easy to personalize. However, this has never been an ideal user experience.

The first thing I immediately noticed was that the uploading of images happens in the sidebar of the block options. Basic WordPress blocks have a dedicated button in the toolbar for adding images and other media. I also found myself wanting more direct control over individual elements. How can I change the header font size? Where were the typical button styles like Outline and Solid Color? How to insert other blocks, like a list?

Neither of these things was possible. Like many other blocks, the developer created a system with specific parameters and the user cannot get out of it. There are times when that stiffness makes sense, like when building custom blocks for clients. However, more often than not published plugins should be much more open.

This tightly controlled block reflects the way WordPress worked in the past. It was often inflexible, leaving users with what the theme and plugin developers thought was best for their sites.

The block system is about to throw away those overly rigid concepts and give users power over their content. The job of plugins and themes is to define the framework under which the user operates. They have rules in place to more or less prevent things from breaking, but users can buckle up in the driver’s seat. Their destination is theirs.

The block would have been much more complete if users could control all of the contents of the box. Ideally, they could place all the blocks they want in the “content” area of ​​the Feature Box block. The design would match their theme better too.

A few weeks ago, I wrote an article called You Might Not Need That Block. The principle was that users could recreate certain blocks with the current editor and that themers could facilitate this by offering models.

I knew that replicating this particular block would be impossible without at least a little custom code. The WordPress editor has no functionality to shift the position of a block.

A theme author could easily duplicate this functionality. Typically, I would create a custom model, complete with all of the existing parts in place. However, I wanted to approach this with custom block styles. This would allow end users to select the content offset in the sidebar and change it if necessary.

To note: For those who want to learn how to create custom block styles, Carolina Nymark’s tutorial is the best resource.

The Cover block made an ideal candidate for this. Because it has an existing inner wrapper element, that meant I could target it with CSS and move it around. The following is a screenshot of the Offset Left style I created:

Cover block in the WordPress editor with a left shifted content area.
Offset left cover block style.

I just replicated the code and changed a few values ​​to create an Offset Right style immediately after. The code is available as a GitHub Gist. This is a simple proof of concept and not a fancy product. There are different approaches to this, and several coverage block options are not supported. Theme authors are free to take the code and use it.

These block styles looked much better because they matched my theme. Everything from the spacing to the border radius to the button was as it should be.

The big win was that I had design control over all aspects of the content area. I could select the button style I wanted. I could change my font sizes. The default spacing matched my theme as it should.

The issue I encountered with the block style method allows users to control the background color of the content area. The Feature Box plugin wins here in the user experience category because it has an option for that. The block style I created inherits its background from the parent of the Cover block. It may not be immediately obvious how to change it.

The other “problem” with the block style is that it does not support wide and full alignments for the Cover block. This is because I didn’t take the experience that far, only replicating the plugin layout. I’ll leave it up to the theme designers to tinker. There are many possibilities to explore; don’t wait for me to provide all the ideas.

My goal with this article and others like it is to show how I would approach these things as a user and developer. As a user, I want flexibility in all things. As a developer, I want to provide the solutions that I want as a user.

I also want to see plugin and theme authors think beyond their initial use case when building blocks, templates, styles, etc. Lay the groundwork. Then develop that initial idea by thinking about all the ways that users might want to customize what you’ve built.

Source link


Comments are closed.