EN

WordPress・Creating posts and pages

Write a post in the block editor

WordPress posts are built by stacking "blocks." Paragraph, heading, image—every one of them actually maps to an HTML tag you've learned. Let's publish your first post.

Once you’ve learned the map of the admin screen, it’s finally time to write a post. WordPress’s writing screen is called the block editor, where you assemble text and images out of building blocks called “blocks.” In truth, these blocks map one-to-one to the tags you learned in the HTML course. You already know the essence of the block editor.

The idea of a block

Open the “new post” screen and all that appears is a blank sheet and a title field.

The WordPress block editor. An input field that says “Add title,” and a + button for choosing blocks are shown
The new-post screen. From the ”+” button in the body, you choose blocks and stack them up.

You write the body one chunk = one block at a time. Write a paragraph and it’s a paragraph block; add a heading and it’s a heading block. A block’s true identity is a familiar HTML tag.

BlockGenerated HTML
Paragraph<p>
Heading<h2>–<h6>
List<ul>/<ol> and <li>
Image<img> (with <figure>)
Quote<blockquote>
Button<a> (styled to look like a button)

In other words, the block editor is a tool that lets people who don’t know tags assemble HTML anyway. Since you do know the tags, you should be able to see right through what each block is doing.

The 3 basics of writing

  1. Write text—click the body and just type, and it becomes a paragraph block. Press Enter to move to the next paragraph
  2. Choose and add a block—press the ”+” button, or type / (slash) at the start of a line to pick from a list of blocks. Narrowing by name, like /heading, is fast
  3. Operate on a block—click a block and a small toolbar appears where you can move (↑↓), transform, and delete it

Each block’s settings live in the right sidebar

Click a block to select it, and a settings panel just for that block appears on the right side of the screen. For a heading block, the level (H2–H6) and text color; for an image block, the image size and alt (alternative text)—the settings that show up change with the kind of block.

After writing, hit “Publish”—the difference from a draft

A post you’re still writing is saved as a draft and isn’t visible to anyone yet. The moment you press the “Publish” button at the top right, the post appears on the front-side site and becomes visible to the whole world.

  • Save draft—kept in a state only you can see. You can save partway as many times as you like
  • Publish—posted to the site. You can edit it later, or turn it back into a draft

Summary of this lesson

  1. Posts are written from block building blocks—a block’s true identity is an HTML tag you learned (paragraph = p, heading = h2…)
  2. Summon a block with ”+” or, faster, the / (slash) at the start of a line
  3. Keep a post as a draft, and the moment you press “Publish” it goes to the front side—check with preview before publishing

Try it: publish your first post

In Playground, let’s write and publish one post.

  1. Open the admin screen’s “Posts” → “Add New Post”
  2. Enter “My first post” as the title
  3. Write one greeting paragraph in the body
  4. Type /heading at the start of a line to add a heading block, and enter “Things I like”
  5. Below it, add a list block with /list and line up 3 things you like
  6. Press “Publish” at the top right (if a confirmation appears again, press “Publish” once more)
  7. Go back to the front side from the site name at the top left, and check that your post is at the top of the list

Write the structure you just made in HTML and it’s exactly h1 (title) + p + h2 + ul. If you get the feel of tags being assembled behind the blocks, this lesson is a big success.

FAQ

What heading level should I start from?
The post's title is already treated as h1, so the headings in your body should start from h2. Using h1 in the body throws off the heading hierarchy, so be careful.
What if I delete a block by mistake?
Don't panic—press "Undo" (Ctrl+Z or command+Z). The block editor supports rolling back your actions, so most operation slip-ups can be undone right away.