MelisFront

The front-office rendering system that turns a URL into a finished public page and ships the content blocks (page plugins) authors drop onto pages in the React back-office. Package melisplatform/melis-front.

Purpose

MelisFront is the runtime that resolves a web address to a Melis page, runs the render pipeline (routing, SEO, templating plugins, layout, caching, asset minification) and delivers the HTML response to the visitor. It also powers the live, editable preview by re-rendering any page in melis mode. MelisFront owns no database tables — all page/site/template/SEO data is read from melis-engine, the single source of truth.

MelisFront is one of a tightly-coupled trio: melis-engine (data layer), melis-front (front rendering), melis-cms (back-office editor). Changes to any one routinely involve the other two.

In the React back-office

MelisFront has no standalone React tool: no ui-react/ brick, no brick.manifest.json, no react-api.php — it never appears in the /melis-react left sidebar. Its entire back-office surface is the set of page plugins (content blocks) you configure inside the MelisCms page editor.

You meet MelisFront when you edit a page: MelisCms → open a page → Edition tab. That Edition tab is the classic drag-drop page editor rendered in an iframe inside the React shell (/melis/react-tool-page?key=meliscms_page). Inside it you drag MelisFront's blocks onto zones and open their Properties modal. React only hosts that legacy editor; MelisFront contributes no React component of its own.

There are two kinds of block:

Tag blocks edited in place on the page — HTML (rich text) and Media (image/file). No modal.
Config blocks set up through a Properties modal — Menu, Breadcrumb, List-from-folder, GDPR banner. They generate content from the page tree / site config.

Enable it

Add to config/melis.module.load.php:

php

return [
    'MelisFront',
];

Declared Melis dependency: melisplatform/melis-core. At runtime it also consumes MelisEngine services. Load order: melis-core → melis-front → melis-engine → melis-cms.

Tag blocks — edit in place

HTML (Text)

The workhorse block: a rich-text area (TinyMCE) for titles, paragraphs, links and formatted content. Edited directly on the page, with no Properties modal. Plugin class MelisFrontTagHtmlPlugin.

HTML/Text block in the page editor with the full TinyMCE toolbar

Media

Places an image or file from the media library. Also edited in place through a compact toolbar with an "Add media content here" placeholder. Plugin class MelisFrontTagMediaPlugin.

Media block in place with the Add media content here placeholder

Config blocks are set up through a small Properties modal rendered by the platform. The two recurring fields are the Template dropdown (MelisEnginePluginTemplateSelect, field template_path) that picks the .phtml view, and a page picker (MelisText with a fa fa-sitemap button) that sets the starting/parent page in the tree. Each config block declares its modal as a melis.modal_form (Laminas form spec) in config/plugins/<Plugin>.config.php; there is no per-plugin React component.

Builds a navigation menu automatically from the page tree. Modal fields: Template and Starting page. Plugin MelisFrontMenuPlugin (field pageIdRootMenu).

Renders the "you are here" trail (Home › Section › Page). Modal fields: Template (default MelisFront/breadcrumb) and Starting page. Plugin MelisFrontBreadcrumbPlugin (field pageIdRootBreadcrumb).

Breadcrumb block Properties modal with Template and Starting page fields

List-from-folder

Takes a folder in the page tree and lists its child pages automatically. Modal fields: Template (how each item renders) and Parent page (the source folder). Plugin MelisFrontShowListFromFolderPlugin (field pageIdFolder).

List-from-folder Properties modal with Template and Parent page fields

The cookie/consent banner shown on the public site. Its modal only needs the Template; wording comes from the site's GDPR texts. Plugin MelisFrontGdprBannerPlugin.

GDPR banner Properties modal with a single Template field

Plugin	Modal fields (name / type)	Default template
Breadcrumb	`template_path` (`MelisEnginePluginTemplateSelect`) · `pageIdRootBreadcrumb` (`MelisText`, sitemap)	`MelisFront/breadcrumb`
Menu	`template_path` · `pageIdRootMenu` (`MelisText`, sitemap)	`MelisFront/menu`
List-from-folder	`template_path` · `pageIdFolder` (`MelisText`, sitemap)	`MelisFront/show-list-from-folder`
GDPR banner	`template_path` only	`MelisFront/gdpr-banner`

Apply posts the values back through the drag-drop layer, which persists them into the page's session XML. React is not involved in that round-trip; the plugin UI is entirely legacy PHP/JS inside the Edition iframe.

Key services

Service alias	Role
`MelisFrontHead`	Manages page `<title>`, meta description, canonical and injects plugin CSS/JS assets.
`MelisSiteConfigService`	Reads per-site configuration by key, page or language — file + DB merge.
`MelisSiteTranslationService`	Per-site translation key/text lookup and CRUD, cached per site.
`MelisTranslationService`	Module/locale translations (back-office strings), cached.
`MinifyAssets`	Builds `bundle.css` / `bundle.js` per site using `matthiasmullie/minify`.
`MelisFrontNavigation`	Navigation factory that builds a `Laminas\Navigation` tree from the engine page tree.

Front rendering

Routing

The main front route is a Regex pattern matching .../id/{idpage}, dispatched to MelisFront\Controller\Index::index. Child routes: /renderMode/melis (back-office edit mode used by MelisCms) and /preview (preview of the saved version). Special routes: sitemap(.xml), /css/plugin-width.css, /melissearchindex/…, /melispluginrenderer (AJAX single-plugin render), /minify-assets.

Render pipeline (listeners)

Wired in src/Module.php across EVENT_DISPATCH and EVENT_FINISH (~19 listeners total):

Phase	Listeners
`EVENT_LOAD_MODULES_POST`	`MelisFrontSEORouteListener`, `MelisFrontSiteConfigListener`, `MelisFrontMiniTemplateConfigListener`
`EVENT_DISPATCH`	`MelisFrontXSSParameterListener`, `MelisFrontHomePageRoutingListener` / `…HomePageIdOverrideListener`, `MelisFrontSEODispatchRouterRegularUrlListener` (page validation, 404/301, fires `melisfront_site_dispatch_ready`), `MelisFront404To301Listener`, `MelisFront404CatcherListener`
`EVENT_FINISH`	`MelisFrontPluginsToLayoutListener` (plugin CSS/JS), `MelisFrontSEOMetaPageListener` (title/description/canonical), `MelisFrontAttachCssListener` (page CSS), `MelisFrontLayoutListener` (front layout or BO layout + TinyMCE in `melis` mode), `MelisFrontPageCacheListener`, `MelisFrontMinifiedAssetsCheckerListener`

Templating plugins (controller plugins)

All extend MelisEngine\Controller\Plugin\MelisTemplatingPlugin, registered under controller_plugins. The blocks surfaced in the React editor are a subset of these:

Plugin alias	Block
`MelisFrontTagHtmlPlugin`	Inline-editable HTML / rich-text zone.
`MelisFrontTagTextareaPlugin`	Plain text zone.
`MelisFrontTagMediaPlugin`	Image / file from the media library.
`MelisFrontMenuPlugin`	Navigation menu built from the page tree.
`MelisFrontBreadcrumbPlugin`	Breadcrumb trail (Home › … › Current page).
`MelisFrontShowListFromFolderPlugin`	Lists sub-pages from a chosen folder automatically.
`MelisFrontDragDropZonePlugin`	Layout container (drop zone for other plugins).
`MelisFrontBlockSectionPlugin`	Reusable block/section container.
`MelisFrontGenericContentPlugin`	General-purpose content block.
`MelisFrontGdprBannerPlugin`	Cookie / GDPR consent banner.
`MelisFrontGdprRevalidationPlugin`	Re-asks consent when the GDPR policy changes.
`MelisFrontSearchResultsPlugin`	Renders internal site-search results.
`MiniTemplatePlugin`	Inserts a pre-built mini-template in one click.

The plugin renderer controller

MelisFront\Controller\MelisPluginRendererController re-renders a single plugin on demand — this is what the Edition iframe calls when you drop or edit a block:

getPluginAction() (route /melispluginrenderer) — AJAX render of one plugin.
editPluginAction, dndLayoutAction, dndUpdateOrderAction, dndRemoveAction — the drag-drop and plugin-edition flows.

View helpers

Used inside a site's .phtml templates (registered under view_helpers):

Helper alias	Use
`MelisTag`	Declares an editable zone (HTML or media) that editors fill in-place.
`MelisLink`	Outputs a page's SEO-friendly URL (stays correct if the page moves).
`MelisMenu`	Renders a navigation menu from the page tree.
`MelisDragDropZone`	Renders a drag-and-drop zone hosting other plugins.
`siteTranslate`	Outputs a site translation string by key.
`SiteConfig`	Reads a site configuration value.

Language/home helpers for language-version links and the home-page link are also available.

MelisFrontNavigation (src/Navigation/Factory/) extends the Laminas navigation factory to build a Laminas\Navigation object from the engine's page tree (MelisEnginePage / MelisEngineTree), which the Menu and Breadcrumb helpers render.

Asset minification

MinifyAssetsService (backed by matthiasmullie/minify) builds bundle.css / bundle.js per site. MelisFrontMinifiedAssetsCheckerListener injects them (cache-busted) when present. Trigger a build via the /minify-assets route.

Database tables

MelisFront owns no database tables. All page, site, language, SEO and translation data is owned by melis-engine and melis-cms.

Example

Typical usage in a site .phtml template and PHP service calls:

php

// Inside a site page template (.phtml)
<?= $this->MelisMenu($idPage); ?>                         // navigation menu from the page tree
<a href="<?= $this->MelisLink($targetPageId); ?>">…</a>  // SEO-friendly page link
<?= $this->MelisTag($idPage, 'zone_main', 'html'); ?>    // editable HTML zone
<?= $this->siteTranslate('btn_send'); ?>                  // site translation string
<?= $this->SiteConfig('contact_email'); ?>               // site config value

php

// Reading site config and translations in PHP
$siteConfig = $serviceManager->get('MelisSiteConfigService');
$email = $siteConfig->getSiteConfigByKey('contact_email', $siteId);

$tr = $serviceManager->get('MelisSiteTranslationService')
        ->getEntryByTextAndSiteId('btn_send', $siteId, $langId);

php

// Hooking the render pipeline (after page validation, before render)
$sharedEvents->attach('MelisFront', 'melisfront_site_dispatch_ready', function ($e) {
    $params = $e->getParams(); // page id, site, renderMode…
    // e.g. force a redirect, add data to the layout, A/B-test…
}, 50);

Key files

Concern	Path
Module bootstrap + listener wiring	`vendor/melisplatform/melis-front/src/Module.php`
Routes, services, plugins, helpers, caches	`vendor/melisplatform/melis-front/config/module.config.php`
Plugin config (front defaults + `melis.modal_form`)	`vendor/melisplatform/melis-front/config/plugins/`
Render-pipeline listeners	`vendor/melisplatform/melis-front/src/Listener/`
Services (Head, SiteConfig, Translations, Minify)	`vendor/melisplatform/melis-front/src/Service/`
Templating plugins (content blocks)	`vendor/melisplatform/melis-front/src/Controller/Plugin/`
Plugin renderer controller	`vendor/melisplatform/melis-front/src/Controller/MelisPluginRendererController.php`
View helpers	`vendor/melisplatform/melis-front/src/View/Helper/`
Navigation factory	`vendor/melisplatform/melis-front/src/Navigation/Factory/`

See also: melis-engine, melis-cms, melis-core

MelisFront ​

Purpose ​

In the React back-office ​

Enable it ​

Tag blocks — edit in place ​

HTML (Text) ​

Media ​

Config blocks — Properties modal ​

Menu ​

Breadcrumb ​

List-from-folder ​

GDPR banner ​

Config modal fields ​

Key services ​

Front rendering ​

Routing ​

Render pipeline (listeners) ​

Templating plugins (controller plugins) ​

The plugin renderer controller ​

View helpers ​

Navigation ​

Asset minification ​

Database tables ​

Example ​

Key files ​