0

I am creating some custom blocks for gutenberg, and everything was going fine. But when I add the <RichText /> component from @wordpress/block-editor The default toolbar that is showing above a block disappears, unless I click on the RichText field. It even dissapears for my other custom blocks without any rich text that are on the same page. I did insert the {...useBlockProps} into all my top level container elements.

My question is: How can I show both the default toolbar for deleting and moving blocks as well as the toolbar for the RichText component?

Thank you Casper

This is my edit function example:

import { RichText, useBlockProps } from "@wordpress/block-editor";
import Input from "../components/Input";
import LinkButton from "../components/LinkButton";
import ImageSelect from "../components/ImageSelect";

import "./editor.scss";

//attributes: title, subtitle, imageUrl, imageAlt, imageId, buttonText, buttonUrl,
export default function Edit({ setAttributes, attributes }) {
  const className = "image-a";
  const blockProps = useBlockProps();
  return (
    <section {...blockProps} className={className}>
      <div className={`${className}__image-container`}>
        <ImageSelect
          value={attributes.imageId}
          className={`${className}__image-select`}
          onChange={(media) => {
            setAttributes({
              ...attributes,
              imageId: media.id ? media.id : 0,
              imageUrl: media.url ? media.url : "",
              imageAlt: media.alt ? media.alt : "",
            });
          }}
        />
        {attributes.imageUrl && (
          <img src={attributes.imageUrl} style={{ width: "100%" }} />
        )}
      </div>
      <div style={{ padding: "0 1rem", width: "100%" }}>
        <Input
          label="Title"
          value={attributes.title}
          onChange={(title) => setAttributes({ title })}
          className={`${className}__input`}
        />
        <RichText
          tagName="div"
          className={`${className}__content`}
          value={attributes.content}
          onChange={(content) => setAttributes({ content })}
        />
        <LinkButton
          text={attributes.buttonText}
          link={attributes.buttonUrl}
          setText={(buttonText) => setAttributes({ buttonText })}
          setLink={(buttonUrl) => setAttributes({ buttonUrl })}
          className={`${className}__link-button`}
        />
      </div>
    </section>
  );
}

1
  • The problem is likely with this, but even if not, you should still fix this: {...blockProps} className={className} - you should use const blockProps = useBlockProps( { className } ) and use just {...blockProps} in the <section> tag. – Sally CJ Jun 11 at 0:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.