January 2021 Meetup – 3 Pages in 30 Minutes: Using the WordPress Block Editor

Our first meetup of 2021 had the highest attendance of any Hamilton WordPress meetup to date. Our speaker was Shanta Nathwani who shared how to create your home, about and contact pages in 30 minutes using Gutenberg blocks.

Special thanks to Kiera Howe from Samurai WP who hosts this site and who also provided us with sandboxes on dragonteach.com to play in so that no one needed to use their own site. Thanks also to Matt Graham from Durham WP who pays our hosting fees. Unfortunately, Matt was not able to join us for the meetup.

The About Page – How to Use Blocks

Shanta walked us through the creation of 3 pages in 30 minutes using WordPress’s block editor. (For the record, Gutenberg is the development name for the project. Once it was released, it became the block editor.)

Shanta was using her own demo site, featuring the 2021 template which was released with WordPress version 5.6. She advised that every website, regardless of what or who it’s for, should have an About page, a Contact page, and a Home page.

One of the best new features is that you can copy and paste an entire Word document and the block editor will recognize each paragraph as a block – so you no longer have to copy each paragraph separately!

Contextual formatting – bullets, emphasis, and bold – also carries over, but the semantic formatting – such as the fonts – will be that of your WordPress theme. Any links in your original text will also copy over. While it is possible to paste without any format carrying over, you shouldn’t need to. (A reminder that styles should be set within your theme, not within individual pages or posts.)

If you’re typing directly onto the page, every time you hit enter a new block is created. You can also add a new block by selecting the plus box at the top of the page. This shows a list of available blocks, with a preview if you hover.

Another neat feature in 5.6 (which may be available in 5.5 as well) is that you can edit your images inline – you can crop, resize, frame, and reshape right on the page. You can also easily move the image on the page, and the surrounding blocks will wrap accordingly. (Don’t forget to add your alt-text for screen readers.)

The Contact Page – A Warning

Shanta warned against using Jetpack as she found it broke too many other things. Instead, she’s using a paid plug-in called Gravity Forms. There is a free version available, but you can’t see the entries unless you pay for it. There is also a contact information block built-in to WordPress.

After creating the page, she imported her pre-made form and that was it, the Contact page was created. She misses the map function of Jetpack, so if anyone has any suggestions…

The Home Page – Posts or Page?

The default WordPress home page shows your latest posts. Using the Customizer, you can change your home page to a static page. You can create a new page directly from there, or tell WordPress which already created page you want to show as your home page.

You will also need to have a page for your posts (and please don’t call it “blog”, for reasons that are alluded to in the menu section below).

The Menu – How to Get There From Here

Shanta recommends you not allow WordPress to add pages to your menu by default; they should be added manually, and with careful thought. While you can edit the Menu right from the main interface, you get greater functionality by going to Appearance, then Menus. From there, you can tell WordPress not to add pages automatically.

The menu display locations available will depend on which theme you are using. Once you’ve selected your menu display, you can then add pages from the list. This list will identify which page is your home page, and which is your posts page.

You can change the order of items within your menu by dragging and dropping. You can also organize your menu by categories – drag and drop posts to below their category heading.

Other Tips

There is a MailChimp widget that you can add if you use MailChimp.

The block editor default is “Edit visually”. If you want to see the code for a given block, select the three dots in the upper right (more options) and then “Edit as HTML”.

You can see your block hierarchy by clicking on the three slanted lines at the top of the page (to the left of the info icon). This shows you the blocks in use, their order, and where you are on the page. If you have blocks within blocks, it also allows you to easily select an entire block and move it up or down by simply clicking on the arrow.

Recording

Slide Deck

Next Steps

Join us at our next meetup where we’ll be talking about how to improve your site speed.

https://www.meetup.com/WPHamOnt/events/276032165/

Posted

in

by

Comments

Leave a Reply