Gutenberg Blocks¶

MindfulMedia provides 4 Gutenberg blocks for the WordPress block editor.

Finding the Blocks¶

Edit a page with Gutenberg
Click + to add a block
Search for "MindfulMedia" or "mindful"
Select from available blocks

All blocks appear under the MindfulMedia category.

Available Blocks¶

Block	Purpose
MindfulMedia Browse	Full browse page layout
MindfulMedia Archive	Media grid with filters
MindfulMedia Embed	Single media or playlist
MindfulMedia Category Row	Horizontal slider

MindfulMedia Browse¶

Creates a full browse experience with navigation tabs and category sections.

Block Settings¶

Setting	Options
Show Featured	Yes / No
Show Navigation	Yes / No
Sections	Multi-select: Teachers, Topics, Playlists, Categories

Usage¶

Best for:

Media landing page
Browse page
Main media hub

Equivalent Shortcode¶

[mindful_media_browse]

MindfulMedia Archive¶

Displays a filterable grid of media items.

Block Settings¶

Setting	Options
Items Per Page	Number input
Show Filters	Yes / No
Show Pagination	Yes / No
Category Filter	Dropdown selection
Topic Filter	Dropdown selection
Teacher Filter	Dropdown selection
Media Type	All / Audio / Video
Featured Only	Yes / No

Usage¶

Best for:

Media archive page
Category-specific pages
Search results page

Equivalent Shortcode¶

[mindful_media_archive per_page="12" topic="meditation"]

MindfulMedia Embed¶

Embeds a single media item or playlist.

Block Settings¶

Setting	Options
Source	Media Item / Playlist
Media Item	Dropdown or ID input
Playlist	Dropdown selection
Size	Small / Medium / Large / Full Width
Autoplay	Yes / No

Size Options¶

Size	Width
Small	320px
Medium	560px
Large	800px
Full Width	100%

Usage¶

Best for:

Embedding specific videos in posts
Course landing pages
Featured content sections

Equivalent Shortcode¶

[mindful_media id="123" size="large"]
[mindful_media playlist="beginner-course"]

MindfulMedia Category Row¶

Displays a Netflix-style horizontal slider of taxonomy terms.

Block Settings¶

Setting	Options
Taxonomy	Teachers / Topics / Categories / Playlists
Title	Custom text (optional)
Items to Show	Number input
Show "View All" Link	Yes / No

Usage¶

Best for:

Homepage sections
Category highlights
Featured teachers/topics

Equivalent Shortcode¶

[mindful_media_row taxonomy="media_topic" title="Browse by Topic"]

Block Tips¶

Server-Side Rendering¶

All MindfulMedia blocks use server-side rendering:

Preview in editor shows actual content
Styling matches frontend exactly
Changes reflect immediately on save

Combining Blocks¶

Create rich layouts by combining blocks:

[Hero Section with Embed Block - Full Width]

[Category Row - Featured Teachers]

[Archive Block - Latest Videos]

[Category Row - Popular Topics]

Column Layouts¶

Embed blocks work great in columns:

Add a Columns block
Add MindfulMedia Embed to each column
Set appropriate sizes

Full Width Pages¶

For best results:

Use a full-width page template
Or use a page builder with sections
Remove sidebar for media pages

Styling Blocks¶

Block Spacing¶

Add custom spacing using the Spacer block or block settings.

Background Colors¶

Wrap in a Group block to add backgrounds:

Add Group block
Set background color
Add MindfulMedia block inside

Custom CSS¶

Target blocks with:

/* All MindfulMedia blocks */
.wp-block-mindful-media {
    /* Your styles */
}

/* Specific blocks */
.wp-block-mindful-media-browse {
    /* Browse block styles */
}

.wp-block-mindful-media-archive {
    /* Archive block styles */
}

Troubleshooting¶

Block Not Appearing¶

Clear browser cache
Deactivate/reactivate plugin
Check for JavaScript errors

Preview Not Loading¶

Check AJAX is working
Verify no PHP errors
Clear plugin transients

Styling Issues¶

Check theme compatibility
Try with default theme
Inspect for CSS conflicts