Documentation v1.0

WP Mold Blocks

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

Wrappers & Layout

2. 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.

3. 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.

4. 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).

5. 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.

6. 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.

7. 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.

8. 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.

Visual & Media

10. 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.

11. 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.

12. 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.

13. 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.

14. Dashicon mold/dashicon

Displays an icon from the WordPress Dashicons library.

Attributes:

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

15. 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.

16. 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

23. Read Time mold/readtime

Displays the estimated reading time for the post.

Attributes:

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

25. 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.

26. 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.