How to Create a Page With the WordPress Block Editor
A true beginner lesson explaining Pages, Blocks, the Block Editor, Block Inserter, List View, drafts, previews, publishing, updating and navigation through one complete page build.
By the end: You will create, format, preview, publish, update and publicly test a WordPress Page using the current Block Editor.
You will create, format, preview, publish, update and publicly test a WordPress Page using the current Block Editor.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- A working WordPress site
- Your /wp-admin/ login
- An account allowed to edit Pages
- A real page topic and factual content
- One real image you are allowed to publish (optional)
Real-world notes from public discussions
These are tied to public discussions, not invented case studies. Open the source to read the full thread and surrounding replies.
A patient community answer explains Blocks as content building pieces, tells the beginner to use Pages → Add New, press + to insert content, and Publish only after the simple page works.
Users describe renaming top-level Groups/containers in List View so long pages remain understandable when sections are collapsed.
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Sign in to WordPress
Open https://YOURDOMAIN.com/wp-admin/ and sign in.
/wp-admin/ is the administration area; replace YOURDOMAIN.com with the real site domain.
Select the inner Button block and assign/apply a real link.
Open Pages
In the left Dashboard menu click Pages.
A Page is normally used for durable site content such as Home, About or Services; a Post is normally used for dated article/news content.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Open All Pages first
Click Pages → All Pages and search for the page name you plan to create.
This prevents duplicate pages such as Contact and Contact-2.
The theme/template may already render the Page title while you manually added another H1. Inspect the public template and avoid duplicate page-title headings.
Start a new Page
Click Add New Page / Add New.
WordPress opens the Block Editor.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Understand the editor areas
Identify the top toolbar, central content canvas and right settings sidebar.
The top toolbar contains controls such as Block Inserter, Document Overview, undo/redo and Save/Publish; the sidebar contains page/block settings.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Enter the page title
Click the large “Add title” field and type a literal page title such as “Emergency Roof Repair”.
The page title identifies the WordPress content item and is commonly displayed by the theme and used to create the initial slug.
The theme/template may already render the Page title while you manually added another H1. Inspect the public template and avoid duplicate page-title headings.
Save the first draft
Click Save draft if available/appropriate.
A Draft is saved in WordPress but is not publicly available to normal visitors.
Add the first paragraph by typing
Click below the title and type a sentence.
An empty content area becomes a Paragraph block automatically when you type.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Open the Block Inserter
Click the + icon in the top toolbar.
The Block Inserter lets you browse/search Blocks, Patterns and Media.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Add a Heading block
In the inserter search “Heading” and click Heading. Type a real section heading such as “What this service includes”.
A Heading block creates semantic headings; use heading levels to represent structure, not simply font size.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Set the heading level
Select the Heading block and use its toolbar/settings to choose H2 for a main section below the page H1/title, unless the theme/page structure requires otherwise.
H2 normally represents a major subsection under H1.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Add another Paragraph
Press Enter after the heading or use + → Paragraph, then write 2–4 factual sentences.
Each paragraph is independently editable/movable.
The theme/template may already render the Page title while you manually added another H1. Inspect the public template and avoid duplicate page-title headings.
Add a List block
Click +, search “List”, insert it and add 3 real items.
A List is appropriate for genuinely list-like content such as included services or requirements.
Select the inner Button block and assign/apply a real link.
Add an Image block
Click + → Image. Choose Upload, Media Library or another approved source available in the editor.
The Media Library stores uploaded WordPress media; only upload media you are allowed to publish.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Write useful image alt text
Select the Image block and use the Alt text field/settings for a concise description of meaningful visual information. Use empty alt for a purely decorative image where appropriate.
Alt text is for the image purpose in context, not a keyword list.
Select the inner Button block and assign/apply a real link.
Add a Buttons block
Click + → Buttons, then type a literal action such as “Request a quote”.
Buttons is a container block; inside it is a Button block with a link.
Select the inner Button block and assign/apply a real link.
Link the button
Select the Button block, click the link control, then search for a WordPress page or paste the real URL. Confirm/apply the link.
A button-looking block without a destination is not a functional CTA.
Select the inner Button block and assign/apply a real link.
Open Document Overview / List View
Click the Document Overview/List View control in the top toolbar.
List View shows the block tree and is especially useful for nested Group/Columns/Buttons blocks.
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
Add the page to navigation if needed
With a block theme use Appearance → Editor → Navigation, or edit the Navigation block in the Header template part, and add the published page.
Publishing does not guarantee the page is in a menu.
The active theme/template supplies site-wide CSS/layout. Use Preview/public view as the authority and inspect theme styles rather than forcing the editor canvas to match exactly.
Perform the final visitor test
In a private window use the site menu → open the new page → read it → click the CTA → use browser Back → verify footer/navigation.
This tests discovery and action, not only direct URL access.
Add it to intended Navigation and/or link to it contextually from another relevant page.
Emergency Roof Repair
Concrete examples
Troubleshooting
Make sure you are editing a Page/Post in the Block Editor and look at the top toolbar. Permissions/plugins can also alter the editor interface.
The theme/template may already render the Page title while you manually added another H1. Inspect the public template and avoid duplicate page-title headings.
Select the inner Button block and assign/apply a real link.
The active theme/template supplies site-wide CSS/layout. Use Preview/public view as the authority and inspect theme styles rather than forcing the editor canvas to match exactly.
Add it to intended Navigation and/or link to it contextually from another relevant page.
Restore the old slug or add a proper redirect from old URL to new URL and update internal links.
The complete visitor path works.
How the topic comes up in practice
Short excerpts from public discussions that directly relate to the task. Use the source link for the complete context.
“In the Site Editor, click on your Header block and add a Navigation Block if it's not there already.”
navigation in the Site Editor ↗
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.