Embeds

Embeds are reusable code snippets that allow customizable and complex elements to be placed into the WYSIWYG. Embed templates are written just like page templates, including the YAML header.

Embeds are also are helpful with repeated design elements throughout a document- using an embed can create consistency with the theme, and when style changes are desired, the embed template can be modified in the theme and embeds across the entire document will be updated.

Along with the required template header fields, the embed header requires two extra fields:

type

The type must be set as embed for an embed template.

display

Options areblock and inline. This renders the element in the HTML as either a block element or an inline element.

Embeds with display: block will have embed block styles available to them.

---
title: Embed Title
cname: embedcname
type: embed
display: block // block or inline
blueprint: ...
---

In the Pagedip Writeroom, theme embeds become available in the dropdown in the top right corner of the media panel.

Screen Shot 2017-04-20 at 12.11.42 PM.png

Example Embed

This example is a simple embed that creates a text block containing options for content and class.

---
type: embed
title: Text Block
cname: textblock
display: block
blueprint:
data:
options:
content:
type: textarea
label: Content
class:
type: text
label: Class
---

<div class="text-block {{ options.data.class }}">
{{ options.data.content }}
</div>

When the embed is created in the Pagedip Writeroom, the user will be able to set the options laid out by the embed template blueprint.

Screen Shot 2017-04-20 at 12.17.09 PM.png