BLOCKTOBER
A tag cloud with layout options and some preset styles.
Telex project here.
Create a WordPress editor block that displays post tags in a customizable cloud format. The block fetches and displays site tags with sizes based on post count frequency.
In the editor, show actual tags or placeholder samples with live preview of all styling changes. Display settings panel with Content, Layout, and Style sections for intuitive customization.
On the frontend, render clickable tag links that open posts filtered by that tag. Tags scale in size based on post count with larger tags for popular topics.
Content controls: show all tags or manually select specific ones, set minimum post count threshold, limit maximum tags displayed, choose sort order alphabetical post count or random, toggle post count numbers, exclude unwanted tags.
Layout options: three display styles inline cloud with text wrapping, equal-width grid, or vertical list. Include alignment controls, spacing between tags using WordPress spacing scale, container max-width setting.
Style controls: typography with font size range for smallest to largest tags, colors for text background and hover states, border radius for pill shapes, internal padding, four preset styles plain text pill badges outlined buttons underlined links. Make sure all use native wordpress design tools and style tab.
Advanced features: custom separators between tags, optional view all tags link, subtle hover animations, keyboard navigation with focus states, proper aria labels including post counts.A simple notice box that can be configured to different states. It has options for dismissing and icon. This could be expanded on, but for now has simple color and styling options built in for ease.
Telex project is here.
Create a WordPress Alert/Notice block with four alert types using semantic colors: Info (blue), Success (green), Warning (yellow), Error (red). Include an optional title field and main message content area with RichText components for editing.
In the editor, display the alert with full styling preview including colors, icons, and borders. Provide sidebar controls for alert type selection, icon visibility toggle, dismissible close button toggle, border style options (solid, left accent, none), background opacity slider, and text alignment.
On the frontend, render the styled alert with proper ARIA roles and labels for accessibility. When dismissible is enabled, include a functional close button that removes the alert via JavaScript and supports keyboard navigation.
Use universally recognized icons (info circle, checkmark, exclamation triangle, X symbol) that complement the color coding for colorblind accessibility. Apply WordPress-native typography and spacing with clean visual hierarchy that matches admin design patterns.