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.

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.

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.

Create a WordPress block that adds watermarks to images. In the editor, display the base image with watermark preview overlay. Provide inspector controls with three panels: Image panel with MediaUpload for selecting base image, Watermark panel with toggle between uploaded custom watermark or 6 preset line icons displayed in a grid, and Position panel with AlignmentMatrixControl for 9-position placement plus RangeControl for 0-100% transparency. Include Styles tab with watermark size controls, padding options, and color overlay settings. Store baseImageUrl, baseImageId, watermarkType, watermarkImageUrl, watermarkImageId, selectedPreset, position, and opacity as attributes. On frontend, render semantic figure/img HTML with watermark positioned as overlay using CSS flexbox. Apply opacity via inline styles. Include alt text fields for both images. Ensure responsive design maintains aspect ratios. Use block.json schema with native WordPress components and include 6 simple black SVG icon presets.

Create an interactive WordPress block for logos that grow larger with each click and explode on the third click. In the editor, users upload an image via media library, configure growth settings, explosion effects, and styling options through the block sidebar. The block displays the uploaded image with visual indicators that it's clickable.

On the frontend, visitors click the logo three times in sequence. First click scales it 1.5x larger, second click scales to 2.5x, third click triggers an explosion animation with particles before resetting to original size. The cycle repeats infinitely.

Include controls for image settings, alt text, scale increments per click, explosion styles including burst, confetti, spin-out, and shatter effects. Add particle count, animation speed, and color options for explosions. Provide visual feedback with optional click counters, hover effects, and progress indicators.

Ensure keyboard accessibility with spacebar activation, screen reader announcements, and respect for reduced motion preferences. Use CSS transforms for smooth 60fps animations and cleanup particles after explosions. Make touch targets minimum 44px for mobile with optimized particle counts for performance.