How to use the Block Editor to make your posts look the way you want them to


How do I move a block?

Blocks are designed to be easy to move around in a post. This means you can write up paragraphs or add images and then decide to re-order them without a lot cut and paste effort and without losing any formatting that you’ve already done.

There are two ways of moving blocks: Move Handles and Drag and Drop. We’ll go through each it turn.

Move handles 

The up and down arrow icons on the left side of the block can be used to move a block up and down in your document. 

Drag & Drop

You can drag blocks by clicking and holding the six-dot-grid near the top-left corner of each block. Notice the blue bars indicating where the block will be placed. Release the mouse button when you find the place to which to move the block.

Moving blocks

How do I edit a block?

Each block comes with its own Block Toolbar block-specific controls that allow you to manipulate the block right in the editor. Most Block Toolbar give you the ability to:

  • Select a different block
  • Align the block
  • Align text in the block
  • Make the text bold or italic
  • Add Hyperlinks

Let’s use the Heading Block Toolbar as an example. These are the options it offers in its toolbar:

The heading toolbar offers header tag selection, text alignment options, Bold, Italic, Hyperlinks, and more.
  • Transform
  • Align Options
  • All heading tags
  • Text Alignment
  • Text Editing Options
  • More Options

Heading block can be transformed to a Paragraph, Columns, Group, List, Quote or a Pullquote.

Align Options

The wide width and the full width align options are available if your theme supports them.

All Heading Tags

You can modify choose the heading tag from the block toolbar.

Text Editing Options

Bold and Italics

Used quite frequently, Bold and Italics formatting have their own buttons on the Toolbar. The shortcuts are CTRL+b (or Command+B) for bold and CTRL+i (or Command+i) for italics.

Insert Hyperlinks

Use the chain link icon to insert a hyperlink to your highlighted text. Or use the CTRL + k (or Command+k) keyboard shortcut.

8 thoughts on “How to use the Block Editor to make your posts look the way you want them to

  1. The Block Editor thing has become a fairly long post.

    I’m tempted to shorten it by removing these two questions:

    How do I check what my post looks like?

    What do I do to publish a post?

    I don’t think the answers vary significantly between Classic Editor and Block Editor.

    I’m also wondering how/if we respond to questions about the content.

    Do we want to have, probably in addition to this, an FAQ section for The Secret Reading Room?

    1. We’ll have a fairly extensive FAQ section — one main page and a whole boatload of tutorials in addition, linked from the main page and also from a dedicated menu.

      Having looked through your post — which I think is great and exactly the kind of guidance people are going to need — what may make the most sense in this particular instance might be to break it up into several chapters, each of them going into a separate post. This is probably also going to be the approach we’ll be taking to other, equally long / “involved” tutorials.

      Also, one of the tutorials we’re planning will be a very basic “how to get started” one, literally from “I’m here — now what?” to “this is how you publish a post” and “here’s where you find xyz item(s)”. So I would suggest that anything not specifically relating to the block editor could go there, unless the block editor has specific publishing settings beyond the “save draft / edit / schedule / publish” modes.

      Tutorials such as this should be formatted as “projects”; that will
      (1) keep them out of the general feed and move them into the dedicated feed we’re reserving for admin issues (general site announcements, tutorials, etc.) and
      (2) auto-enable a “Comments” section where questions can be asked.

      Incidentally, we’re (provisionally, but I think we’ve agreed to settle on this one) working with a theme that has a very clear setup for the “comments” section, with each “original” comment (or question) creating a new box of its own, and all subsequent responses nested within that same box. Christine, MbD and I all like that a lot; particularly when it comes to explaining things and following up on questions in the early days of the community, that should help a lot.

      1. In that case, it might makes sense to put a post with a short overview with lego bricks explanation of blocks and then links to each of the different questions as post somewhere else and have the post independently searchable.

        I don’t know how that’s done in Projects. I haven’t been able to find any tutorials on Projects on wordpress.org.

        I think the best that I can do is complete the segments and add the links and then ask you to move it into an appropriate project format.

        Will that work`?

        1. Absolutely!

          “Projects”, for our purposes, are really just glorified posts, though, which we’re using to keep the admin stuff out of the main “posts” feed, for everything that
          (a) calls for comments / responses, e.g. tutorials and the “Questions?” posts in connection with reading games, and
          (b) is most easily made accessible in a comprehensive but dedicated feed (as pages don’t go into any feed, so you necessarily have to link to those from a site menu somewhere; which in turn means that pages are basically something we’re just using as static one-off things).

          So, to tie several “projects” together, e.g. for your “block editor” tutorial, we’d basically do just what you propose: Present the basic explanation what is a block in a general intro “project” (= post filed as “project” in the site’s “portfolio” section rather than in the “posts” section), then create separate “projects” for each of the follow-up questions and link to those from the intro page. Eh voilà tout!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.