ElementorexCms.Block.Helpers (ElementorexCms v0.1.0)

Copy Markdown View Source

Helpers imported into every block (use ElementorexCms.Block).

The important one is root/2: spread it on the root element of the block.

<a href={@url} {root(assigns, class: ["btn", @wide && "btn-block"])}>...</a>

Summary

Functions

Renders the children of a container. On the canvas, an empty container shows a drop zone.

Joins classes, skipping nil, false and empty strings.

Whether the block is being rendered on the editor canvas.

An icon from Heroicons, inline SVG (works with any icon name chosen in the editor, see ElementorexCms.Heroicons).

Marks the element that holds an inline-editable prop: on the canvas the user double-clicks it to type. Outside the editor it adds nothing.

href, target and rel for a link. An empty URL gives no href (on the canvas links never navigate anyway).

Sanitized rich text (:rich policy) as safe HTML.

Sanitized inline HTML (:inline policy) as safe HTML.

Attributes for the root element of a block.

Inline style from validated declarations: [{"max-width", "640px"}] → "max-width:640px". Invalid values are dropped (see ElementorexCms.CSS).

Translates a string of the block (see ElementorexCms.I18n).

Functions

children(assigns)

Renders the children of a container. On the canvas, an empty container shows a drop zone.

Attributes

  • node (:map) (required)
  • ctx (:any) (required)
  • placeholder (:string) - Defaults to nil.

class_list(classes)

@spec class_list(term()) :: String.t()

Joins classes, skipping nil, false and empty strings.

editor?(assigns)

@spec editor?(map()) :: boolean()

Whether the block is being rendered on the editor canvas.

heroicon(assigns)

An icon from Heroicons, inline SVG (works with any icon name chosen in the editor, see ElementorexCms.Heroicons).

Attributes

  • name (:string) (required)
  • style (:string) - Defaults to "outline".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

inline(arg1, prop)

@spec inline(map(), atom() | String.t()) :: [{String.t(), String.t()}]

Marks the element that holds an inline-editable prop: on the canvas the user double-clicks it to type. Outside the editor it adds nothing.

<h2 {inline(assigns, :text)}>{@text}</h2>

rich(html)

@spec rich(String.t() | nil) :: Phoenix.HTML.safe()

Sanitized rich text (:rich policy) as safe HTML.

rich_inline(html)

@spec rich_inline(String.t() | nil) :: Phoenix.HTML.safe()

Sanitized inline HTML (:inline policy) as safe HTML.

root(assigns, opts \\ [])

@spec root(map(), keyword()) :: [{String.t(), term()}]

Attributes for the root element of a block.

  • data-ex-id - the node id; the node's CSS is scoped to it
  • id and class from the Advanced tab, merged with :class
  • on the canvas, data-ex-type and data-ex-container for the editor

Options:

  • :class - classes of the block (string, list, nil/false are skipped)
  • :style - inline style string, written as is (build it from validated values only)
  • :attrs - extra attributes ([{"role", "alert"}])

style(declarations)

@spec style(list()) :: String.t()

Inline style from validated declarations: [{"max-width", "640px"}] → "max-width:640px". Invalid values are dropped (see ElementorexCms.CSS).

t(text, bindings \\ [])

@spec t(String.t(), keyword()) :: String.t()

Translates a string of the block (see ElementorexCms.I18n).