Description
Modern Design Library is a toolkit of opinionated Gutenberg blocks for WordPress. All optional blocks are registered using PHP-only block registration (autoRegister) — no JavaScript build step or Node.js tooling required.
The plugin ships with:
- Colored Line — a fully customisable horizontal separator block with striped, shade, and dotted style variants (classic JS-registered block).
- Advanced Separator (experimental) — a PHP-only separator with configurable width, height, padding, alignment, and three decorative variants.
- Advanced Heading (experimental) — 13 decorative heading styles, heading level selector (H1–H6), optional tagline, and full typography/spacing/border block support controls. Accent decorations automatically follow the text colour.
- Marquee (experimental) — a single infinitely scrolling text row. Stack multiple blocks for multi-row layouts. Speed (Slow/Medium/Fast) and direction (Left/Right) are configurable. Animation script is loaded lazily — only on pages containing the block.
- Call to Action (experimental) — a CTA banner with heading, subheading, button label/URL, three visual variants (Primary/Secondary/Dark), and native colour overrides.
- Author Box (experimental) — displays a user card with avatar, bio, email, and LinkedIn link. User is selected from a dropdown. LinkedIn URL is stored as user meta (set on the user’s profile page).
Optional blocks are enabled from Settings Modern Design Library Modules.
The optional blocks require the Gutenberg plugin or WordPress 7.0+ for the autoRegister block support.
Read more on getButterfly.
For a deep dive into how the PHP-only blocks work, read PHP-Only Block Registration in WordPress 7.0.
Blocks
This plugin provides 6 blocks.
- Colored Line
- Mdlui Advanced Heading
- Mdlui Cta
- Mdlui Marquee
- Mdlui Author Box
- Mdlui Advanced Separator
Installation
- Upload to your plugins folder, usually
wp-content/plugins/ - Activate the plugin on the plugins screen.
- Configure the plugin from Settings -> Modern Design Library.
Reviews
3 ខែកញ្ញា, 2016
Exactly what i needed and was looking since long time,i am very happy 🙂 , thanks alot to the developer, one think if u could help me that will be great. That is “how to set (decrese actually) MDL card size when having separte image placement “. Even if image size is decreased the height remains the same. please tell me Hiw can i achieve that in custom CSS 🙂 thanks
Contributors & Developers
“Modern Design Library” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Modern Design Library” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2.0
- NEW: Advanced Separator block — PHP-only horizontal separator with width, height, padding, alignment, and Striped/Shade/Dotted style variants
- NEW: Advanced Heading block — PHP-only heading with 13 decorative styles, H1–H6 level selector, optional tagline, and full typography/spacing/border support; accent decorations inherit text colour via currentColor
- NEW: Marquee block — PHP-only infinitely scrolling text row with speed, direction, colour, and typography controls; animation script loaded lazily via render callback
- NEW: Call to Action block — PHP-only CTA banner with heading, subheading, button, three visual variants, and native colour overrides
- NEW: Author Box block — PHP-only author card with avatar, bio, email, and LinkedIn; user selected from a live dropdown; LinkedIn URL stored as user meta
- NEW: Modules admin panel — optional blocks are individually enabled/disabled from Settings Modern Design Library Modules
- NEW: Consolidated blocks.css — all PHP-only block styles share a single stylesheet loaded once per page regardless of how many MDL blocks are present
1.1.6
- UPDATE: Upgrade colored-line block to API version 3 for iframe editor compatibility
- UPDATE: Add useBlockProps() hook for proper block wrapper attributes
- UPDATE: Remove deprecated wp-editor dependency
- UPDATE: Change edit function to return Fragment instead of array
1.1.5
- FIX: Fix CVE-2025-5842 (props Peter Thaleikis via Wordfence)
- UPDATE: Update WordPress compatibility
1.1.4
- UPDATE: Update WordPress compatibility
1.1.2
- UPDATE: Update WordPress compatibility
- UPDATE: Remove old code
1.1.1
- UPDATE: Update WordPress compatibility
- UPDATE: Remove custom background colour in editor
1.1.0
- UPDATE: (BREAKING) Added the first block (horizontal/vertical colored line/divider)
- UPDATE: (BREAKING) Removed old/obsolete libraries
- UPDATE: Updated WordPress compatibility
- UPDATE: Updated required PHP version
1.0.6
- UPDATE: (BREAKING) Removed third-party (external) Material Design stylesheets
1.0.5
- UPDATE: Updated WordPress compatibility
- UPDATE: Updated required PHP version
1.0.4
- UPDATE: Updated plugin tags
- UPDATE: Updated changelog
- UPDATE: Updated readme.txt (in progress)
- UPDATE: Removed demo page
- UPDATE: Removed plugin settings page (based on Customizer)
- UPDATE: Refactoring of several classes
- UPDATE: Removed TGM Plugin Activation dependency
- UPDATE: Removed Shortcake UI dependency (no shortcode builder available)
- UPDATE: Prepared plugin for next big release with user options, help, documentation and shortcode builder
- UPDATE: Updated WordPress compatibility
- UPDATE: Updated required PHP version
- UPDATE: Removed included language file and prepared the plugin for native internationalisation (i18n)
1.0.3
- Move TGM Plugin Activation file to ‘inc’ directory to avoid it showing up as a separate plugin in site’s list of plugins
1.0.2
- Updated to load MDL Version 1.0.6
1.0.1
- Updated to load MDL Version 1.0.5 instead of 1.0.4
1.0
- Initially uploaded to WordPress.org on September 14, 2015