Marketing · Gutenberg
Problem / Solution block for WordPress
Side-by-side problem vs solution section — two contrast columns each with icon, title, and feature lists. A classic landing page persuasion block.
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
Side-by-side problem vs solution section — two contrast columns each with icon, title, and feature lists. A classic landing page persuasion block.
Inspector panels on this block: Problem column, Solution column. Those titles come from index.js, not from a shared template.
Behavior controls: “Visual style” options: Split (full-color columns), Cards (white bg + border), Bordered (outline only), Minimal (subtle tint).
Problem / Solution 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 “Problem / Solution” (block name `blockenberg/problem-solution` in block.json). Style it in the sidebar after insert.
How to use Problem / Solution block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Problem / Solution”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Problem column. Set “Visual style”, “Show column labels”, “Show "vs" divider”, “Divider label”.
- 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 |
|---|---|
| Visual style | Select control; the chosen value is saved on the block. Options: Split (full-color columns); Cards (white bg + border); Bordered (outline only); Minimal (subtle tint). block.json default: split. Saved as `style`. |
| Show column labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Show "vs" divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Divider label | Text field in the inspector. block.json default: vs. Saved as `dividerLabel`. |
| Rotate divider text vertically | On/off toggle in the inspector. Off by default. Saved as `dividerVertical`. |
| Rotate divider on mobile only | On/off toggle in the inspector. On by default. Saved as `dividerMobileRotate`. |
| Label text | Text field in the inspector. block.json default: The Problem. Saved as `problemLabel`. |
| Label text (Solution Label) | Text field in the inspector. block.json default: The Solution. Saved as `solutionLabel`. |
| Column gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Column padding V (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `paddingV`. |
| Column padding H (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `paddingH`. |
| Item spacing (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `itemSpacing`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `borderRadius`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Item | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `itemTypo`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Icon size (px) | Numeric range control in the inspector. Range 20–80. block.json default: 40. Saved as `iconSize`. |
| Problem bg | Color control in the inspector. block.json default: #fff1f2. Saved as `problemBg`. |
| Problem text | Color control in the inspector. block.json default: #9f1239. Saved as `problemColor`. |
| Problem icon bg | Color control in the inspector. block.json default: #fecdd3. Saved as `problemIconBg`. |
| Solution bg | Color control in the inspector. block.json default: #f0fdf4. Saved as `solutionBg`. |
| Solution text | Color control in the inspector. block.json default: #14532d. Saved as `solutionColor`. |
| Solution icon bg | Color control in the inspector. block.json default: #bbf7d0. Saved as `solutionIconBg`. |
| Divider bg | Color control in the inspector. block.json default: #ffffff. Saved as `dividerBg`. |
| Divider text | Color control in the inspector. block.json default: #334155. Saved as `dividerTextColor`. |
When this is the right block
- Side-by-side problem vs solution section — two contrast columns each with icon, title, and feature lists. A classic landing page persuasion block — that is the job of Problem / Solution, not a generic content block.
- Use it when you need the editor control labeled “Visual style”, which exists on this block’s inspector.
- It matches pages about problem, solution, comparison.
- 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 Problem / Solution block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Problem / Solution”. It sits under Marketing. After insert, open Problem column and set “Visual style”, “Show column labels”, “Show "vs" divider”, “Divider label”.
What makes Problem / Solution different from other Blockenberg blocks?
Side-by-side problem vs solution section — two contrast columns each with icon, title, and feature lists. A classic landing page persuasion block. Inspector labels on this block include “Visual style”, “Show column labels”, “Show "vs" divider”, “Divider label”.
Is the Problem / Solution Gutenberg block free?
Yes. Problem / Solution ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Problem / Solution 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: Problem column, Solution column).
Related marketing blocks
Comparison Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Comparison Section
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Problem / Solution from the Gutenberg inserter.