Implement mosaic widget

This guide describes the process to implement a widget in mosaic in a tenant using the MarfeelPress plugin.

First, check the Widgets route response.

To do so, type either of the following URL in the browser.

• https://www.tenant.com/?rest_route=marfeelpress/v1/widgets&token=XXXXXXXXXXXXXXXX
• https://www.tenant.com/wp-json/marfeelpress/v1/widgets?token=XXXXXXXXXXXXXXXX

TIP

Find the token on the tenant's Insight WP Info page.

The response contains information about all detected widgets which later can be used to configure them in the Marfeel version.

Response example

"footer-widget": {
  "widgets": [
    (...),
    {
      "id": "nav_menu-3",
      "name": "Navigation Menu",
      "class": "WP_Nav_Menu_Widget",
      "option_name": "widget_nav_menu",
      "html": "<div class=\"widget widget_nav_menu\"><h2 class=\"widgettitle\">WidgetHTML</div></div>"
    }
  ]
}

• The id key is the widget's unique identifier, it is used to reference the widget in the implementation.
• The html contains the rendered HTML of the widget, the same HTML that will be injected in the Marfeel version.
• The rest of the fields are not relevant to this guide.

Empty API response

The desired widget might not appear in the response. What happens usually when there's another plugin adding this information, making it invisible to the API.

It is a known limitation and when met, contact the Content Platform chapter to find a solution.

Once the desired widget is located in the JSON, the next step is to link it to the Layout Descriptor configuration.

Create a new object in the position the widget should appear using the following configuration values:

• name: rawHTML
• key: wordpress-widget
• id: The ID matching the desired widget, found at the API response.

Example

To display the widget from the response shown earlier, in the first position of the homepage, create the following object in the first position of the layoutsDescriptor/home.json JSON:

{
  "name": "rawHTML",
  "key": "wordpress-widget", 
  "attr": {
    "pocket": {
      "extraction": {
        "id": "nav_menu-3"
      }
    }
  }
}

This injects the HTML code from the API's response in the selected position.

Styles

Styles may be required for a correct integration within Marfeel's UI.

In that case, add them to the tenant/index/src/scss/_custom.s.scss file, using the .mrf-article-rawhtml selector.

.mrf-article-rawhtml {
    h1, p {
        padding: 0 $pageLayoutPadding;
        margin-bottom: $trailingMargin;
    }