Elementor

Status (0.9.0): the foundation. CAFE fields can be used as Elementor Dynamic Tags (text, links, images, numbers). Tested with Elementor 3.33.0 (free), Elementor Pro 3.33.1 and WPML 5.0.2 on a single site. CAFE Collections, Section Builders and relationship fields are not available as dynamic data yet; see Not supported yet.

CAFE works exactly the same without Elementor. When Elementor is active, CAFE adds a group of dynamic tags called CAFE; nothing else changes.

Forms: the CAFE Form widget shows a front-end form made in CAFE → Forms. See Forms in Elementor.

#Requirements

• Elementor 3.5 or newer (free is enough; Elementor Pro is not required). Tested with Elementor 3.33.0 and Elementor Pro 3.33.1.
• CAFE 0.9.0 or newer.

CAFE → Settings → Compatibility shows whether Elementor (and Elementor Pro) is active, its version and whether it is new enough. Below Elementor 3.5 the status is "Update needed" and the CAFE tags stay off.

#How it fits together

CAFE core (FieldService: field resolver, value loader, cache, WPML rules)
  ↓
CAFE Elementor adapter (FieldCatalog + FieldValues)
  ↓
Elementor Dynamic Tags (group "CAFE")

Elementor never reads CAFE's database tables. Every value goes through the same code as cafe_get_field(), so the language, translation modes, caching and bulk loading all work the way they do everywhere else in CAFE.

The integration adds one hook (elementor/dynamic_tags/register), which only fires when Elementor runs. Without Elementor no integration class is even loaded, and CAFE keeps working if Elementor is deactivated or deleted.

#Using CAFE fields in Elementor

1. Edit a post or page with Elementor.
2. Pick a widget, for example Heading, Text Editor, Image or Button.
3. Click the Dynamic Tags icon next to a setting.
4. Choose a tag from the CAFE group.
5. Choose the field in Field (fields are listed per field group, by label).

What the text tag prints:

• Rich Text keeps the HTML CAFE allows (wp_kses_post).
• Textarea keeps line breaks (<br>).
• Select / Radio print what their Return Format gives: the value, the label, or the label of an array format. Multiple choices are joined with commas.
• Toggle prints its On Text / Off Text, or "Yes" / "No".
• Date, Time and Date Time print in the field's Return Format.
• Image gives Elementor the attachment ID and URL, so Elementor picks sizes, srcset and alt text from the attachment itself. Images are never copied or duplicated.
• File gives the attachment URL, never a path on the server.
• Gallery gives the attachments in the order CAFE stores them, so Elementor's gallery widgets show them as they are set in CAFE.

Empty fields print nothing, so Elementor's own Fallback setting applies.

#Which fields are offered

• Fields of active field groups that can appear on posts, pages or custom post types.
• Fields of Settings Pages (cafe_get_option()): site-wide values, per language. They need no post, so they also work in headers, footers and archive templates.
• Top-level fields only (fields inside Tabs and Collapsible Sections count as top level).
• Fields whose type the tag supports.

Never offered, and refused even if a field key is entered by hand:

• Password fields and any other sensitive field type.
• Fields inside Collections, Section Builders and Field Sets (they need a row context; see below).
• Field groups that only appear on taxonomy terms.

Deleted fields, unknown keys and fields of the wrong type simply render nothing.

#Context

The value comes from the post Elementor is rendering: the page being viewed, the post open in the editor, or the current post inside a loop widget (CAFE reads the global post, so a loop item shows its own values).

This includes Elementor Pro's Loop Grid: a loop item template with CAFE tags shows each post's own values. Tested with a Loop Grid of 10 posts whose loop item used a CAFE text tag and a CAFE image tag: every item showed its own title and image, in 7 CAFE queries for the whole page (batch queries, not one per post).

Elementor Pro's Theme Builder works the same way: a Single Post template whose widgets use CAFE tags shows the values of the post being viewed, in the right language (tested with a Dutch post and its English translation). In an Archive template, post fields work inside the loop (each item shows its own post); outside the loop an archive has no post, so only Settings Page fields have a value there.

Elementor Pro Forms accept CAFE tags wherever Elementor allows dynamic values, tested with:

• a form field's Default Value (filled with the CAFE text of the post being viewed, in the current language);
• the Redirect action's URL (a CAFE URL field; submitting the form went to the Dutch page, and to the English page on the translation).

Not supported in 0.9.0: term archives, author archives and other non-post contexts. CAFE tags render nothing there. Pro's Archive templates were not tested.

#WPML

Nothing extra to set up: the tags use CAFE's language-aware resolver.

• A page in Dutch shows the Dutch values; its English translation shows the English values.
• Translate, Copy, Copy once, Do not translate and locked sub-fields behave exactly as on the edit screens (see WPML).
• Translated attachments: an Image or Link tag shows the attachment of the current language when one exists.

Tested with a Dutch page and its English translation: text, textarea, link and image, with the image set to Copy (both languages show the original's image while the texts differ).

#Performance

The tags use CAFE's normal bulk loading:

• All CAFE values of one post load with one query, however many tags the page has.
• In a loop, CAFE primes the whole batch of posts (the_posts), so 25 posts × 4 tags do not cause one query per post or per field.

Measured on a real Elementor page with five widgets (heading, text editor, image, button with link, empty field): 5 CAFE queries for the whole page: the cached schema, the post's values, its relationships and two for the theme's Settings Page values. A regression test covers the loop case (25 posts × 4 tags ≤ 3 CAFE queries).

The integration adds no JavaScript and no CSS to the front end, and CAFE's React admin bundle is never loaded there.

Elementor can cache rendered elements (_elementor_element_cache). CAFE clears that cache when a value changes: the post's own cache when a post field is saved, and Elementor's whole cache when a Settings Page value is saved, so an edited value is visible on the next page load.

#Not supported yet

Deferred to a later release (the architecture is ready for them):

The one real limitation: CAFE Collections and Section Builders. Their rows cannot be used as dynamic data, because an Elementor dynamic tag is given one object (the post) and no row, so there is no way to say "the title of row 3". Elementor Pro's Loop Grid loops over posts, not over CAFE rows. Until CAFE ships its own loop widget, show rows with cafe_rows() in a theme template, a block or a shortcode, and use Elementor for the rest of the page.

Also not available yet:

• Term, user and author contexts (a tag on a term archive has no value).
• Form actions other than Redirect receive whatever Elementor passes them; only Redirect was tested.