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”.

Then create two Cover blocks, each having their respective style. This way you can set different image for the one appearing in Desktop and Mobile. 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) { {
    display: none;

@media (min-width: 481px) { {
    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"

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.


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.


  1. This is just what I need. I tried the Simple Method but doesn't seem to work. The block only saves one style, either mobile or desktop. Whichever was set last, that's what is used on the page.

    I'm not a developer, but I don't see how it would work without changing or adding code to change how the block actually functions. Just adding style options doesn't appear to give the block the ability to save two different images.

    Any suggestions, or am I doing something wrong?