Question 106160 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Gutenberg get block styles from useBlockProps

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
}
Tags:

2

Answers


  1. 0

    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
    }
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search