Documentation v1.0.1

Mold Blocks

Comprehensive documentation for all custom Gutenberg blocks included in the Mold Blocks plugin. This reference guide details the attributes, settings, and purpose of each block.

Wrappers & Layout

Header Wrap mold/header-wrap

A container block designed for site headers, supporting sticky positioning and glassmorphism effects.

Attributes:

  • isFullWidth boolean, default: true – Whether the header spans full width.
  • isCenterContent boolean, default: false – Centers the inner content if full width.
  • isSticky boolean, default: false – Enables sticky positioning.
  • paddingTopWrap number – Top padding for the wrapper.
  • paddingBlock, paddingInline – Padding for the header content.
  • borderRadius – Border radius of the header.
  • bgColor – Background color.
  • Sticky Settings (when isSticky is true):
    • topSticky – Top offset when sticky.
    • paddingBlockSticky, paddingInlineSticky – Padding when sticky.
    • borderRadiusSticky – Border radius when sticky.
    • bgColorSticky – Background color when sticky.
    • bgblur – Backdrop blur amount (glass effect) when sticky.

Div / Container mold/div

A versatile container block (like an HTML <div>) with extensive styling options for layout, spacing, and positioning.

Attributes:

  • minHeight, minHeightUnit – Minimum height of the container.
  • widthContent number – Max width of content.
  • padding, margin – Spacing controls.
  • backgroundColor, backgroundImage – Background styling.
  • border, borderRadius, boxShadow – Border and shadow styles.
  • flexDirection, justifyContent, alignItems – Flexbox layout controls.
  • position – CSS positioning (relative/absolute/fixed).
  • zIndex – Stack order.
  • overflow – Overflow handling.

Step Process mold/step

Displays a step-by-step process or timeline.

Attributes:

  • stepType string, default: ‘number’ – Type of step indicator (number, image, icon).
  • stepSize number, default: 60 – Size of the step indicator.
  • stepStyleIndividual boolean – Allow individual styling per step.
  • stepColor, stepBgColor – Global colors for step indicators.
  • headColor, bodyColor – Text colors for title and description.
  • trackColor, trackWidth – Styling for the connecting line.
  • activeColor – Color for the active/first step.
  • animation boolean – Enables animation for steps.
  • animationInterval number – Speed of animation.
  • listItems array – The data for each step (text, content, imageUrl, icon).

Tabs mold/tab

A container for creating tabbed content sections.

Attributes:

  • activeTab number, default: 0 – Index of the currently active tab.
  • tabStyle string, default: ‘default’ – Visual style of tabs.
  • tabPosition string, default: ‘top’ – Position of tab headers (top, left, right, bottom).
  • tabColor, tabBgColor – Colors for inactive tabs.
  • tabActiveColor, tabActiveBgColor – Colors for the active tab.



Tab Item mold/tab-item

An individual tab within the Tabs block.

Attributes:

  • title string – The title displayed on the tab button.
  • icon string – Optional icon for the tab.

Accordion mold/accordion

Collapsible content sections, useful for FAQs.

Attributes:

  • open boolean, default: false – Whether the accordion is open by default.
  • style string, default: ‘default’ – Visual style preset.
  • title string – The heading text of the accordion.
  • icon string – Icon for the toggle state.
  • headColor, headBgColor – Colors for the accordion header.
  • contentColor, contentBgColor – Colors for the expanded content area.

List mold/list

An advanced list block with custom icons and styling.

Attributes:

  • listStyle string, default: ‘check’ – Icon style for list items (check, star, arrow, etc.).
  • iconColor, iconBgColor – Colors for the list bullets/icons.
  • textColor – Color for the list text.
  • items array – List of items.

Scroll Top mold/scroll-top

A “Back to Top” button that appears when scrolling down.

Attributes:

  • position string – Screen position (bottom-right, bottom-left, etc.).
  • offset number – Distance from edge.
  • icon string – Icon identifier.
  • showAfter number – Scroll distance (px) before showing.
  • color, backgroundColor – Visual styling.

Counter mold/counter

Animated number counter.

Attributes:

  • startNumber number – Starting value.
  • endNumber number – Ending value.
  • duration number – Animation duration.
  • prefix string – Text before number.
  • suffix string – Text after number (e.g., %).
  • separator string – Thousands separator.

Visual & Media

Banner mold/banner

A hero or banner block featuring an gradient color like “Aurora” background effect.

Attributes:

  • blobColor1, blobColor2, blobColor3 – Colors for the animated gradient blobs.
  • bgColor – Fallback background color.
  • padding number – Padding around the content.
  • _loadedDefaults – Internal flag for default settings.

Video Popup mold/video

Displays a video thumbnail that opens a video in a popup (lightbox) or inline.

Attributes:

  • videoSource string, default: ‘youtube’ – Source type (youtube, upload).
  • youtubeUrl string – URL for YouTube video.
  • uploadedVideoUrl string – URL for self-hosted video.
  • videoThumbnail string – Custom thumbnail image URL.
  • buttonType, buttonSize, buttonColor – Play button styling.
  • videoTriggerAuto boolean – Autoplay video on open.
  • thumbnailHeightType – Fix height by ‘number’ (px) or ‘ratio’ (16:9 etc).
  • aspectRatio – Aspect ratio for the thumbnail.
  • videoSize string – Size of the popup video player (s, m, l, xl).
  • backdropFilterBlur – Blur amount for the popup backdrop.
  • videoOverlayColor – Color of the popup backdrop.

Image Grid mold/imgrid

Displays a grid of images with a unique shuffling animation effect.

Attributes:

  • images array – List of selected images.
  • columns number, default: 6 – Number of columns in grid.
  • rows number, default: 4 – Number of rows in grid.
  • gridGap number – Gap between images.
  • animationInterval number – Speed of shuffle animation.
  • baseColor – Base color to generate placeholder palette.
  • borderRadius – Border radius of images.

Material Icon mold/materialicon

Displays an icon from the Google Material Icons library.

Attributes:

  • icon string – The icon name/identifier.
  • size number – Size of the icon in pixels.
  • color string – Icon color.
  • rotate number – Rotation degrees.

Dashicon mold/dashicon

Displays an icon from the WordPress Dashicons library.

Attributes:

  • icon string – The dashicon class suffix.
  • size, color, rotate – Styling controls.

Loading / Preloader mold/loading

A block to display loading animations, useful for visual feedback or transitions.

Attributes:

  • loaderType string – Type of animation (spinner, dots, pulse, etc.).
  • color string – Primary color of the loader.
  • size number – Size of the loader.

Text Rotate mold/text-rotate

Animated text that cycles through a list of words or phrases.

Attributes:

  • animationType string, default: ‘typewriter’ – Animation style (typewriter, rotate).
  • textArray array – List of text strings to cycle through.
  • typeDuration number – Duration of typing effect.
  • loop boolean – Whether to loop continuously.

17. Text Animate mold/text-animate

Applies entrance animations to text (e.g., splitting by character or word).

Attributes:

  • animationType string, default: ‘none’ – Type (split, typewriter).
  • splitType string – For split animation (lines, words, chars).
  • alignType – Text alignment.
  • textColor – Initial text color.
  • textColorTo – Target color for animation.
  • content string – The text content (HTML).

18. Text Column mold/text-column

Displays text in a multi-column layout.

Attributes:

  • columnCount number, default: 2 – Number of columns.
  • columnGap number – Space between columns.
  • columnRule – Style for the dividing line between columns.

Utility

Read Time mold/readtime

Displays the estimated reading time for the post.

Attributes:

No configurable attributes found (automatically calculated based on content).