Utilities

Image

The <Image/> utility is a component that creates an editable image zone in the Blocksweb editor, allowing content managers to easily upload or select images.

Attributes:

• propName:

  • type: string
  • required: true
  • description: connects this image to the corresponding property in the visual editor, enabling content updates

• 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 URL for the <img src /> that is shown when no asset is set.

Example:

function ProductCard({ productImage }) {
  return (
    <div className="product-card">
      <Image 
        propName="productImage" 
        asset={productImage} 
        default="https://example.com/placeholder.jpg" 
        alt="Product thumbnail image"
      />
      <h3>Product Title</h3>
    </div>
  );
}

Rich Text

This is the Rich text utility, it allows for making inline edits for rich text inside the editor, giving content creators the ability to format text without writing HTML.

Attributes:

• propName:

  • type: string
  • required: true
  • description: connects this rich text field to the corresponding property in the visual editor

• defaultText:

  • type: string
  • required: false
  • description: the initial text to display if no other text is provided

• text:

  • type: string
  • required: false
  • description: the current text content to display

• colors:

  • type: Color
  • required: false
  • description: defines the text colors that will be available in the editor's formatting toolbar. The value can be a CSS color name or hex code, and name is the label shown to users in the editor.
  • example:

[
  {
    value: "gray",
    name: "Primary Text",
  },
  {
    value: "#fff",
    name: "Secondary Text",
  },
];

Complete Example:

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

Block Outlet

The <BlockOutlet/> utility allows content managers to drop in components at designated outlet points within a parent component. This creates a flexible composition system where components can be dynamically arranged within predefined areas.

Attributes:

• propName:

  • type: string
  • required: true
  • description: connects this outlet to the corresponding property in the visual editor, enabling content updates.

• component:

  • type: React.ReactNode
  • required: false
  • description: the component to render in this outlet. This prop is used when the component is being passed directly from a parent component.

Example with propName:

import React from "react";
import { BlockOutlet, IBlockswebComponent } from "@blocksweb/core";

const ProductLister: IBlockswebComponent = (props) => {
  return (
    <div className="product-grid">
      <div className="product-item">
        <BlockOutlet propName="product1" />
      </div>
      <div className="product-item">
        <BlockOutlet propName="product2" />
      </div>
      <div className="product-item">
        <BlockOutlet propName="product3" />
      </div>
    </div>
  );
};

ProductLister.schema = {
  displayName: "Product Lister",
  options: [
    {
      type: "component",
      name: "product1",
      label: "Product 1",
    },
    {
      type: "component",
      name: "product2",
      label: "Product 2",
    },
    {
      type: "component",
      name: "product3",
      label: "Product 3",
    }
  ],
};

export default ProductLister;

Example with component and propName:

import React from "react";
import { BlockOutlet, IBlockswebComponent } from "@blocksweb/core";

const TwoColumnLayout: IBlockswebComponent = (props) => {
  return (
    <div className="two-column-layout">
      <div className="left-column">
        <BlockOutlet component={props.leftComponent} propName="leftComponent" />
      </div>
      <div className="right-column">
        <BlockOutlet component={props.rightComponent} propName="rightComponent" />
      </div>
    </div>
  );
};

TwoColumnLayout.schema = {
  displayName: "Two Column Layout",
  options: [
    {
      type: "component",
      name: "leftComponent",
      label: "Left Column Content",
    },
    {
      type: "component",
      name: "rightComponent",
      label: "Right Column Content",
    }
  ],
};

export default TwoColumnLayout;

Usage Benefits:

• Enables dynamic composition of components without coding
• Allows content managers to customize layouts by adding different components to each outlet
• Provides a structured way to define where customizable content can be placed
• Creates more flexible, reusable container components
• Supports both predefined components and user-selected components