Hi guys, I'm wanting to use useBlockProps so when my block is rendered it doesn't have a div encompassing my divs, I saw that some components use this way, the paragraph for example.

My block is being rendered like this

<div aria-label="Block: Timeline Item" role="group" id="block-408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" class="block-editor-block-list__block swiper-slide wp-block" data-block="408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" data-type="cit/block-ciandt-timeline-item" data-title="Timeline Item" tabindex="0" style="transform-origin: center center; transform: none;"><div class="timeline__item"><div class="timeline__content"><div class="block-editor-inner-blocks"><div class="block-editor-block-list__layout"><div aria-label="Block: Heading" role="group" id="block-5f20ee63-cce3-4ce0-ac39-8550a7604f65" class="block-editor-block-list__block swiper-slide wp-block" data-block="5f20ee63-cce3-4ce0-ac39-8550a7604f65" data-type="cit/block-ciandt-heading" data-title="Heading" tabindex="0" style="transform-origin: center center; transform: none;"><h6 role="textbox" aria-multiline="true" aria-label="Write heading…" class="rich-text block-editor-rich-text__editable wp-block-cit-block-ciandt-heading ciandt-heading has-text-align-left ciandt-heading--font-poppins ciandt--font-family-poppins ciandt-heading--size-l has-color-neutral-black-darkest-color" contenteditable="true" style="white-space: pre-wrap;">Title</h6></div><div aria-label="Block: Short Text" role="group" id="block-2bb04186-2c5c-41fa-8367-a7d959dc79e5" class="block-editor-block-list__block swiper-slide wp-block" data-block="2bb04186-2c5c-41fa-8367-a7d959dc79e5" data-type="cit/block-ciandt-short-text" data-title="Short Text" tabindex="0" style="transform-origin: center center; transform: none;"><div role="textbox" aria-multiline="true" aria-label="Add text…" class="rich-text block-editor-rich-text__editable has-text-align-left block-ciandt-short-text short-text-subheading has-color-neutral-black-lighest-color ciandt--font-family-poppins" contenteditable="true" style="white-space: pre-wrap;">descirption</div></div><div tabindex="-1" class="block-list-appender"><div data-root-client-id="408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" class="wp-block block-editor-default-block-appender"><textarea role="button" aria-label="Adicionar bloco" class="block-editor-default-block-appender__content" readonly="" rows="1" style="overflow: hidden; overflow-wrap: break-word;"></textarea><div class="components-dropdown block-editor-inserter"><button type="button" aria-haspopup="true" aria-expanded="false" class="components-button block-editor-inserter__toggle has-icon" aria-label="Add block"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"></path></svg></button></div></div></div></div></div></div></div></div>

I would like to use useBlockProps for it to render like this

<div aria-label="Block: Timeline Item" role="group" id="block-408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" class="block-editor-block-list__block swiper-slide wp-block timeline__item" data-block="408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" data-type="cit/block-ciandt-timeline-item" data-title="Timeline Item" tabindex="0" style="transform-origin: center center; transform: none;"><div class="timeline__content"><div class="block-editor-inner-blocks"><div class="block-editor-block-list__layout"><div aria-label="Block: Heading" role="group" id="block-5f20ee63-cce3-4ce0-ac39-8550a7604f65" class="block-editor-block-list__block swiper-slide wp-block" data-block="5f20ee63-cce3-4ce0-ac39-8550a7604f65" data-type="cit/block-ciandt-heading" data-title="Heading" tabindex="0" style="transform-origin: center center; transform: none;"><h6 role="textbox" aria-multiline="true" aria-label="Write heading…" class="rich-text block-editor-rich-text__editable wp-block-cit-block-ciandt-heading ciandt-heading has-text-align-left ciandt-heading--font-poppins ciandt--font-family-poppins ciandt-heading--size-l has-color-neutral-black-darkest-color" contenteditable="true" style="white-space: pre-wrap;">Title</h6></div><div aria-label="Block: Short Text" role="group" id="block-2bb04186-2c5c-41fa-8367-a7d959dc79e5" class="block-editor-block-list__block swiper-slide wp-block" data-block="2bb04186-2c5c-41fa-8367-a7d959dc79e5" data-type="cit/block-ciandt-short-text" data-title="Short Text" tabindex="0" style="transform-origin: center center; transform: none;"><div role="textbox" aria-multiline="true" aria-label="Add text…" class="rich-text block-editor-rich-text__editable has-text-align-left block-ciandt-short-text short-text-subheading has-color-neutral-black-lighest-color ciandt--font-family-poppins" contenteditable="true" style="white-space: pre-wrap;">descirption</div></div><div tabindex="-1" class="block-list-appender"><div data-root-client-id="408a4f8b-b90c-44ae-9a09-bd4a8386fe4e" class="wp-block block-editor-default-block-appender"><textarea role="button" aria-label="Adicionar bloco" class="block-editor-default-block-appender__content" readonly="" rows="1" style="overflow: hidden; overflow-wrap: break-word;"></textarea><div class="components-dropdown block-editor-inserter"><button type="button" aria-haspopup="true" aria-expanded="false" class="components-button block-editor-inserter__toggle has-icon" aria-label="Add block"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"></path></svg></button></div></div></div></div></div></div></div>

I tried to import in two ways and both do not work, they say that it was not possible to import

const {
  useBlockProps
} = wp.blockEditor;

import { useBlockProps } from "@wordpress/block-editor";

Comments

ilgnerfagundes created an issue.

marcofernandes’s picture

marcofernandes commented

"importing" like this

const {
  useBlockProps
} = wp.blockEditor;

should work.
I don't have details about your block or how your structured it but you also need to specify the block definition version, something like this:

const block = {
  name: "custom/theblock",
  title: "Some block",
  apiVersion: 2,
  ....
}
ilgnerfagundes’s picture

ilgnerfagundes commented

I put the apiVersion

title: 'Timeline Item',
  description: 'Custom Timeline item block',
  icon: icon,
  attributes: BLOCK_ATTRIBUTES,
  apiVersion: 2,
  parent: [
    'cit/block-ciandt-timeline'
  ],

And I tried to use it this way

   const blockProps = useBlockProps( {
      className: 'timeline__item',
    } );

    return (
      <div { ...blockProps }>
        <div className="timeline__content">
          <InnerBlocks
            template={ INNER_BLOCKS_TEMPLATE }
          />
        </div>
      </div>
    );

But I keep getting that "useBlockProps" is not a function. I imported this way
Error = "TypeError: Z is not a function"

import

const {
  useBlockProps
} = wp.blockEditor;