Gutenberg Blocks Guide
A Gutenberg block is one unit of content in the WordPress editor, such as a paragraph, heading, image or button, saved as HTML between block comment markers. Add one with the plus inserter or by typing a slash and its name, arrange blocks in List View, and save repeated layouts as synced or unsynced patterns.
For WordPress beginners and small-business owners building pages in the block editor without a page-builder plugin.
knowledge
- Read time
- 4 min
- Sections
- 6
- Updated
- 14 Nov 2026
- Written by
- WebJi® team
Last editorial update: 14 November 2026.
What is a Gutenberg block in WordPress?
A Gutenberg block is one self-contained unit of content in the WordPress editor, such as a paragraph, heading, image, list or button, with its own toolbar and settings. WordPress has used the block editor for posts and pages since version 5.0, and "Gutenberg" remains the common name for it.
Behind the scenes each block is saved as normal HTML wrapped in comment markers, which is how WordPress knows where one block ends and the next begins:
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Our services</h2>
<!-- /wp:heading -->Because the output is plain HTML, the page still renders if a block plugin is later removed; you lose only that block's editing controls. Core blocks need nothing more than a current WordPress install, which any WordPress hosting plan provides.
How do you add a block in the Gutenberg editor?
Click the plus (+) inserter at the top left or inside an empty block, or type a slash followed by the block name, such as /image, and press Enter. The new block appears where your cursor is.
- Open Pages → Add New (or edit an existing page) and type the title.
- Press Enter to get an empty paragraph block below the title.
- Type
/heading,/image,/buttonsor/columnsand press Enter. - Fill the block; its toolbar sits above it and its options appear in the sidebar's Block tab.
- Press Preview, then publish and check the live URL in a private window.
If the editor shows a single large text box with no plus button, the Classic Editor plugin is active. Deactivate it under Plugins to get the block editor back.
Which core Gutenberg blocks should you know first?
About a dozen core blocks cover most business pages: Paragraph, Heading, List, Image, Gallery, Cover, Columns, Group, Buttons, Table, Embed and Custom HTML. They are grouped in the inserter by purpose.
| Category | Blocks | Typical use |
|---|---|---|
| Text | Paragraph, Heading, List, Quote, Table, Details | Copy, FAQs, pricing tables |
| Media | Image, Gallery, Cover, Video, File | Product photos, hero banners, PDF brochures |
| Design | Columns, Group, Row, Stack, Buttons, Spacer | Layout and calls to action |
| Widgets | Shortcode, Custom HTML, Social Icons | Forms from plugins, embed codes |
| Embeds | YouTube, X, Instagram and others | Paste a URL on its own line |
| Theme | Navigation, Site Logo, Query Loop, Post Content | Templates in the Site Editor, not inside a single post |
The Details block gives a collapsible question-and-answer pair without a plugin, useful for FAQ sections. Tables have their own quirks on mobile, covered in the Gutenberg table block guide.
How do you move, group and style blocks?
Drag a block by its handle or use the up and down arrows in its toolbar to move it; select several blocks and choose Group to style them as one unit. List View shows the whole page as a tree, which makes nested blocks easy to select.
- List View (Shift+Alt+O): select any block, including ones hidden inside columns.
- Duplicate (Ctrl+Shift+D): copy the selected block directly below.
- Group, Row, Stack: wrap blocks to add a background, padding or a horizontal layout.
- Styles: colour, typography and spacing sit in the Block tab; if a control is missing, the theme has disabled it.
- All shortcuts (Shift+Alt+H): shows the full list for your version.
On a Mac, use Cmd in place of Ctrl and Option in place of Alt. Sidebars built from old widgets work differently; widgets vs blocks explains the change.
How do you save and reuse block patterns?
Select the blocks, open the three-dot menu, choose Create pattern, name it and decide whether it is synced. A synced pattern updates everywhere it is used; an unsynced pattern is a starting copy you edit per page.
| Type | Editing behaviour | Good for |
|---|---|---|
| Synced pattern | One master copy; edit once, every page changes | Contact strip, offer banner, disclaimer |
| Unsynced pattern | Inserted as a copy; later edits stay on that page | Service-page layout, case-study template |
WordPress called synced patterns "reusable blocks" until version 6.3. Existing reusable blocks appear under Patterns after updating, so nothing is lost.
How do you fix common Gutenberg block problems?
Most block problems are an "unexpected or invalid content" warning, a missing style control, or a change that does not appear on the live page. Each has a quick check.
- "This block contains unexpected or invalid content": the saved HTML no longer matches the block's expected markup, often after manual HTML edits or a plugin update. Use Attempt recovery, or convert it to Custom HTML to keep the content.
- Code view: Ctrl+Shift+Alt+M switches to the code editor, where you can see the block comments and fix stray markup.
- Header or footer will not change: on a block theme edit them in Appearance → Editor; on a classic theme they live in the Customizer or theme files.
- Live page still old: purge the page cache and check in a private window; clearing the WordPress cache lists the usual places.
If the editor itself fails to load on a WebJi®-hosted site, email support@webji.services with the page URL; the team answers 24/7 in Hindi and English.
Frequently asked questions
Is Gutenberg good enough, or do I need Elementor?
Core blocks with a modern block theme handle most business pages, and they produce lighter HTML than most page builders. A builder helps when you need complex designs without code, at the cost of extra scripts and a dependency on that plugin.
Can I convert an old Classic Editor post to blocks?
Yes. Open the post, select the Classic block that holds the old content, and choose Convert to blocks from its toolbar. WordPress splits it into paragraphs, headings, images and lists. Check tables and shortcodes afterwards, since they may need tidying.
Do Gutenberg blocks slow a site down?
Core blocks add very little, and recent WordPress versions load block CSS only for blocks used on the page. Slowness usually comes from large images, heavy third-party block libraries or too many plugins, not from the editor itself.
Can I copy blocks from one WordPress site to another?
Yes. Select the blocks, copy them, and paste into the editor on the other site; the block markup travels with the clipboard. Images still point to the old site's URLs, so re-upload them on the new site.
Menus and shortcuts checked against WordPress 6.x documentation · Reviewed by the WebJi® team, Jaipur.
Ready to get started with WebJi®?
Join 12,000+ businesses across India and overseas. INR pricing, 18% GST shown before payment and 24/7 email support in Hindi and English — average first reply under 60 minutes.