Can't select my block by clicking on it on apiVersion - but using blockProps

Question

I'm building my first Wordpress block but I've ran into an issue. If I set my block's apiVersion to 2, I am not able to select my block.

I'm aware that for apiVersion 2, you need to use the useBlockProps hook.

Below is the source for my blocks edit and save functions.

import { __ } from "@wordpress/i18n";

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

import { GradientPicker, PanelBody, PanelRow } from "@wordpress/components";

const Edit = (props) => {
  const {
    attributes: { gradient },
    setAttributes,
  } = props;

  const blockProps = useBlockProps();

  const onChangeGradient = (newGradient) => {
    setAttributes({ gradient: newGradient });
  };

  return (
    <div {...blockProps}>
      <div style={{ "--gradient": gradient }}>
        <InnerBlocks allowedBlocks={["core/paragraph", "core/heading"]} />
      </div>
      <InspectorControls>
        <PanelBody title={__("Gradient Settings")}>
          <PanelRow>
            <GradientPicker
              value={gradient}
              gradients={[]}
              onChange={onChangeGradient}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    </div>
  );
};
export default Edit;

/**
 * WordPress dependencies
 */
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

const Save = (props) => {

  const {
    attributes: { gradient },
  } = props;
  const blockProps = useBlockProps.save();

  return (
    <div {...blockProps} style={{ "--gradient": gradient }}>
      <InnerBlocks.Content />
    </div>
  );
};
export default Save;

These are used to register the block in my index.js

import json from './block.json';
import edit from './edit';
import save from './save';

import './style.css';
import './editor.css';

// Destructure the json file to get the name and settings for the block
// For more information on how this works, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
const { name } = json;

// Register the block
registerBlockType( name, {
    edit, // Object shorthand property - same as writing: edit: edit,
    save, // Object shorthand property - same as writing: save: save,
} );

Here's my block.json file:

{
  "$schema": "https://json.schemastore.org/block.json",
  "apiVersion": 2,
  "name": "custom-block-plugin/gradient-text",
  "title": "Gradient Text",
  "textdomain": "custom-block-plugin",
  "icon": "admin-appearance",
  "category": "layout",
  "attributes": {
    "gradient": {
      "type": "string",
      "default": "linear-gradient(90deg, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
    }
  },
  "example": {
    "attributes": {
      "gradient": "linear-gradient(90deg, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

If anyone knows what I'm doing wrong, that would be great!

Answer 1

Ended up figuring this out, just needed clickable area like some padding or something to get this to be clickable since the InnerBlock doesn't behave like normal elements. There's also a button to click on the InnerBlocks wrapper, so I'll probably be leaving this block as is.