2

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!

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.