# `ElementorexCms.Block.Helpers`
[🔗](https://github.com/rocket4ce/elementorex_cms/blob/v0.1.0/lib/elementorex_cms/block/helpers.ex#L1)

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>

# `children`

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`

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

Joins classes, skipping `nil`, `false` and empty strings.

# `editor?`

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

Whether the block is being rendered on the editor canvas.

# `heroicon`

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`

```elixir
@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>

# `link_attrs`

```elixir
@spec link_attrs(String.t() | nil, boolean()) :: [{String.t(), String.t()}]
```

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

# `rich`

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

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

# `rich_inline`

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

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

# `root`

```elixir
@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`

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

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

# `t`

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

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

---

*Consult [api-reference.md](api-reference.md) for complete listing*