1

Preface

Now in Drupal 8 we can finally create block instances: i.e, placing a block more than once -> in more than one region.

Does any instance has a unique css class?

Why I ask this?

In some cases you want to hide 1 block instance, but not the other.

For example, say you have the block "contact_form" in 2 regions: "Highlighted" && "Sidebar". You can hide the first instance for desktop devices, thus making it appear only for mobile devices this way:

media screen and (min-width: 768px) {

#block-contact-form .instance_1 {display: none}

}
  • .instance_1 is a fictive name and I used it only to explain how such a class is so needed.
  • Its .instance_1 and not .instance_2 as In Drupal machine-generated objects are usually Zero-based indexed.

Doing so can be good for better UI-UX and better accessibility for mobile-device users.

1

After I created a second instance for a block, I saw that Drupal 8 doesn't create a class to mark it, but rather creates a similar, yet almost identical CSS id (#) name for it which is not zero-based index in this case, rather one-based-indexed.

For example, if the first instance' id is #block-contact-form, the second will be #block-contact-form-2.

If we want to hide only the first instance, we can now do:

media screen and (min-width: 768px) {

#block-contact-form {display: none}

}

If we wanted to hide the second one we would change #block-contact-form to #block-contact-form-2.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.