■

BLOCKTOBER

  • Daily color

    A simple card that shows an ‘AAA’ accessible color combination a day and shows the date. No refresh, no adjustments, just a color combination.

    Telex project here.

    Daily Color Harmony

    Tuesday, March 31, 2026

    Background
    Deep Sea #0d3b66
    Text
    Vanilla Mist #faf3e3
    WCAG AAA Compliant
    Prompt 
    Create a WordPress block that displays a daily rotating accessible color combination with background and text colors. The block shows a preview area with the current color pair and displays both the color names and hex codes below. Colors automatically update daily at midnight using a deterministic algorithm based on the current date to ensure consistency across all sites. Include a subtle fade transition animation when colors change. In the editor, show a live preview with the same styling as the frontend. The block should be lightweight with no external dependencies, use CSS custom properties for easy theme integration, and ensure all color combinations meet WCAG AA contrast requirements. Provide options to manually refresh the color combination and optionally lock to a specific date for testing purposes.

  • Tag cloud

    A tag cloud with layout options and some preset styles.

    Telex project here.

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

  • Ratings

    A simple ratings block with option to show how many have rated (or not), color and different styles of rating. You also can edit the text.

    Telex project here.

    ☆ ☆ ☆ ☆ ☆
    36 vote
    Prompt

    Create an interactive star rating WordPress block that displays five clickable stars for user ratings. In the editor, show a preview of the star interface with placeholder text. On the frontend, visitors click stars to submit ratings from 1-5 stars, with visual feedback showing filled and unfilled stars. Display a live counter below showing total number of ratings submitted like “47 people have rated”. Store ratings in WordPress database and update counter dynamically without page refresh. Use clean, minimal design with golden star colors and subtle hover effects. Block should handle multiple ratings per page and prevent duplicate submissions from same user session. Include basic styling controls in block settings for star size and color customization. Improve the design but keep it native to WordPress. Have 6 themes of stars. Ensure the editor preview looks like front will. Have option to not show text. Make sure star color and text color are based on ‘text color’ in design tools.