VIU Campus

The Block Editor

To create pages and posts in VIUBlogs, you will use the WordPress block editor. This interface allows you to easily add, edit, or manage content on your Post or Page. There are many different types of blocks that you can add to your site including headers, paragraphs, tables, images, image galleries, and more.

  1. In the Post/Page editing screen, click the Add Block button (plus sign icon). 

  2. If you know the type of block you are looking for, type the name of the block into the search field.

    Alternatively, you can view all the different types of blocks available on VIUBlogs by clicking the Browse all button to view all the available blocks.

  3. Find and select the block you wish to add.

  4. Following the prompts given and add your content to the block. 

  1. In the Post/Page editing screen, you can add paragraph text by clicking Start writing or type / to choose a block. Type your desired text.

  2. If you would like to change that paragraph text into a header or another written element, you can do so by clicking on the text and clicking the Change block type or style button (pilcrow icon). Then, click Heading or another block type (quote, list, verse, etc.). 

  3. You can edit the following properties regarding your written text:
    • Click the Change text alignment button to align your text to the left, centre, or right of the page.

    • Click the Link button to add a link in your text. You can link to other Posts or Pages on your site by typing the name of the Post or Page into the Search or type url field. You can also link to external websites by pasting a link into this field.

      If you would like to make the image open in a new tab, click the Open in new tab toggle button (recommended).

      Once you are finished, click the Submit button to add the link to your Post/Page. 

    • For Heading blocks, you can change the level of your heading by clicking the Change heading level button.

  4. Once you finished, click the Enter key on your keyboard to create a new paragraph block.
  1. In the Post/Page editing screen, click the Add Block button (plus sign icon). 

  2. In the Search for a block input field, type Image.

  3. There are many different types of image blocks you can add to your site (Gallery, Media & Text, Cover, etc.).

    When searching for a block, you will also be given the option to choose a layout. These layouts will add a block to your Post/Page and will also automatically adjust some styling settings on that block in order to achieve a certain look. 

    However, for the purpose of this tutorial, we will be adding the standard Image block.

  4. You can add an image to this block in multiple ways:
    1. Upload: Click this button to find and upload an image file from your device.

    2. Media Library: Click this button to find and add an image that has been uploaded to your Media Library.

    3. Insert from URL: Click this button to embed an image that has been uploaded to an external website.

  5. Once you have added your image, you can edit the following properties:
    • Click the Change Alignment button to align your image to the left, centre, or right of the page. You can also allow your image to take up the full width of the Post/Page (Wide width) or the full width of the screen (Full width).

    • Click the Insert Link button to attach a link to your image. Click the Media File button to include a link to the source file of the image. Click the Attachment Page to include a link to the Attachment Page of the image. This Attachment page will showcase the name of the image, the image itself, the upload date and resolution size, and will allow users to leave comments about the image.

      You can also link to other Posts and Pages on your site by typing the name of the Post or Page into the Paste URL or type to search field. You can also link to external websites by pasting a link into this field. 

    • Click the Crop button to change the aspect ratio of your image and/or to rotate your image. Once you are ready, click the Apply button.

    • Click the Add text over image button (A icon) to add text over your image.

    • Click the Write caption... text below your image to write a caption for your image. This text will be displayed on your site. 

    • Add alternative text so that users who require screen readers can understand what your image is displaying. You can do so by writing in the Alt text field on the right hand side of the page. Text inserted into the Alt text field will not be displayed on your site.  

    • Change the Image dimension of your image by typing into the Width or Height input fields on the right hand side of the page. Alternatively, select a dimension percentage size (25%, 50%, 75%, or 100%). 

  1. In the Post/Page editing screen, click the Add Block button (plus sign icon). 

  2. In the Search for a block input field, type and select the Embed block.

  3. Paste the Direct Link of the VIUTube video into the Enter URL to embed here... field. More information on how to find the oEmbed URL from a VIUTube video can be found on the VIUTube Embed page.

  4. Click the Embed button.