■

BLOCKTOBER

  • Trick or treat

    It’s the day for it so here is a trick or treat button to close out Blocktober. A simple button that decides, do you get a trick or treat.

    Telex project is here.

    Prompt 
    Create a WordPress block that displays a "Trick or Treat" button. On each click, randomly show either a Trick or Treat message in one to two sentences, Halloween-themed and family-friendly. Treats should be compliments, puns, or sweet messages. Tricks should be playful scares, silly curses, or spooky whispers. Messages should alternate randomly between charming, eerie, and playful tones. In the editor, show the button with a preview message and controls to customize button text and colors. On the frontend, display the interactive button that reveals a new random message with each click below or beside the button with a smooth fade-in animation. Include at least twenty pre-written messages total, split between Tricks and Treats.

  • Filter Table

    A table you can filter. With some built in options.

    Project here on Telex.

    Column 1 ↕
    		Column 2 ↕
    		Column 3 ↕
    Something to sort Another thing —
    Hat A dog A cat
    123 A parrot Banana
    Prompt 
    Create a Gutenberg block for sortable, filterable data tables with spreadsheet-like editing. In the editor, provide a grid interface where users can add or remove rows and columns, set column headers and data types for text, number, date, currency, and percentage, drag to reorder columns and rows, import CSV data via paste or file upload, configure styling through sidebar panels for colors, borders, padding, alignment, and responsive behavior, and set display options like row striping, hover effects, row height, sticky headers, and pagination limits. Include toolbar buttons for quick row and column insertion and a column settings modal for individual column configuration. On the frontend, render an interactive table where clicking column headers toggles ascending or descending sort with visual arrows, Shift-click enables multi-column sorting, a global search box filters all data in real time, per-column filters appear as dropdowns or inputs, number and date ranges can be filtered, and pagination controls appear when enabled. Store all table data and settings as JSON in block attributes. Ensure keyboard accessibility, ARIA labels, and graceful degradation without JavaScript showing static data. Support mobile responsive modes with horizontal scroll or stacked layout.

  • Bar chart

    This creates bar charts with a simple animation and basic styling.

    A bar chart

    Item 1
    75
    Item 2
    50
    Item 3
    25

    Try telex project here.

    Prompt 
    Create a horizontal bar chart block that displays up to 10 data items with animated bars. In the editor, provide inline text inputs for chart title and label/value pairs with drag-and-drop reordering, add/remove buttons, and live preview. Include inspector controls with toggles for value display and scale visibility, animation duration slider, scale stagger controls, and auto/manual maximum value setting. Add styles panel with bar height and spacing dimension controls, color palette selector, and typography options in organized sections. Support three color modes: single color for all bars, automatic gradient spectrum, or individual custom colors per bar. Scale bars proportionally with the longest bar filling full container width. Display optional bottom scale with customizable increment markers. Animate bars growing from zero width with CSS staggered delays on page load. Frontend renders semantic horizontal bars with labels, conditional values, and scale markers. Include responsive mobile optimization, block alignment controls, ARIA accessibility labels, keyboard navigation support, and proper semantic HTML structure for screen readers.

  • Checklist

    A simple checklist block with a template option to save for reuse.

    Try the Telex project here.

    0 / 2 (0%)
    • Create a block a day for entire of October
    • Have a cup of tea

  • Blogroll

    Who doesn’t love a good old RSS blogroll? Well now this can be a block with a way to configure RSS feeds. Some simple formatting options including styling, grid, list and compact layout. Options to configure how many posts and what shows.

    Try the Telex project here.

    The Repository
    Core Program – WordPress.org
    Prompt 
    Create a WordPress block that displays a curated list of blogs with their latest posts pulled automatically via RSS feeds. In the editor, users add RSS feed URLs through a clean interface with options to set display format (list, grid, or compact), number of entries, and styling preferences. The block validates feeds on input and shows a preview of how the blogroll will appear. On the frontend, the block displays each blog's name, favicon, latest post title, publication date, and optional excerpt in the chosen layout. Posts automatically refresh every few hours via WordPress cron. Include hover effects on entries, with blog names linking to homepages and post titles linking to articles. Support responsive design with mobile-friendly layouts. Add settings for post age limits, excerpt length, and date format. Handle broken feeds gracefully by showing cached content with error indicators. Provide preset styles including classic sidebar list, modern card grid, and minimal text-only layouts. Include OPML import/export functionality for easy blogroll management.

  • Record album

    An image style to make your image into a blue note inspired album cover. Simple color variations.

    AN ALBUM
    An artist
    AN ALBUM
    WP 6.9WordPress

    Telex project can be found here.

    Prompt 
    Create a WordPress block that transforms uploaded images into authentic Blue Note Records album covers from the 1950s-60s era. In the editor, users upload an image and customize text fields for artist name, album title, and catalog number. The block applies automatic duotone filtering, adds vintage cardboard texture, and positions modernist typography in the classic Blue Note layout style.

Frontend displays a square format album sleeve with high contrast duotone treatment, dramatic shadows, and film grain texture. Include Reid Miles-inspired geometric text placement using Helvetica-style fonts, optional vinyl record edge peeking out, and subtle aging effects like corner wear and creases.

Provide color scheme presets including Classic Blue duotone, black and white noir, and teal cream combinations. Add customization controls for text positioning, aging intensity, record label details, and protective sleeve sheen effects.

Include hover interactions to reveal back cover with track listings and responsive sizing options from thumbnail to hero display. Output maintains authentic 12-inch LP proportions with proper typography hierarchy and generous negative space characteristic of iconic Blue Note album artwork.

  • Polaroid

    Make an image into a polaroid with optional rotation.

    Telex project here.

    A caption can also go here

    Prompt 
    Here's a prompt for creating a Polaroid block:

Create a WordPress Gutenberg block called "Polaroid Frame" that adds vintage polaroid-style frames around images. The block should include: Core Features:

Image uploader that accepts standard image formats (JPG, PNG, WebP, GIF) 6 distinct polaroid frame styles to choose from:

Classic White - Traditional white border, slightly thicker bottom margin, subtle shadow Vintage Cream - Off-white/cream colored frame with aged paper texture, soft edges Black Edge - White frame with thin black outer border, modern minimalist look Retro Rainbow - White frame with subtle rainbow gradient edge effect Worn & Torn - White frame with rough, slightly torn edges and coffee stain marks Double Frame - Nested frame effect with thin inner border and wider outer frame

Customization Options:

Frame style selector (dropdown or visual picker with thumbnails) Optional caption text field that appears below image in handwritten-style font Rotation angle slider (-15° to +15°) for tilted effect Shadow intensity control (none, subtle, medium, dramatic) Image size options (small, medium, large, full width)

Design Requirements:

Frames should have realistic proportions (thicker bottom margin like real polaroids) Subtle CSS transforms for depth and realism Responsive design that scales properly on mobile Maintain image aspect ratio within frame Smooth hover effects (optional slight lift/scale animation)

Block Settings Panel:

Frame style selector Rotation control Shadow settings Caption toggle and text input Alignment options (left, center, right)

The block should be lightweight, use CSS for styling (no external dependencies), and work seamlessly with WordPress's block editor.

  • Pause

    An animation that can be used within text or a page to create a moment to pause. With a range of styles, sit back and take a moment to reflect.

    “Rushing into action, you fail.
    Trying to grasp things, you lose them.
    Forcing a project to completion,
    you ruin what was almost ripe.

    Therefore the Master takes action
    by letting things take their course.
    He remains as calm at the end
    as at the beginning.
    He has nothing,
    thus has nothing to lose.
    What he desires is non-desire;
    what he learns is to unlearn.
    He simply reminds people
    of who they have always been.
    He cares about nothing but the Tao.
    Thus he can care for all things.”
    ― Lao Tzu, Tao Te Ching

    Telex project here.

    Prompt 
    Create a WordPress Gutenberg block that provides calming visual breaks in long-form content through extremely subtle animations lasting 45-90 seconds each. In the editor, display a placeholder with selected animation preview and customization controls. On the frontend, show chosen animation with optional centered text like "Pause" or "Breathe".

Include six animation types: gentle gradient flows between pastel colors, slow organic shape morphing, breathing circles that expand and contract, floating particles drifting slowly, color waves moving across the block, and ambient light shifts between complementary colors.

Provide height options of 200px, 400px, 600px, or full viewport. Include preset color palettes for Ocean, Sunset, Forest, Lavender, and Neutral themes with custom color picker option. Allow animation duration controls from slow to glacial speeds.

Automatically detect and respect prefers-reduced-motion settings by displaying completely static versions with subtle gradients instead of animations. Include ARIA labels for screen readers and ensure no focus trapping or keyboard navigation interference.

Use only CSS animations and vanilla JavaScript for performance. Pause animations when blocks leave viewport to conserve resources. Make all animations GPU-accelerated and ensure zero flashing or rapid changes for seizure safety.

  • Sketch image

    A block that takes a photo and makes it into a sketch. With a few simple styling adjustment options.

    Doodle drawing conversion

    Try now in Telex.

    Prompt 
    Doodle Drawing Converter Overview: Create a WordPress Gutenberg block that converts any uploaded photo into a simple doodle-style line drawing. Uses edge detection algorithms (like Canny edge detection via OpenCV.js or similar lightweight alternatives) to process images entirely client-side with no API costs. Core Functionality: Image to Doodle Conversion:

User uploads any photo or selects from media library Automatic conversion to black and white line drawing style Creates sketch/doodle aesthetic similar to hand-drawn artwork All processing happens in browser using edge detection algorithms

Style Controls:

Line thickness slider (thin to bold lines) Detail level adjustment (simple sketch to detailed drawing) Line darkness/intensity control Optional sketch texture overlay for authentic hand-drawn feel Color options: classic black on white, white on black, or custom color selection

Simple Workflow: Upload image → automatic doodle conversion → adjust style preferences → preview result → save/download Technical Approach: Libraries to Consider:

OpenCV.js (Canny edge detection algorithm - open source, BSD license) Canvas API for image manipulation Simple JavaScript image filters Sobel operator for edge detection (can be implemented simply without heavy library)

Processing Steps:

Convert image to grayscale Apply edge detection algorithm to find outlines Enhance and clean up lines Apply stylistic filters for doodle effect Render on canvas as line drawing

User Interface: Editor Controls:

Image upload/selection area Before/After preview toggle Style preset buttons: "Simple Sketch", "Detailed Drawing", "Comic Style", "Minimalist" Fine-tune sliders for custom adjustments Download processed image button Save to media library option

Block Settings Panel:

Algorithm selection (if multiple available) Edge detection sensitivity Line smoothing options Background color picker Line color picker Export quality settings

WordPress Plugin Directory Compliance: Requirements:

Bundle all JavaScript libraries with plugin (no CDN loading) Use open source libraries only (MIT, BSD, Apache licenses) GPL v2 or later compatible Follow WordPress coding standards All processing client-side for privacy No external API calls No tracking or data collection

Performance:

Lazy load processing library only when block is used Show processing indicator for large images Recommend maximum image size for best performance Optimize library file size (keep under 2-3MB if possible) Cache processed results

User Experience:

Simple one-click conversion with sensible defaults Advanced controls hidden in settings panel Clear before/after comparison Mobile responsive Fast processing (under 3 seconds for typical images) Helpful tooltips explaining each control

Error Handling:

Image format not supported messages File too large warnings Browser compatibility checks Graceful fallback if WebGL unavailable Clear error messages with solutions

Use Cases:

Convert photos to coloring book pages Create sketch-style featured images Generate line art for design projects Transform portraits into artistic drawings Create simple illustrations from photos Generate printable activity sheets

Accessibility:

Keyboard navigation for all controls Screen reader friendly labels Alt text preservation and updates High contrast mode support Focus indicators on interactive elements

Documentation:

Explain how edge detection works simply Show example before/after images List supported image formats Browser requirements Tips for best results (high contrast photos work better) Privacy statement (no uploads to external servers)

Optional Enhancements:

Multiple artistic styles (sketch, comic, watercolor outline, crosshatch) Batch processing for multiple images Animation effect showing conversion process Social sharing with preview Download options (PNG, SVG if possible, PDF)

Success Criteria:

Works with common image formats (JPG, PNG, WebP) Processing completes quickly (2-5 seconds) Produces clean, recognizable line drawings Easy to use with good defaults No ongoing costs or API dependencies Plugin directory approved Lightweight and performant

This block transforms photos into simple doodle-style line art completely free using browser-based image processing algorithms.

  • Ripple Text

    Various ripple animations over text. A variety of options shown here in the same text block.

    Picture a wave. In the ocean.
    Picture a wave. In the ocean.
    Picture a wave. In the ocean.

    Telex project to try here.

    Prompt 
    Create a WordPress text block that applies animated ripple effects to paragraphs and headings. Users type text normally, then select from six animation styles: Wave (characters bob up/down), Fade (sequential transparency), Scale (characters grow into place), Color (gradient waves), Blur (focus ripple), and Rotate (spinning into position).

Include trigger options: page load, scroll into view, hover, continuous loop, or click. Add ripple patterns: left-to-right, center outward, multiple origin points, or right-to-left. Provide speed, delay, intensity, and duration controls via sliders.

In the editor, show live animation preview with pause button. On frontend, text animates according to selected trigger and style. Automatically disable animations for users with reduced motion preferences. Include manual pause controls for accessibility.

Maintain all native WordPress text features: typography, colors, alignment, formatting, and responsive settings. Ensure text remains readable throughout animations and works with screen readers.

Use CSS transforms for performance. Support both classic and block themes. Default to wave ripple triggered on scroll with medium settings and full accessibility compliance.