WP Manifestindependent plugin directory
manifest / editor / style-tiles

Style Tiles

WordPress Gutenberg block that renders style tiles from design tokens. Drop a visual direction into any post or page.

by MZV · github.com/mikezielonkadotcom/style-tiles

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/mikezielonkadotcom/style-tiles/archive/refs/heads/main.zip

Readme

=== Style Tiles === Contributors: mzv Tags: gutenberg, block, design, style tiles, design tokens Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 Stable tag: 1.0.0 License: MIT License URI: https://opensource.org/licenses/MIT

A Gutenberg block plugin that renders beautiful style tiles for brand direction, design token communication, and client presentation.

== Description ==

Style Tiles adds a mzv/style-tile block that lets designers and content teams present brand direction through colors, typography, buttons, textures, spacing scale, and adjectives.

Features:

  • Dedicated design block category and mzv/style-tile block.
  • Sidebar controls for all tile settings.
  • DTCG JSON import and export support.
  • Figma variable-style JSON import support.
  • WCAG contrast display for text/color pairings.
  • Light and dark themes.
  • Horizontal and vertical layout presets.
  • Theme mapping display for WordPress Core, Kadence, and GeneratePress.
  • Dynamic Google Fonts loading based on selected fonts.
  • Pure CSS frontend rendering with responsive and print styles.

== Installation ==

  1. Upload the plugin folder to /wp-content/plugins/style-tiles.
  2. Activate the plugin through the "Plugins" screen in WordPress.
  3. Edit any post/page and add the "Style Tile" block.

== Development ==

  1. Run npm install.
  2. Run npm run start for watch mode.
  3. Run npm run build for production assets.

== Changelog ==

= 1.0.0 =

  • Initial release.

Read the full README on GitHub →