How to Create Responsive Cover Block? (Gutenberg)

Want to have a different image for the Cover block on Desktop and Mobile? Visit us to learn how.

One basic feature that is lacking from Gutenberg’s Cover block is setting different images for desktop and mobile.

In this article, we will show two methods to do it: Simple and Advanced.

Simple Method: Custom Style

Create two custom styles: “Desktop Only” and “Mobile Only”. It’s not pretty, but it works!

Here’s the code to register custom styles and the CSS:

add_action('init', 'my_register_cover_styles');
add_action('wp_enqueue_scripts', 'my_enqueue_cover_assets', 99);

function my_register_cover_styles() {
  register_block_style('core/cover', [
    'name' => 'desktop-only',
    'label' => 'Desktop Only',
  ]);

  register_block_style('core/cover', [
    'name' => 'mobile-only',
    'label' => 'Mobile Only',
  ]);
}

function my_enqueue_cover_assets() {
  $dir = get_stylesheet_directory_uri() . '/css';
  wp_register_style('my-cover', $dir . '/my-cover.css', false);
}
@media (max-width: 480px) {
  .wp-block-cover.is-style-desktop-only {
    display: none;
  }
}

@media (min-width: 481px) {
  .wp-block-cover.is-style-mobile-only {
    display: none;
  }
}

Advanced Method: Custom Control

Use JavaScript to add new control into the Cover block as shown above. This looks more professional, although quite complex to implement.

Our goal is embedding the image as a CSS variable into the Cover block like this:

<div class="wp-block-cover has-mobile-image"
  style="--mobileImage:url('...image.jpg')">
  ...
</div>

Let’s start!

You need two files:

  • js/my-cover.js – for extending the Cover block. Will be enqueued to the editor.
  • css/my-cover.jss – for handling the responsiveness. Will be enqueued to the frontend.

The JS is long and complex, so copy it from our gist. If you want to learn the syntax, check out our other tutorial.

Then, create the CSS file:

@media (max-width: 480px) {
  .wp-block-cover.has-mobile-image {
    background: var(--mobileImage) no-repeat center center;
    background-size: cover;
  }

  .wp-block-cover.has-mobile-image > img {
    display: none
  }
}

Finally, enqueue them:

add_action('enqueue_block_editor_assets', 'my_add_responsive_cover_control', 100);
add_action('wp_enqueue_scripts', 'my_responsive_cover_assets', 99);

function my_add_responsive_cover_control() {
  $dir = get_stylesheet_directory_uri() . '/js';
  wp_enqueue_script('my-cover', $dir . '/my-cover.js', [ 'wp-blocks', 'wp-dom' ] , null, true);
}

function my_responsive_cover_assets() {
  $dir = get_stylesheet_directory_uri() . '/css';
  wp_enqueue_style('my-cover', $dir . '/my-cover.css', []);
}

That’s it! Check out your Cover block and you will find the “Mobile Image” section under the Inspector.

Conclusion

So which method to choose?

If it’s your personal website, using the Simple one is okay since it looks weird.

So for the client website, you have to use the Advanced one. It’s easier to understand when teaching them too.

Let me know if you have any question in the comment below. Thank you for reading.

Default image
Henner Setyono
A web developer who mainly build custom theme for WordPress since 2013. Young enough to never had to deal with using Table as layout.
Leave a Reply