Marketing · Gutenberg
Logo Grid block for WordPress
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts.
Inspector panels on this block: Logos, Label & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Label position” options: Top, Left (inline); “Layout” options: Flex row (wrap), Fixed grid.
Logo Grid has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Marketing → search “Logo Grid” (block name `blockenberg/logo-grid` in block.json). Style it in the sidebar after insert.
How to use Logo Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Logo Grid”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Logos. Set “Company name”, “Show label”, “Label text”, “Label position”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Company name | Text field in the inspector. |
| Show label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label text | Text field in the inspector. block.json default: Trusted by leading companies. Saved as `label`. |
| Label position | Select control; the chosen value is saved on the block. Options: Top; Left (inline). block.json default: top. Saved as `labelPosition`. |
| Layout | Select control; the chosen value is saved on the block. Options: Flex row (wrap); Fixed grid. block.json default: flex-row. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 2–10. block.json default: 6. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `gap`. |
| Logo height (px) | Numeric range control in the inspector. Range 20–80. block.json default: 36. Saved as `logoHeight`. |
| Box padding (px) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `logoPadding`. |
| Box radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `logoRadius`. |
| Show box background | On/off toggle in the inspector. On by default. Saved as `showBox`. |
| Grayscale logos | On/off toggle in the inspector. On by default. Saved as `grayscale`. |
| Color on hover | On/off toggle in the inspector. On by default. Saved as `hoverColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingBottom`. |
| Section bg | Color control in the inspector. Saved as `sectionBg`. |
| Label color | Color control in the inspector. block.json default: #94a3b8. Saved as `labelColor`. |
| Logo box bg | Color control in the inspector. block.json default: #f8fafc. Saved as `logoBg`. |
| Logo box border | Color control in the inspector. block.json default: #e2e8f0. Saved as `logoBorder`. |
| Logo tint (grayscale text) | Color control in the inspector. block.json default: #94a3b8. Saved as `logoTint`. |
When this is the right block
- A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts — that is the job of Logo Grid, not a generic content block.
- Use it when you need the editor control labeled “Company name”, which exists on this block’s inspector.
- It matches pages about logos, partners, brands.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Logo Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Logo Grid”. It sits under Marketing. After insert, open Logos and set “Company name”, “Show label”, “Label text”, “Label position”.
What makes Logo Grid different from other Blockenberg blocks?
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts. Inspector labels on this block include “Company name”, “Show label”, “Label text”, “Label position”.
Is the Logo Grid Gutenberg block free?
Yes. Logo Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Logo Grid to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Logos, Label & Layout).
Related marketing blocks
Client Showcase
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
Logo Carousel
Show client/partner logos in a responsive carousel or grid.
Social Proof Bar
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
Social Proof Section
Complete social proof landing section combining client logos, stats, and a featured testimonial quote — all in one configurable block.
Split Testimonial
Hero-size featured testimonial with large pull-quote, author photo, name, title, company, star rating, and full accent/background controls.
Testimonial Featured
A single large featured testimonial section — big decorative quote mark, full testimonial text, person photo, name, title, company logo, star rating, and optional result metric badge. Designed as a standalone section for maximum impact. Different from testimonial carousels or grids.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Logo Grid from the Gutenberg inserter.