10 Gutenberg Tips for Professional WordPress Articles

Originally published on LumoWP.

You have written the article. The hard part should be over. Then WordPress asks you to choose a block, a heading level, a category, a tag, an image size and an excerpt—and suddenly publishing feels like a second job.

The answer is not to learn every button in Gutenberg. It is to learn a small publishing routine you can repeat. In this tutorial, we build a fictional website launch checklist and use it to practise ten habits that make an article easier to read, edit and maintain.

You will learn where tags belong, how to add images properly, how to structure headings, and how to check the finished page before making it public. Gutenberg is the name commonly used for WordPress's block editor; you do not need to install the separate experimental Gutenberg plugin to follow this guide. No page builder or coding is needed for the exercises.

About the screenshots

We worked through the examples in our permanent WordPress tutorial lab. The instructional images use real editor screenshots, cropped and annotated for clarity. Some panels were enlarged or rearranged in the graphics. Your WordPress version, theme, installed plugins and user permissions can change the available controls; the editing principles remain the same.

1. Learn the difference between Post settings and Block settings

Start by distinguishing the article canvas from whole-post settings.

Start in Posts → Add New Post, enter a working title and write a short introduction. Save a draft before experimenting. This gives you something real to work with instead of an empty canvas.

Click a paragraph. You are now working on that paragraph block. Click an image and the available controls change to image controls. The small toolbar near the selection belongs to the selected block; the toolbar at the top belongs to the editor.

The right sidebar has two important tabs:

• Post: settings for the entire article, such as its category, tags, featured image, excerpt and publishing status.
• Block: settings for the selected element, such as an image's alternative text, a table's header section or a heading's level and appearance.

If you cannot find a setting, check those tabs before installing another plugin. A missing image control often means the paragraph next to the image is selected. The Settings button in the top toolbar opens the sidebar if you have closed it.

Add blocks without searching through every menu

On a new empty line, type /image, /heading, /list or /table. Choose the matching block from the suggestions. The + inserter provides the same basic starting point if you prefer clicking. Block names may be translated on a non-English installation.

For our checklist, add an introduction followed by three sections: “Prepare the content,” “Check images and links,” and “Review before publishing.” Do not worry about colors yet. First make sure each piece of content has the right kind of block.

Check your work: click a paragraph, then an image. The Block sidebar should identify the element you selected. Switch back to Post to find article-wide settings.

2. Build a heading outline instead of making text look like headings

The Outline reveals heading hierarchy independently of text size.

A bold sentence in a large font can look like a heading while remaining an ordinary paragraph. That is an easy mistake to miss visually. Use a Heading block when the text introduces a section.

For a normal blog article whose template already outputs the post title as H1, use H2 for the main sections and H3 for a subsection inside an H2. Our example uses this structure:

• Post title: A Simple Website Launch Checklist
• H2: Prepare the content
• H3: Write a useful introduction
• H2: Check images and links
• H2: Review before publishing

Select the heading and choose the appropriate level. In our lab, the Block sidebar exposes H1–H6 choices; other versions expose the level in the block toolbar. If you already wrote the text in a Paragraph block, use its block-type control to transform it into a Heading.

Open Document Overview → Outline. Read only the headings. Could someone understand the route through your article without reading the paragraphs? If not, rewrite the headings before decorating them. “Step 2” says much less than “Choose the right image size.”

A useful test for heading mistakes

If a large, bold line is absent from the outline, check whether it is still a Paragraph block. If a minor detail appears at the same level as an entire section, change its level. Do not choose H4 simply because your theme makes H4 the size you like; structure and visual size are separate decisions.

The WordPress Heading block guide documents the block and its controls. The outline in our screenshot is the actual structure of the practice article, not a diagram of an imagined editor.

Check your work: the three main sections should be siblings in the outline, with “Write a useful introduction” nested under “Prepare the content.”

3. Use List View when the editor becomes difficult to navigate

List View exposes the document structure and the selected block.

After adding several images, paragraphs and a table, selecting the right element on the canvas becomes less obvious. This is where Document Overview → List View earns its place in your routine.

Outline shows your headings. List View shows the block structure—including paragraphs, images, lists and groups. In our example, selecting a Paragraph row highlighted that specific paragraph on the canvas. There was no need to guess which empty area to click.

Try moving “Review before publishing” together with its table and final note. Select the relevant blocks in List View, then use the available move controls or drag the selection to the intended position. Check the result before continuing: moving only a heading leaves its explanation behind.

For a single selected block, the up/down arrows in its toolbar are an alternative to dragging. Its options menu also provides actions such as Duplicate and Delete. If you duplicate an image-and-caption section, remember to replace both the image and its description.

Fix spacing at the source

A large blank gap is not always a margin problem. Open List View and look for empty Paragraph or Spacer blocks. Remove accidental ones from your draft. If two sections still need more breathing room, use the spacing controls your theme provides rather than pressing Enter five times.

Pressing Enter normally starts another paragraph. Shift+Enter inserts a line break within the current paragraph. Use the latter when the lines belong together, such as a short address—not to manufacture a new section.

Check your work: after reordering, read the article from the beginning. Every heading should still be followed by its own explanation, not the explanation from the previous section. The official List View guide covers additional selection and navigation options.

4. Use categories and tags to organize articles, not to repeat keywords

The practice post has an intentional category and one specific topic tag.

“Tag” can mean several different things in a publishing conversation. A WordPress post tag is not an H2 tag, an image description or the focus keyword field in an SEO plugin.

For the practice article, we chose Website guides as the category and Website launch as the tag. That is a deliberate editorial choice: the category is a broad shelf; the tag is a more specific topic that could connect several articles on that shelf.

Open Settings → Post → Categories. Select an existing suitable category. If you have permission and a genuinely new category is needed, use Add Category. In our lab, the post initially belonged to Uncategorized, so we selected Website guides and cleared Uncategorized.

Then open Tags, type a relevant term and press Enter or choose an existing suggestion. The field also supports separating tags with commas. Save the draft and check the selected terms again.

WordPress categories can have a parent/child hierarchy. Tags do not. Both can connect visitors to archive pages containing related posts. See WordPress's category documentation and tag documentation.

A practical rule for deciding whether a tag deserves to exist

Ask: Would I send a reader to this topic archive? If the answer is no, the tag probably has no useful job yet. “Website launch,” “launching websites,” and “website launch tips” do not automatically need three separate archives.

There is no target number of tags to fill. It is fine to use none when your categories already organize the material well. Adding twenty phrases is not an SEO improvement by itself. Also, do not remove existing site-wide categories casually: that can change archives and navigation beyond this article.

Check your work: your selected category describes the article's home on the site. Any tags describe useful reusable topics, not every phrase mentioned in the text.

5. Add images with the right size, alternative text and caption

Check alternative text on the image block you are publishing.

Put the cursor where the image should appear, create an Image block, then choose Upload or Media Library. Upload is for a new file; Media Library reuses a file already on your site. In our lab, we inserted an actual screenshot of the checklist editor.

Prepare the image before uploading it. Crop out irrelevant material, make important controls readable, and export at dimensions appropriate to the article. Shrinking a very large image visually is not the same as reducing the file readers download. WordPress may generate and select different image sizes, so inspect the finished page as well as the editor.

Write alternative text for this use of the image

Select the Image block and find Alternative text in its Block settings. Our captured interface places it under Content. Other versions show it in the main image settings.

Our example reads: “Website launch checklist with headings in the WordPress block editor.” It explains what the screenshot contributes without copying the entire article or stuffing in search phrases.

If the image carries an instruction that the reader needs, explain that instruction in the surrounding text too. A screenshot should support the tutorial, not be the only place an essential setting is readable. For a purely decorative image that adds no information, empty alt text is appropriate; our version also provides a Mark as decorative control.

Do not assume that changing an image's alternative text in the Media Library will update every previously inserted copy. Check the Image block you are actually publishing. Its saved content can contain its own alt attribute. That distinction is visible in WordPress's core/image block definition, where alternative text is read from the image element's alt attribute.

Use captions for context readers should see

Choose Add caption in the image toolbar when a visible explanation is useful. A caption can say which step the screenshot shows or identify a source. It has a different job from alternative text, and it does not need to repeat it word for word.

For several related photos, consider a Gallery block. For a step-by-step tutorial, separate Image blocks often make it easier to place each screenshot beside the instruction it explains. The WordPress Image block reference covers the available image controls.

Check your work: inspect the actual article preview. Is the image sharp enough to read, appropriately sized, correctly captioned and relevant to the paragraph next to it? You can prepare lighter files with our image compression tool, then still check the resulting quality.

6. Set the featured image, excerpt and slug intentionally

A cover, a summary and a URL serve different purposes.

An image inside the article does not automatically become its featured image. The featured image is separate post information that your theme may use on archive cards, at the top of the article or elsewhere.

In Post settings, choose Set featured image, select a suitable file and confirm the selection. Our lab uses the checklist screenshot so the example is easy to identify. For a real editorial cover, choose a crop that remains understandable when the theme displays it as a small card.

Use Add an excerpt or Edit excerpt to write a short description of what the reader will get. Our example is: “A practical pre-launch checklist for reviewing your website content, images, links and mobile layout.” It is more useful than a sentence that stops halfway through the introduction.

Next, review the Slug or link setting. Give a new post a clear, stable URL before publication. For this example, a slug such as website-launch-checklist would be easier to maintain than a title full of dates and promotional words. Do not change an established published URL just to make it shorter without considering redirects and existing links.

Check where your theme actually uses these fields

Preview the individual article and, when possible, the blog/archive card. A theme can display the featured image automatically, so inserting the same cover as the first body image may show it twice. A theme may also ignore manual excerpts in a particular layout.

An excerpt is not automatically the same as an SEO meta description or a social sharing description. If your SEO plugin provides those fields, review them separately. The Post settings documentation explains where WordPress keeps these article-wide controls.

Check your work: the article has one intentional cover, a useful summary and a stable URL. The card and full article both make sense.

7. Add useful links and make long articles easy to jump through

Enter the anchor without a hash; use the hash in the link destination.

Select the words a reader should click, choose the Link icon in the block toolbar, and paste the destination URL or search for a relevant existing post. Confirm the link. Selecting only the meaningful words is better than linking an entire paragraph.

For our checklist, “WordPress image guide” tells the reader what the destination contains. “Click here” gives much less context. After saving, test the link in the front-end preview rather than assuming a blue underline proves the address is correct.

If you use the keyboard shortcut, place the cursor in the editable text and select the words first. Shortcut behavior depends on focus: in our test, Ctrl+K outside text editing opened the command palette. The visible Link button avoids that ambiguity.

For links within your own article, add an anchor to the destination heading:

• Select the heading “Check images and links.”
• Open Block → Advanced → HTML anchor.
• Enter images-and-links, without a leading hash or spaces.
• Select the text that should jump there and give it the link #images-and-links.

The anchor must be unique within the page. Keep it stable after publication so saved links continue to work. A heading's wording can change without requiring its anchor to change. The WordPress page-jump instructions explain this mechanism.

Keep the navigation useful

For a long article, a short list of section links near the beginning can be enough. You do not need a separate plugin for a manually maintained contents list. If you use an automatic contents block from a plugin, check that it follows the headings you actually want to expose.

Internal links should answer a likely next question, not decorate every paragraph. Our practical internal linking audit explains how to assess their usefulness across a site. Keep same-site navigation in the current tab unless the reader has a clear reason to retain the current page.

Check your work: click every new link in preview, including the contents links. Confirm that it reaches the correct page or section and that a sticky header does not hide the destination heading.

8. Use real lists and small tables for information people need to scan

Use semantic lists and table headers rather than visual imitations.

Some paragraphs become clearer when they are turned into a list. Our example has three checks: the page title, image descriptions and links. We used a numbered List block rather than typing numbers into three unrelated paragraphs.

Create a List block with /list or the inserter. Choose numbered items when sequence matters and bullets when it does not. Enter moves to another item; an extra Enter on an empty item lets you leave the list. Check the List block guide if you need nested lists or additional controls.

A table is useful when readers need to compare the same attributes. Our table has two columns: Check and What to verify. It compares mobile layout and image checks without burying them in a paragraph.

Create a Table block, choose the row and column count, and enter the data. Select the table, open Block settings and enable Header section. Fill that section with real labels. If you already placed labels in an ordinary first body row, move them into the header and remove the duplicate row.

Why the header setting matters

Making an ordinary cell bold only changes its appearance. A proper header row gives the table a structural header. In the core Table block definition we inspected, header data maps to thead rows and cells retain their HTML tag information. The control represents structure, not just a heavier font.

Keep an article table narrow enough to be readable. If it needs eight columns of long sentences, consider splitting it into smaller comparisons. A table should not be used to position images next to paragraphs; use appropriate layout blocks for that. WordPress's Table block documentation describes its supported controls.

Check your work: on a narrow preview, every column remains understandable. If a reader must scroll horizontally, the table should still have clear labels and the page itself should not overflow unexpectedly.

9. Turn repeated notes into deliberate Groups and patterns

The Group contains the note; the available style presets depend on the theme.

A useful note should stand out without making every paragraph look like an advertisement. In the practice article, we grouped the final reminder about saving and previewing. List View then showed a Group containing the paragraph.

Select the related block or blocks and choose Group from the available block actions. Select the Group itself—not the paragraph inside it—to adjust the container. Use the theme's native style, background and spacing controls when available.

In our screenshot, “Style 2” comes from the lab's theme. It is not a universal Gutenberg preset you must find on every website. On another theme, choose an available equivalent with readable contrast. Use padding inside the box so the text does not touch its edge, and review the result on mobile.

Decide whether reused content should stay connected

Once a section works, you may want to reuse it. WordPress patterns can help, but the distinction between synced and unsynced content matters more than the name of the menu.

• Unsynced pattern: a starting layout. Once inserted, each copy can be edited independently. This suits an article-specific “Before you begin” box.
• Synced pattern: shared content whose changes can affect its other uses. This suits a notice that really must remain identical across articles.

Do not put a different product recommendation into every copy of a synced block and expect those copies to be independent. Use an unsynced pattern, or detach the instance when the interface provides that option, before making article-specific changes. The WordPress synced-pattern documentation explains the shared behavior.

Check your work: in List View, the intended blocks belong to the Group. If you save it for reuse, you know whether editing a copy can change other pages. Keep the actual advice in text, not flattened into a decorative image.

10. Preview, save and review the publishing settings

Use a narrow editor preview, then check the actual front-end page too.

The editor is where you assemble the article. The front-end preview is where you check what readers will receive. They are not always identical: your theme and plugins can add a title area, a featured image, a contents list or other elements.

Save the draft and wait for WordPress to confirm that it is saved. Use View/Preview to inspect desktop and mobile layouts, then open Preview in new tab for the actual page template. In our mobile editor preview, the two-column table remained readable; that is a useful check, but it does not replace checking the rendered page.

Read from top to bottom once without editing. Look for duplicated headings, abrupt transitions, unreadable screenshots, empty space and unnecessary boxes. Then check the links and any interactive elements. If possible, open the finished page on a real phone too.

Keep a recovery route

Use Save draft at meaningful milestones. If you need an earlier saved version, look for Revisions in Post settings; availability depends on the site's configuration and saved history. Compare before restoring, because you may lose desirable changes made after that revision. Revisions are useful editing history, not a replacement for a site backup. See the WordPress revisions guide.

Before the final publish action, check the author, visibility and publication date. If scheduling, verify the site's timezone rather than assuming it matches your laptop. A future date should lead to a scheduling action, not an accidental immediate publication. Keep the pre-publish check enabled if it helps your workflow.

Check your work: after publishing, open the public URL while logged out. A successful save in the editor does not prove that the public page, cached output and images all look right.

A compact checklist for your next article

You do not need ten new habits at once. On your next post, begin with headings, images and preview. Add the rest as the process becomes familiar.

Before publishing	What you should be able to confirm
Structure	The outline tells a coherent story, and headings use meaningful levels.
Organization	The category is intentional; any tags connect genuinely related articles.
Images	Each image has a purpose, an appropriate file and contextual alternative text.
Presentation	The featured image, excerpt and URL have been reviewed separately.
Navigation	Internal links and section jumps reach the intended destinations.
Readability	Lists, tables and note boxes remain usable on a narrow screen.
Reuse	Shared patterns are shared intentionally; article-specific content stays independent.
Publication	The saved draft, author, visibility, date and public preview have been checked.

The improvement readers notice is rarely a clever editor trick. It is an article where the headings make sense, the next step is easy to find, and the image beside an instruction actually helps them complete it. Gutenberg gives you the tools; a repeatable review routine makes them useful.