Blocks Overview

Gutenberg Blocks

WBcom Essential includes 45 ready-to-use blocks for the WordPress block editor. No coding required - just drag, drop, and customize!

Block Categories

CategoryBlocksBest ForHeader Blocks4Site navigation and brandingDesign Blocks12Visual elements and layoutsContent Blocks8Text, tabs, and interactive contentBlog Blocks6Displaying your postsMarketing Blocks4Conversions and salesBuddyPress Blocks11Community featuresWooCommerce Blocks2Online store features

How to Find Blocks

Edit any page in WordPress Click the + button to add a block Search for “Starter Pack” or the block name Drag the block onto your page

Settings Every Block Has

Theme Colors Toggle

Location: Block Settings > Color Settings > Use Theme Colors

When enabled, your blocks automatically match your theme’s colors. Change your theme colors once, and all blocks update automatically!

Example: CTA Box block with settings panel visible

Spacing Controls

Margin: Space outside the block Padding: Space inside the block

Responsive Preview

Click the device icons in the editor toolbar to preview how your blocks look on desktop, tablet, and mobile.

Quick Tips

Enable Theme Colors - Keeps your site looking consistent Preview on mobile - Always check mobile view before publishing Use categories - Find blocks faster by browsing categories Copy blocks - Right-click any block to duplicate it

Browse by Category

Header Blocks - Branding, navigation, user menus Design Blocks - Counters, sliders, icons, shapes Content Blocks - Accordions, tabs, timelines Blog Blocks - Post carousels, sliders, tickers Marketing Blocks - Pricing, CTAs, testimonials BuddyPress Blocks - Members, groups, forums WooCommerce Blocks - Products, cart

Block Screenshots

All block screenshots are available in docs/images/blocks/. Each screenshot shows the block in the WordPress editor with its settings panel visible.

Header Blocks

BlockScreenshotBrandingbranding-block-editor.pngDropdown Buttondropdown-button-block-editor.pngLogin Formlogin-form-block-editor.pngSite Logosite-logo-block-editor.pngSmart Menusmart-menu-block-editor.png

Design Blocks

BlockScreenshotCountercounter-block-editor.pngDividerdivider-block-editor.pngFlip Boxflip-box-block-editor.pngHeadingheading-block-editor.pngIcon Boxicon-box-block-editor.pngShapeshape-block-editor.pngSliderslider-block-editor.pngSocial Iconssocial-icons-block-editor.pngStar Ratingstar-rating-block-editor.pngText Rotatortext-rotator-block-editor.png

Content Blocks

BlockScreenshotAccordionaccordion-block-editor.pngAdvanced Tabsadvanced-tabs-block-editor.pngTimelinetimeline-block-editor.png

Blog Blocks

BlockScreenshotPortfolio Gridportfolio-grid-block-editor.pngPost Carouselpost-carousel-block-editor.pngPost Sliderpost-slider-block-editor.pngPost Timelinepost-timeline-block-editor.pngPosts Carouselposts-carousel-block-editor.pngPosts Revolutionposts-revolution-block.pngPosts Tickerposts-ticker-block.png

Marketing Blocks

BlockScreenshotCountdowncountdown-block-editor.pngCTA Boxcta-box-block-editor.pngPricing Tablepricing-table-block.pngProgress Barprogress-bar-block.pngTeam Carouselteam-carousel-block.pngTestimonialtestimonial-block.pngTestimonial Carouseltestimonial-carousel-block.png

BuddyPress Blocks

BlockScreenshotDashboard Introdashboard-intro-block.pngForumsforums-block.pngForums Activityforums-activity-block.pngGroup Carouselgroup-carousel-block.pngGroups Gridgroups-grid-block.pngGroups Listsgroups-lists-block.pngHeader Barheader-bar-block.pngMembers Carouselmembers-carousel-block.pngMembers Gridmembers-grid-block.pngMembers Listsmembers-lists-block.pngProfile Completionprofile-completion-block.png

WooCommerce Blocks

BlockScreenshotProduct Gridproduct-grid-block.pngMini Cartmini-cart-block.png