Adding pages and using the block editor

At this point you have two pages that you created earlier named home and blog.  We will leave those pages alone for now and create a brand new one about you.

  1. Click on the "Add New" button that pops up when you mouse over Pages.  As you can see, the page editor looks pretty much identical to the post editor. We are going to explore that editor in this lesson and everything you learn will also apply for editing posts.   Go ahead and title this page "About Me".
  2. Now it is time to add content. By default, WordPress uses a system called 'Block Editing' which you can think of as adding 'chunks' of content. As the screen capture below indicates, there are two options for adding a block, and, on the right side, three for instantly adding a header, image, or cover (we will talk about covers later).

  3. Click the + sign to add a block. As you can see, the WordPress developers take blocks very seriously and have created so many options that they have to categorize them, and even felt obliged to offer the option to search for a particular type of block.

  4. Click on Common Blocks, select image, and upload an image. Preferably one of you. As you can see, WordPress prompts you for a caption. Several options also appear on the right side.
    1. The first is alternative text to describe the image.
    2. The next is Image Size. When WordPress receives a new image, it automatically creates multiple sizes of the same image. You can pick a size, thumbnail, medium, or full, with the Image Size option.
    3. With Image Dimensions you can control how the image is displayed.
    4. The image link Settings allow you to link to
      1. nothing
      2. the image itself
      3. the attachment page. Click here if you are curious about attachment pages.
      4. a custom url of your choice
  5. Now add a paragraph block and enter some text. Once again, several options appear on the right side of your page.
    1. You can resize the text with the presets of normal, medium, large, and huge, or simply enter a number to fine tune the pixel size of your text.
    2. Add a drop cap. Fun, right? Leave drop cap there for now.
    3. Also note the color settings for both background and text color.
  6. Click inside of your text box and note the editing features that appear. Those are obvious but click on the downward pointing arrow and you will notice the option to add an inline image. The previous image was in its own block, but an inline image belongs to the paragraph block. If you select the image, you will notice resizing options and alignment options. Explore those options until you have a clear idea of what they offer. You will notice that left and right alignment allow you to enter text to either side of the image.
  7. Now click on the three vertical dots and click on edit as HTML You should see the actual code of the block. You may even see a class named has-drop-cap, if drop cap is still applied to your text block.
  8. Click the three vertical dots again and return to visual mode. Now click on the paragraph symbol and notice that you also have the option to switch the type of block.

  9. Just for fun add, another block and this time select RSS from the widgets category. You will be prompted for a URL. There are zillions of rss feeds out there. To make it easy, here is one from Grady News Source
    ( http://gradynewsource.uga.edu/feed/ )  and yet another from the New York Times home page feed:  https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml.
  10. Explore those block options. Add them, delete them, do your bet to gain an understanding of how they work and what they offer to you as a developer. There are lots of block types! In fact, certain plugins and themes come with their own sets of customized blocks, such as Woo Commerce, which you will meet in a future lesson.
Print Friendly, PDF & Email