WordPress Gutenberg get block styles from useBlockProps

Question

I am adding styles when registering my block:

styles: [
   { name: "my-style-1", label: "Style Name" }
   { name: "my-style-2", label: "Style Name 2" }
],

In the edit() and save() function how can I see which style/classname was selected?

I tried for example:

edit( { attributes, setAttributes, styles } ) {
    const blockProps = useBlockProps();
    const { quote, name, title } = attributes;

    console.log(styles);
    console.log(blockProps.styles);

    ...

But it returns undefined.

I need to use the styles for conditions for example...

if (style == 'my-style-1') {
   // do something if style 1 was selected
}

Fulsome

Answer 1

The selected Block Style name as defined in your styles[{...}] is available in the edit() function as className:

edit({ attributes, setAttributes, className}) {
    console.log(className);
    ...
}

I'd suggest if you want to reorder elements based on their style, create Block Styles and use CSS flexbox to manage the reordering, eg display:flex for your wrapper div and order: ... for the child elements (like <img> and <p>). By using styles, when the content is saved the underlying HTML markup doesn't change so less change of getting the dreaded 'block validation' error (plus you get a preview of the style in the Editor). Make sure to save blockProps in the save() so the selected class is applied, eg:

edit({ attributes, setAttributes, className }) {
    const blockProps = useBlockProps();
    console.log(className);

    return (
        <div {...blockProps}>
            <h2>Hello</h2><img />
        </div>
    );
},
save({ attributes }) {
    const blockProps = useBlockProps.save();
    return (<div {...blockProps}><h2>Hello</h2><img /></div>)
}

The generated class applied to the <div> will be .wp-block-myblock-name .is-style-my-style-1

Hautesavoie

For me property 'className' was undefined when accessed as per Edit( { className } ). I can access the prop as useBlockProps().className or Edit( { attributes: { className } } ). The bonus of the latter is it contains only the selected style class. Note: that attribute was generated by the styles API - I have no attributes manually defined. – Cassondracassoulet

Answer 2

I would recommend you to use Block Variations instead of Block Styles. When creating a variation you can assign attribute values.

For example:

index.php

registerBlockType('xy/yourBlock', {
  title: 'xy',
  description: 'xy',
  attributes: {
    quote: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    title: {
      type: 'string'
    },
    style: {
      type: 'string'
    }
  },
  variations: [
    {
        name: 'my-style-1',
        isDefault: true,
        title: 'Style Name',
        attributes: { style: 'my-style-1' },
        scope: 'transform',
    },
    {
        name: 'my-style-2',
        title: 'Style Name 2',
        attributes: { style: 'my-style-2' },
        scope: 'transform',
    },
  ],
})

With scope: 'transform' you can select your variation in the block settings on the right side. Once a variation is selected you can access it in your edit and save file like any other attribute.

edit( { attributes, setAttributes } ) {
    const { quote, name, title, style } = attributes;

    console.log(style);

    if (style == 'my-style-1') {
      // do something if style 1 was selected
    }

Whitewall

Thanks for the answer! I am not sure if this is the right approach. Block variations seem to create multiple blocks that have different control panel settings. I am trying to create different simple styles for the same block. For example, a style where an image is below text, another style where the image is above the text. This seems to be best with styles because they can also be previewed. – Fulsome

Answer 3

I know this is an older question, but in my opinion the answer is no longer correct. Once you have created your custom block, you can actually just register different styles for it, which allows the user to select the style from the backend.

Note: Make sure you change the namespace to the one you registered the block with. This can be found in block.json, if you are using the @wordpress/create-block package.

---

block-styles.js:

wp.blocks.registerBlockStyle( 'namespace/my-custom-block', {
    name: 'style-one',
    label: 'Style 1',
    isDefault: false,
})

wp.blocks.registerBlockStyle( 'namespace/my-custom-block', {
    name: 'style-two',
    label: 'Style 2',
    isDefault: false,
})

---

Then you can add the classes to the block's stylesheet, or enqueue a separate stylesheet for the block's different styles:

block-styles.css

.my-custom-block.is-style-style-one { background: red; }
.my-custom-block.is-style-style-two { background: blue; }

---

You can check out the official documentation for more informaiton: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/

Mahayana