Is it possible to concatenate css classes using WordPress Gutenberg's block editor?

user_19409476 0
Viewed 63

I have registered some new core/image block styles in my theme's editor.js file:

wp.blocks.registerBlockStyle('core/image', [
    {
      name: 'default',
      label: 'Default',
      isDefault: true,
    },
    {
      name: 'rounded',
      label: 'Rounded',
    },
    {
      name: 'desktop',
      label: 'Desktop',
    },
    {
      name: 'mobile',
      label: 'Mobile',
    },
  ])

In the admin block editor, users are able to select just one of these new styles. Is there a way to to allow users to select multiple styles? For example rounded mobile?

gutenberg-blocks wordpress-gutenberg wordpress-theming
1 Answers

Unfortunately, a block may only have one block style selected at a time. Each block style is a variation of appearance and relates to a single CSS classname or inline style. If you hover over a block style, it shows the preview of the style to be applied. The style preview cannot preview/combine multiple block style variations at once. Block Style Preview

If you wish to add additional custom CSS classes, they can be added via Block > Advanced > Additional CSS class(es) Additonal CSS classes

Even if two or more "valid" block style class names are added, only the first selected one is highlighted as selected.

Looking at the names of the additional styles you've registered for core/image, I suggest using custom media queries in your theme for the variations, eg:

[your-theme]/style.css

/* Mobile - Make rounded image corners small */
@media screen 
    and (max-device-width: 799px){ 
        .wp-block-image.is-style-rounded img{
        border-radius:1em !important;
    }
}
/* Desktop - Make rounded image corners big */
@media screen 
    and (min-device-width: 800px){ 
        .wp-block-image.is-style-rounded img{
        border-radius:5em !important;
    }
}

The advantage of this method is you can customize different variations for different screens and not be limited by a single block style.

user_57925190
Related