Blocksweb developer docs

Appearance

Utilities ​

Image ​

The <Image/> utility is used to create a zone where an image can be uploaded in the cms Attributes:

  • propName:

    • type: string
    • required: true
    • description: this is to connect the prop to the visual editor

  • asset:

    • type: string
    • required: true
    • description: this is the URL that will be set on the <img src/> element, this can be hardcoded or dynamic

  • default:

    • type: string
    • required: false
    • description: this is the backup <img src /> that is shown when no asset is set.

    example:

jsx
function Example() {
  return <Image />;
}

Rich Text ​

This is the Rich text utility, it allows for making inline edits for rich text inside the editor.

Attributes:

  • propName:
    • type: string
    • required: true
  • defaultText:
    • type: string
    • required: false
  • text:
    • type: string
    • required: false
  • colors:
    • type: Color
    • required: false
    • description: this is where you can set the text-colors that the editor is allowed is to show.
    • example:
ts
[
  {
    value: "gray",
    name: "Primary Text",
  },
  {
    value: "#fff",
    name: "Secondary Text",
  },
];

example:

jsx
<RichText
  propName="betaLabel"
  defaultText={betaLabel}
  text={betaLabel}
  colors={[
    {
      value: "gray",
      name: "Primary Text",
    },
    {
      value: "#fff",
      name: "Secondary Text",
    },
  ]}
/>