MERAK Block Library

Interactive documentation with live preview

Custom Container

A block that can be used to create a custom container with blocks inside.

Block Information & Usage
Block Name:
merak/custom-container
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ❌
  • block.js - ❌

Custom Container Block

This is a sample content area within the custom container. In the actual editor, you would place other blocks inside this container.

Desktop Width: 85%

Mobile Width: 90%

Background Color: #FFF

Full Text

A block that displays a full text section with a title, description.

Block Information & Usage
Block Name:
merak/full-text
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Hero

A block that displays a hero section with a background image, background color, a title, and a description. 2 CTA buttons are optional. Image in the right column is optional.

Block Information & Usage
Block Name:
merak/hero
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Recent articles

A block that dynamically displays the latest articles.

Block Information & Usage
Block Name:
merak/recent-articles
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ❌
  • block.js - ❌

Recent blog articles

Smart Cards

A block that displays a flexible grid of smart cards with a title, blockquote, subtitle, content, and image/icon, and a CTA button.

Block Information & Usage
Block Name:
merak/smart-cards
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Insert section title

Add your first card to get started.

Tag Cloud

A block that displays a section with a container, inside the container is a title, and below is a tag cloud.

Block Information & Usage
Block Name:
merak/tag-cloud
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Insert Title Here

Text Left Image Right

A block that displays a title, description, and optional tag button section below the content. The image is on the right side of the content.

Block Information & Usage
Block Name:
merak/text-left-image-right
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Let's Build Something Amazing Together!

If you're ready to tackle the challenges your website is facing and take it to the next level, we'd love to chat. Your website should be a tool that helps you succeed, not a roadblock. Let's partner and make sure it works for you. Reach out today, and let's start creating the website your business deserves.

Sample Image

Text Left Image Slider Right

A block that displays a left column with a title and description followed by a right section with a slider. Inside each slide is an image and text below the image.

Block Information & Usage
Block Name:
merak/text-left-image-slider-right
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ✅

Three Card

A block that displays a section title, with three cards horizontally aligned below it with text inside each card.

Block Information & Usage
Block Name:
merak/three-card
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Testimonials

Three Card Icon

Displays three cards in a row with icons, titles, and descriptions. Each card can link to another page.

Block Information & Usage
Block Name:
merak/three-card-icon
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ✅

Two Column Accordions

A block that displays a two column accordions section with a title, description. Optionally shows specified related articles.

Block Information & Usage
Block Name:
merak/two-column-accordions
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ✅

Insert Title Here

Insert Description Here

Youtube

A block that displays a Youtube video.

Block Information & Usage
Block Name:
merak/youtube
Category:
merak-blocks
Supports:
{"align":["wide","full"]}
Files:
  • render.php - ✅
  • block.json - ✅
  • acf.json - ✅
  • block.css - ✅
  • block.js - ❌

Insert Title Here

Insert Description Here
Learn More