Get mouseover options on the block editor

One of the cool features of Mr.Utils is the ability to easily install it as a WordPress plugin for free.

When you do so, an interface will appear on the block editor, allowing you to easily use the utility classes of this front-end toolkit.

One type of utility class is the mouse hover state, let’s focus on that for this post.

Note: If you prefer, you can install Mr.Utils without the interface and use the classes on each block Advanced section.

Animations

On the Animation section of the Hover tab (zigzag arrow icon) you will find options such as Fade, Slide, Scale and Zoom.

One thing to keep in mind when selecting one of those options is: By default, the animation will only occur when mouse hovering above the element, nothing will happen when mouse hovering outside the element… If you want the animation to rollback when you go outside the element, you must go to the Animation section of the Global tab (first tab) and select the transition type (e.g. Ease In Out).
Once you apply a transition globally, the animation will react to both hover situations.

Live example using Zoom animation

This paragraph block animates on mouseover!

Layout change

On the Layout section of the Hover tab (zigzag arrow icon) you will find options to change the size (width) of a block.

If you want to change the initial size, simply go to the Layout section on the Global tab (first tab) and find the similar option.

By default, the size will change without any transition/animation. If you want the block to change the size smoothly, you must go to the Animation section of the Global tab and select the transition type (e.g. Ease In Out).

Live example of size change

Display changes

On the Display section of the Hover tab (zigzag arrow icon) you will find options to change the visibility type of a block.

Here you can better understand the differences between the visibility types.

With these options, you can make a block semi-opaque or totally opaque on mouseover. To do the latter, you must first put the block semi-opaque by default on the Display section of the Global tab (you can also use the option on the Desktop tab [screen icon]).

Just like changing the layout, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out).

Live example of visibility change

Spacing changes

On the Spacing section of the Hover tab (zigzag arrow icon) you will find options to change the spacing (paddings or/and margins) of a block.

Just like changing the layout or display, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of paddings change

Text size change

On the Text section of the Hover tab (zigzag arrow icon) you will find options to change the font-size of a block.

Just like changing the layout, display or spacing, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of font-size change

This paragraph block will have it’s font-size increased on mouseover!

Misc. Changes

On the Misc. section of the Hover tab (zigzag arrow icon) you will find some extra options such has:

Showing a scrollbar only when mouse hovering an element

There are more than 3 images below. Mouseover to see the scrollbar that will allow you to see all of them!

Those were very basic examples, but with some creativity you can use them to make fascinating and useful experiences for your website users 🙂

Comments

At the moment of writing, WordPress does not yet give an interface for editors to create block patterns. But that doesn’t mean it’s difficult to create them without an interface. On this post, I’ll guide you on how you can create patterns, and I’ll try to make it as friendly as possible.

Create a block pattern with Mr.Dev.’s Framework

Currently, there’s no graphic user interface to create block patterns. Mr.Dev.’s Framework only adds options that WordPress does not have by default, and I’m expecting WordPress to create that default interface very soon. For that reason, I’ll not add a specific interface for this functionality (this might change if WordPress takes too much time to do it).

But if you can’t wait for that to happen, Mr.Dev.’s Framework can still help you on the process…

Preparing a file for a WordPress code snippet

Prepare it using Mr.Dev.’s Framework

• If you have Mr.Dev.’s Framework, check if the option to control files is enabled: If you see the tab Files / Media that means it is, if not then you can enable it on the Configuration tab on the Files & Media Manager section.
• Go to the Files / Media tab , there you can find the section Server-side scripts. Click on the pencil icon to open the file.
  This is the file where you’ll add a short code snippet.

Prepare it using a custom PHP file

If you don’t have Mr.Dev.’s Framework and already have a way to add PHP code snippets to your website, you can skip directly to add the code snippet.

Otherwise, you can get the framework or add the code into the functions.php file of your theme.

Block patterns code snippet

• Copy the code snippet below and paste it into the file you previously created/selected. Do not save yet because we still need to create the actual pattern.

//START BLOCK PATTERNS
function custom_site_init() {
	register_block_pattern_category(
		'custom-site',
		array( 'label' => get_bloginfo() )
	);
	
	register_block_pattern(
		'custom-site/project-list',
		array(
			'title'       => __( 'Pattern 1', 'custom-site' ),
			'description' => _x( '', 'Block pattern description', 'custom-site' ),
			'keywords' => ['pattern'],
			'categories' => ['custom-site'],
			'content'     => 'PATTERN CONTENT',
		)
	); 
}
add_action( 'init', 'custom_site_init' );
//END BLOCK PATTERNS

Understanding the code (optional)

The code above can be reused on as many websites as you want.

It will automatically create a pattern’s category with the same name as the website using get_bloginfo() (behind the scenes the slug will be “custom-site”, and although you can change that, it is more scalable this way).

The pattern name will be “Pattern 1”, this part you can change to whatever you want, depending on the project or the actual pattern.

You can also add a pattern description and add/replace keywords (The keywords are utilized when a user is using the search input to find blocks).

Create the block pattern with the editor

Now that we have prepared the code snippet, we can use the block editor to create the content for the pattern.

• On a different tab, go to Pages > Add New.
• Create the content for the patterns, using any type of blocks you want.
• In the top right corner, click on the 3 dots.
• Click on “Copy all content”.
• Go back to the PHP file you previously created/selected.
• Replace PATTERN CONTENT with the content you just copied.
• Save the file.

Add more block patterns

To create multiple block patterns, duplicate the function register_block_pattern from the code snippet above and repeat the same steps.

Extra: Remove core block patterns from WordPress

Now that you added your own custom patterns, chances are you don’t want to show the default/core block patterns.

To do that, if you have Mr.Dev.’s Framework, you can simply enable Styles Control on the Configuration tab. Otherwise, you can add the following code on the previous code snippet, inside the main custom_site_init function:

remove_theme_support( 'core-block-patterns' );

Will block patterns be on the interface?

Hopefully WordPress will soon add a good way to do this via the full site editor. There are some interesting discussions on which will be the best way, you can follow them:

• Patterns: Create a pattern similarly to how we create a Reusable block. · Issue #31298 · WordPress/Gutenberg (github.com)
• Selecting multiple blocks – Save as Pattern or Reusable block. · Issue #35305 · WordPress/gutenberg (github.com)
• Building with Patterns · Issue #38529 · WordPress/gutenberg (github.com)

And that’s it! I hope the steps were clear and easy to follow. If not, feel free to comment below or contact me if you prefer to talk about it privately.

Comments

The block editor (aka Gutenberg) is the default site builder of WordPress but some handy features might be hidden, waiting for your theme to declare support.

Which block editor features can be enabled?

Features such as creation of block templates, responsive embeds, wide alignments for images, custom line-heights and custom spacing usually must be enabled by adding some code snippets into your theme.

But what if you don’t have control over your theme code? What if you want to always have those features despite the theme you use?

Since the version 0.9.492 of Mr.Dev.’s Framework, that you can enable all those features without touching any code.

How to get those block editor features?

On the Configuration tab of Mr.Dev.’s Framework, located in Settings > Mr.Dev. (Instead of Mr.Dev. you might see your site name, depending of the whitelabel configuration), you can find the section Styles Configuration with the dropdown Blocks Styles Picker and also the section Layout configuration with the dropdown Layout Control.

Depending of the option you choose on those dropdowns, different features will be enabled:

Block templates

If your theme already enables block templates, you can leave the dropdown Layout Control with the option “Disabled / Theme Controlled”, otherwise you can select “Enable block templates (Recommended)”.

You’ll also need to have WordPress 5.8 or above.

The Block templates feature, allows to add blocks inside template parts such as header and footer. All changes you do on a block inside a template part will apply to all pages using that template.

Responsive embeds

This block editor feature will be enabled if you select one of this options:

• Disabled but with extra block features – It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.
• Enabled with extra block features and allow custom styles
• Enabled with extra block features

The Responsive embeds feature, automatically applies styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame, using the class wp-embed-responsive on the <body>.

Wide Alignment

This block editor feature will be enabled if you select one of this options:

• Disabled but with extra block features – It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.
• Enabled with extra block features and allow custom styles
• Enabled with extra block features

The Wide Alignment feature, gives the possibility of defining “wide” and “full” alignments to certain blocks, such as the image block.

Custom Line-Height

This block editor feature will be enabled if you select one of this options:

• Enabled with extra block features and allow custom styles
• Enabled and allow custom styles per block

The Custom Line-Height feature, allows to customize the line height of certain blocks, such as the paragraph and headings.

Custom Spacing

This block editor feature will be enabled if you select one of this options:

• Enabled with extra block features and allow custom styles
• Enabled and allow custom styles per block

The Custom Spacing feature, will show padding controls in certain blocks, such as the column block. You can change the value for individual sides or keep the same for all sides.

And the Enabled option on the dropdown?

It’s not part of this post’s topic, but if you prefer to let your theme/plugins decide most of the available features, but still want to show the colors and sizes created using the framework (or the customizer) on the block editor, then that option is for you.

Getting Mr.Dev.’s Framework

If this easy method to enable block editor features despite the theme sounds good to you, but you don’t have this framework yet, then you can know more about it and get it anytime:

Comments

As explained on the previous post, a front-end toolkit might be the best future-proof and optimized solution to this site builder that is still growing.

Depending of your website and theme configuration, you might already be able to use the editor to change things such as the font-size, margins and paddings. But those changes would be made on each block individually, there’s currently at the moment of writing, no way to change those properties globally. Mr.Utils gives you a way to do that.

Installing Mr.Utils to use on the block editor

On the documentation you’ll find a short and easy explanation on three methods to install Mr.Utils, by using Mr.Dev.’s Framework, by installing as a plugin or via manual installation. The most optimized method is using the framework because it allows you to select the type of utilities you want to use, combine and minify them.

Preview Mr.Utils changes on the block editor (Optional)

Because the block editor is a very visual editor that closely resembles the front-end, you might want to see the changes that Mr.Utils will apply to your blocks, before actually saving the post.

If you did the installation as a plugin you don’t need to do anything else and you can skip to “How to use Mr.Utils features on the block editor“.

Otherwise, you can configure it easily by using Mr.Dev.’s Framework, or manually if that’s your thing.

Preview changes using Mr.Dev.’s Framework

On the plugin settings on the configuration tab, you will find the CSS Utilities section. Check the box Utils Backend, and you are ready to go.

If you want to use utilities on breakpoints, simply select the ones you want on the same group of checkboxes.

Manually configuration of the preview

Add the below code into the functions.php file or into a custom plugin.

add_action( 'admin_enqueue_scripts', 'mrutils_admin_styles' );
function mrutils_admin_styles() {
    wp_enqueue_style( 'mrutils_admin', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils.css', false, '1.0.0' );
    wp_enqueue_style( 'mrutils_admin_backend', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_backend.css', false, '1.0.0' );
}

If you want to add breakpoints you need to add more “wp_enqueue_style” to the above, between the first and last one, this time also indicating the intended media query, like this:

wp_enqueue_style( 'mrutils_admin_phone', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_phone.css', false, '1.0.0','(max-width: 768px)' );

If you want to avoid external requests:

1. Download Mr.Utils (free)
2. Unzip into your website.
3. Replace the link on the code above, with the location where you unzipped the folder.

How to use Mr.Utils features on the block editor

If you installed Mr.Utils as a plugin, you’ll now see the option “Utilities” when selecting a block. By using that interface you don’t need to know the methods explained below.

If you didn’t install Mr.Utils as a plugin, most of the methods shown below, will work by adding specific classes into Advanced > Additional CSS Class(es) on any block:

Global font-sizes

With Mr.Utils you have 7 global font-sizes and it’s possible to change their values.

For example, add the class mr-fontsize5 into Advanced > Additional CSS Class(es) on any block that has text and see it changing sizes.

You can also use different sizes depending of the device/breakpoint joining multiple classes, for example:
mr-fontsize5 mr-phone-fontsize4
mr-desktop-fontsize7 mr-tablet-fontsize5 mr-phone-fontsize6

If you want to change the values for the 7 sizes, you can check the documentation explaining how to change variables. It explains how to do it manually or using the Mr.Dev.’s Framework.

Global colors (Mr.Dev.’s Framework)

For this one feature, Mr.Utils is currently not enough, you’ll want to use Mr.Dev.’s Framework to define which will be the global colors that appear on the block editor.

Being a global color means that if you select a color and then decide to change the value, all blocks using it will automatically have their colors changed to the new value.

Remove margins and paddings of blocks

Removing margins and paddings can be very useful because currently at the moment of writing, some blocks have default margins or paddings that you might not want. It’s much easier to add a class instead of changing via CSS.

With Mr.Utils you can choose the side you want to remove the margin/padding or remove on all sides. Simply add the correspondent class into Advanced > Additional CSS Class(es):

And you can also remove the margin/padding only on specific devices/breakpoints, for example:

mr-desktop-nomargin
mr-phone-nopaddingright

Add global margins and paddings

Mr.Utils brings the classes mr-margin and mr-padding, that can also point to specific sides of the block:

And you can also use the margin/padding only on specific devices/breakpoints, for example:

mr-desktop-margin
mr-phone-paddingright

If you want to change the values for the global margins and paddings, you can check the documentation explaining how to change variables. It explains how to do it manually or using the Mr.Dev.’s Framework.

Change visibility of a block depending of the device

To show or hide a block, you can use the classes mr-show and mr-hide respectively.

To point to specific devices/breakpoints, all you have to do is to add the device name between the prefix and action. Here are some examples:

Change how Columns blocks display on mobile

By default when you set the number of columns on the Columns block, that number will apply on desktop. On mobile the columns will be automatically stacked below each other.

But if you only have images or you don’t have a lot of text in the columns, it could look better with 2 columns on each line.

You can do that with Mr.Utils, you can add classes such as mr-phone-2perline into Advanced > Additional Class(es).

If you installed the toolkit as a plugin it’s even more friendly: Click on “Utilities”, on the phone icon and then on layout you choose 2 as the number of items per line.

Change the order of blocks depending of the device

Changing the order of blocks is easy with drag and drop but if you want to change the order depending of the device/breakpoint, you’ll need something more:

1. Select all the blocks that will be reordered and then select the option “Group“.
2. On the Group Block go to Advanced > Additional CSS Class(es) and add the class mr-1perline (You can replace 1 with any number between 0 [infinite] and 12, this would be similar to using columns).
3. Then select the first block you want to reorder and on Advanced > Additional CSS Class(es) section, add the class mr-breakpoint-order followed by a number between -1 and 12 and replacing breakpoint with the device name (desktop, laptop, tablet, phone or another custom breakpoint that exists). Example: mr-phone-order2. Do the same for each block inside the group (Repeated numbers are allowed).

Horizontal scroll list of posts

Using the block “Latest Posts”, or any other block that works as a list, you can add the class mr-swipecontent or mr-horizontalscrollcontent into Advanced > Additional CSS Class(es), to make that list flow horizontally and become scrollable when the amount of items is big.

Those are the 8 features I wanted to share with you! I’ll update this post If I add more into this front-end toolkit.

Comments

The block editor (aka Gutenberg) is the default site builder of WordPress and it’s the most optimized and performative you can have on this CMS. But it’s still growing and currently lacking some features.

On this post, I’ll let you know why a front-end toolkit is currently the best future-proof solution to get some of those lacking features right now.

Some features might be hidden to you

Before I dive into the use of a front-end toolkit to add some of the lacking features, it’s best to make sure that they are actually lacking from the block editor.

Your theme or plugins might lock some of the new features and in some cases your theme could simply declare support with a short code snippet.

On this page of the WordPress documentation, you can find some of the features that are available but need the theme or a plugin to declare support.

If all the features you need are mentioned on that page, then declaring support is in fact the best option (You can use Mr.Dev.’s Framework to do that). If they are not, then you might find a better solution by continue to read this post.

You should not use plugins to extend the block editor

The easiest solution for the lacking features would be of course, to get them via a third-party plugin, but that doesn’t mean it’s the best or the most scalable option.

Plugins such Editor Plus by Extendify, Kadence Blocks, Lazy Blocks and ACF Blocks are impressive for sure but a quick look at their changelogs and you’ll notice they are bloated with features or dependencies that you might not need or that will soon be available by default on the block editor.

That leaves a question with difficult answers:
What will happen when those new features arrive to WordPress?
Will the plugin developers find a way to transfer all the repeated features to the methods of Gutenberg Block Editor? Or will they force everyone to keep the plugin active so their own features keep working?
The latter is more likely and would force to have multiple ways to do the exact same things.

Doesn’t sound serious yet? What if I tell you that, having so many active options and plugins to do the same things will increase the amount of needed scripts, styles on your pages, decreasing your speed score that also affects SEO (Search Engine Optimization).

Another things to keep in mind are:

• Some of those plugins also change the natural workflow of the editor: It’s difficult enough to force users to get used to a new way of working on their websites, imagine having multiple ways.
  And I know WordPress always had that problem, but now that WordPress is trying to fix that with the block editor, it seems to me some of those plugins are not doing much better for the long-run.
• Some of those plugins are based on old technologies and do requests to the server. The essence of the native blocks is the use of React and to do more on the client-side, that’s what makes the native blocks so well optimized compared to other site builders.

Don’t you agree? Let me know in the comments section below.

If still you prefer to go with a plugin, choose one that lets you go back to the default values and/or that helps you transition back, when you don’t want to rely on that plugin anymore.

What you need on the block editor for now is a middle term solution!

Using a front-end toolkit

Get a lightweight and easy to use front-end toolkit, such as Mr.Utils (free). It includes classes that are friendly for everyone and can be added on each block “Advanced” section.

And if that’s not friendly enough for you or your clients, you can actually install Mr.Utils as a plugin for free. It adds an interface on the block editor that allows to add classes without actually knowing them. But of course, this starts to get closer to the plugins mentioned above, still lighter than them though!

Using a lightweight framework

Or get a lightweight framework such as Mr.Dev.’s Framework, that focus on new features, discontinues the repeated ones (that are already available on the CMS) and even helps you on the transition to the CMS method/feature.

The framework also has the option to use an interface on the block editor.

Solutions overview

Mr.Utils front-end toolkit, Mr.Utils as a plugin and Mr.Dev’s Framework are much lighter compared to the plugins mentioned above and much easier to scale and transition to future methods.

What about other front-end toolkits?

Of course you can use other, specially if you already have another installed on your website.
Bootstrap probably comes to mind, but I feel my utility classes are a bit more straightforward and more friendly to explain to non-tech users. They always work the same way prefix-breakpoint-action, such as mr-phone-hide or mr-desktop-nomargin (mr-nomargin for actions on all breakpoints).

Getting 8 of the lacking features on the block editor

What Mr.Utils / Mr.Dev.’s Framework add to the block editor is a way to:

1. Change to a global font-size.
2. Change global color.
3. Remove margins and paddings of blocks.
4. Add global margins and paddings.
5. Change visibility of a block depending of the device.
6. Change how Columns blocks display on mobile
7. Change order of blocks depending of the device.
8. Horizontal scroll list of posts.

Check the next post where I go deeper on how to do those actions.

Comments

Let your visitors turn the pages!

FlipBook Block is a simple yet effective WordPress block that shows a PDF from your Media in a Flip Book.